（2）document对象和body对象

最新推荐文章于 2024-02-01 16:06:55 发布

qq_21380373

最新推荐文章于 2024-02-01 16:06:55 发布

阅读量1k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_21380373/article/details/39645087

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一. document常见的事件

（1）onload：加载完毕触发，浏览器是一边下载文档，一边解释执行的。

（2）onunload：网页关闭或者离开网页后触发

（3）onbeforeunload：在网页准备关闭或者准备离开网页的时候触发。在事件中为事件返回值window.event.returnValue赋值（string），那么这样离开窗口或者关闭窗口之前就会弹出确认消息string。通常用来提醒发帖，编辑文章是否放弃离开。

（4）其他事件，通用的HTML元素事件：鼠标（单击，双击，按下鼠标按键，，鼠标按键释放，移入元素范围，离开元素范围），键盘按键（按下，释放，点击），焦点（失去焦点，获得焦点）

二. document常见方法属性

（1）方法：

（1.1）write/writeln:用来在页面加载过程中动态创建html。

用途：可以在html中插入语句，比如一个广告商的脚本（黑马联盟给站长挂广告），cnzz网站的统计脚本或者引用百度动态新闻的脚本。
示例二：引用百度动态新闻（引用百度的js脚本地址，从百度获取js脚本，来显示动态新闻，js脚本用记事本打开显示为document.write（.....）

<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
    //往当前文档写入内容，在html标签任意地方都可以插入脚本
    document.write("<a href='实现标题走马灯的效果.htm'>写入超链接</a>");
</script>
<head>
    <title>document.write</title>
    <script type="text/javascript">
        //往当前文档写入内容
        //html是从上到下执行的
        //document.write可以往任意位置写入内容
        //放在哪里就在哪里显示出来
        //write经常在广告代码(往文档中插入广告代码（引用别人的网站广告）)，整合资源(引用别人网站的js脚本例子网页中显示百度的新闻，动态的，百度那边维护被影响。)代码中被使用只要被嵌入的js内容提供商修改内容，显示的内容就改变
        //cnzz网站（盈利模式（黑马广告与数据统计）），统计网站访问次数。在网页中嵌入cnzz网站统计脚本和在网页中嵌入cnzz网站提供的广告商的js脚本。
        document.write("<a href='实现标题走马灯的效果.htm'>写入超链接</a>");
    </script>

<!-- 插入百度新闻脚本，获取动态信息。-->
    <!--百度新闻免费代码 样式代码-->
    <style type="text/css">{...}//这里省略
    </style>
    <!--百度新闻js脚本-->
    <script language="JavaScript" type="text/JavaScript" src="http://news.baidu.com/ns?word=title%3Ait&tn=newsfcu&from=news&cl=2&rn=5&ct=0"></script>
    <!--用记事本打开引用的js脚本，显示为document.write(....) -->
</head> 
<body>
    <script type="text/javascript">
        //往当前文档写入内容，位置自己定义。js脚本。
        document.write("<a href='实现标题走马灯的效果（内嵌函数）.htm'>写入超链接</a>");
    </script>
    <!-- 在页面加载的过程中加入内容，可以和原来的内容融合在一起，如果是onclick事件，那么页面已经加载完毕，点击会冲掉页面中的内容，只显示加入的内容。-->
    <input type="button" value="来一个" οnclick="document.write('<a href=\'实现标题走马灯的效果（内嵌函数）.htm\'>写入超链接</a>');" />
</body>
</html>

（1.2）createElement("标签名")：创建指定标签的dom对象，然后通过调用元素的appendChild方法将新创建元素添加到相应的元素下。

innerText属性，innerHTML属性，createElement方法，appendChild方法。

示例1：熟悉上述的属性和方法

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>几乎所有的Dom元素都有innerText（内部文本），innerHTML属性（内部超文本标记语言），用来取得（元素内部文本或者内部标记语言）对象，来进行取值和赋值。Javascript是大小写敏感的
    </title>

    <script type="text/javascript">
        function seta() {
            //document才有创建标签的方法，body没有,所有标签都是document的，包括td，tr，a，input等。
            //body1.innerHTML = "<a href='http://baidu.com'>百度2</a>";
            //思路，通过给内部的html赋值来赋值标签，会覆盖原有的HTML
            //思路2，通过document创建标签，然后添加到body中，有添加子节点的方法。
            var link1 = document.createElement("a");
            link1.href = "http://www.baidu.com";
            link1.innerText = "百度2";
            //注意下面的写法是错误的，默认调用了tostring方法
           // document.body.innerHTML = link1;
            document.body.appendChild(link1);
        }
    </script>
</head>
<body id="body1">
    <a href="http://www.baidu.com" id="link1">百<font color="red"><input type="button" /></font></a>
    <!--获取元素的innerText（纯文本）和innerHTML（HTML包含内部的标签之类的。）-->
    <input type="button" value="获取" οnclick="alert(document.getElementById('link1').innerText);alert(document.getElementById('link1').innerHTML)" />
    <!-- -->
    <input type="button" value="修改" οnclick="document.getElementById('link1').innerText='百度链接';" />
    <input type="button" value="修改" οnclick="document.getElementById('link1').innerHTML='<p>内容已经被替换了</p>';" />
    <!-- 创建一个新的a标签，通过点击button来添加 -->
    <input type="button" οnclick="seta()" value="给body元素添加子节点a标签" />
</body>
</html>

示例2：动态添加table的元素

方式一：严谨的写法，table-tbody-tr-td。思路：创建td-创建tr-添加到tbody-添加到table

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>动态添加table元素</title>
    <script type="text/javascript">
        function LoadData() {
            //JavaScript key/value键值对定义方法 var s ={key:value,key:value....};
            //访问方式，直接用foreach遍历
            var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com", "腾讯": "http://www.qq.com" };
            for (var key in data) {
                //增加子节点用附加子节点方法
                //因为IE6中<table>标签不支持appendChild()方法.body-table-tbody-tr-td,要插入tbody标签
                var tr = document.createElement("tr");

                var td1 = document.createElement("td");
                td1.innerText = key;
                tr.appendChild(td1);

                var td2 = document.createElement("td");
                var link = document.createElement("a");
                link.href = data[key];
                link.innerText = data[key];
                //把link节点添加到td2中
                td2.appendChild(link);
                // 把td2中的内部html重写为link标签
                //这个方法不行，具体在研究中
                //td2.innerHTML = link;
                //下面这个方法也可以，但是还是推荐用添加子节点的方式来比较容易理解。
                //td2.innerHTML = "<a href='" + data[key] + "'>" + data[key] + "</a>";

                tr.appendChild(td2);

                var tablebody = document.getElementById("tablebody");
                tablebody.appendChild(tr);
            }
        }
    </script>
</head>
<body>

    <input type="button" οnclick="LoadData()" value="加载数据" />
    <table id="tableData">
    <tbody id="tablebody">
    </tbody>
    </table></body>
</html>

方式二：调用table的方法来创建tr，跳过tbody。思路：创建talbe的子节点tr-创建tr的子节点td1，td2-td1，td2添加html内容。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>动态添加表格方法二（table（1级）不添加tbody（2级）直接添加下级元素tr（3级），其实这样不严谨的。）</title>

    <script type="text/javascript">
        function btnClick() {
            var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com", "腾讯": "http://www.qq.com" };
            var tb1 = document.getElementById("tb1");
            for (var key in data) {
                var value = data[key];
                //表示在最后的位置创建一个tr
                var tr = tb1.insertRow(-1);
                //插入一个cell
                var td1 = tr.insertCell(-1);
                td1.innerHTML = key; //firefox浏览器不支持innerText
                //小细节注意，不要输错单词。不然要坑死青春。
                var td2 = tr.insertCell(-1);
                td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
            }
        }
    </script>

</head>
<body>
    <table id="tb1">
    </table>
    <input type="button" value="添加" οnclick="btnClick();" />
</body>
</html>

示例3：无刷新评论。

动态添加子节点，来实现无刷新评论

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无刷新评论（动态添加评论）//直接在浏览器返回结果</title>

    <script type="text/javascript">
        //ie6，ie7的对appendChild的支持要严格的按照table的定义（table-ttitle/tbody-tr-td)
        function btnClick() {
            var s1 = document.getElementById("textarea").value;
            var s2 = document.getElementById("text").value;
            var sresult = s1 + "<br/>" + s2;
            var tbody = document.getElementById("tbody");
            var td = document.createElement("td");
            td.innerHTML = sresult;
            var tr = document.createElement("tr");
            tr.appendChild(td);
            tbody.appendChild(tr);
        }
    </script>

</head>
<body>
    天魔神谭
    <p>
        评论区</p>
    <table>
        <tbody id="tbody">
        </tbody>
    </table>
    昵称<input type="text" id="text" /><br />
    <textarea id="textarea"></textarea>
    <input type="button" value="评论" οnclick="btnClick()" />
</body>
</html>

（1.3） getElementById，getElementsByName，getElementsByTagName来选取元素对象。注意看元素复数形式，byId返回单一的对象，而后面两都是返回数组。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>获取元素的对象getElementby(name返回数组/tagname/id)</title>
    <script type="text/javascript">
        function btnClick1() {
            alert(document.getElementById("txt1").value);
            //getElementByName 按照name取得元素，数组。
            var values = document.getElementsByName("文本框");
            //遍历数组的元素还是用老方法。
            //foreach(js中for（var i in a）)的循环是取到对象的key/value 不仅包括数组，还有数组的各种属性
            for (var i = 0; i < values.length; i++) {
                var str = values[i].value;
                alert(str);
            }
        }
        function btnClick2() {
            var inputs = document.getElementsByTagName("input");
            for (var i in inputs) {
                var input = inputs[i];
                input.value = "OK";
            }
        }
    </script>
</head>
<body>
<form action="Dom事件.htm" id="form1">
<!-- 有name属性 通过取tag方式取不到含有name属性的值。删除掉name属性就可以获取该标签。在360浏览器中赋值会全部覆盖，在ie浏览器不会-->
<input type="text" id="txt1" value="点击1" name="文本框"/>
<input type="text" id="txt2" value="点击2" name="文本框" />
<input type="button" value="点击" οnclick="btnClick1()"/>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="button" value="给input标签赋值" οnclick="btnClick2();" />
</form>
</body>
</html>

例子：注册按钮的实现

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>注册延迟10秒按钮的实现</title>

    <script type="text/javascript">
        var i = 10;
        function regstate() {
            var btn = document.getElementById("reg");
            btn.value = i;
            btn.disabled = true;
            var Intervas;
            deci = function() {
                if (i != 0) {
                    i = i - 1;
                    btn.value = i;
                }
                else {
                    clearInterval(Intervas);
                    btn.disabled = false;
                    btn.value = "同意";
                }
            }
                Intervas = setInterval(deci, 1000);
            }
    </script>

</head>
<body οnlοad="regstate()">
    <input type="text" />
    <input type="button" id="reg" />
</body>
</html>

例子二：实现图片的循环跳转

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>图片循环（1,2,3,2,1,2,3....）</title>
    <script type="text/javascript">
        //取得的标签是个对象，直接用变量操作就是对对象直接操作。image.src对应是beauty.src
        function imggo() {
            var i = 0;
            var Intervas;
            var imark = 0;
            var image = document.getElementById("beauty");
            image.src = "图片/1.jpg";
            //添加一个标识，来区分是自增还是自减。
            function imgset() {
                if (imark == 0) {
                    if (i < 2) {
                        i++;
                    }
                    else {
                        i = 3;
                        imark = 1;
                    }
                }
                else {
                    if (i > 2) {
                        i--;
                    }
                    else {
                        i = 1;
                        imark = 0;
                    }
                }
                image.src = "图片/" + i + ".jpg";
            }
            Intervas = setInterval(imgset, 1000);
        }
    </script>

</head>
<body οnlοad="imggo()">
    <img id="beauty" src="" alt="图片" />
    <input type="button" />
</body>
</html>

例子三：js脚本的加法计算器（有强制转换，失败则显示NaN，not a number）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dom加法计算器</title>
    <script type="text/javascript">
        function addnumber() {
        //如果输入非数字那么txt3的值为NaN not a number。
            var number1 = document.getElementById("txt1").value;
            number1 = parseInt(number1, 10);
            var number2 = document.getElementById("txt2").value;
            number2 = parseInt(number2, 10);
            document.getElementById("txt3").value = number1 + number2;
        }
    </script>
</head>
<body>
<input type="text" id = "txt1"/>
<input type="text" id= "txt2"/>
<input type="button" οnclick="addnumber()"/>
<input type="text"  readonly="readonly" id="txt3"/>
</body>
</html>