javascript文档对象模型-Document 对象

作者: 鲁智深 分类: JAVASCRIPT 发布时间: 2015-12-17 15:42

DOM 的全称为 Document Object Model,译为文档对象模型。DOM 规定了浏览器应该如何创建 HTML 页面,以及 JavaScript 如何访问和修改浏览器窗口中的 Web 页面的内容。

事件概念

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件概念</title>

</head>
<body>
    <button id="btn">按钮</button>
    <script>
        //定位到html按钮位置
        var btn = document.getElementById('btn');
        //为按钮注册事件
        btn.onclick = function(){
            alert('这是一个按钮');
        }
    </script>
</body>
</html>

Document对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03Document对象</title>
</head>
<body>
    <a href="#">链接</a>
    <script>
       //document对象是DOM提供,作为解析的入口
       console.log(document);
       //document对象应该是Document类型的 - Document是一个构造函数
       console.log(typeof document);//object
       //Document是构造函数 -> 具有原型prototype属性
       //document对象的属性和方法 -> 多源于Document的prototype原型上
       console.log(Document.prototype);
    </script>
</body>
</html>

Document对象查询方法

1
2
3
4
5
6
<h1 id="p1">这是标题</h1>
    <p name="p2">这是name</p>
    <p name="p2">这是name2</p>
    <p class="myclass">这是myclass</p>
    <p class="myclass">这是myclass1</p>
    <p class="myclass">这是myclass2</p>

1.通过id属性定位getElementById

1
2
3
4
5
6
7
8
    //1.通过id属性定位
       var p1 = document.getElementById('p1');
     /*
       定位的内容 -> 打印的是HTML的源代码
       * 得到的真正的内容是 -> HTML对应元素的DOM对象
     */

     console.log(p1);
     console.log(typeof p1);

2.通过name属性值定位HTML页面的元素getElementsByName

1
2
3
4
5
6
7
8
     /*
        2. 通过name属性值定位HTML页面的元素
        * name属性值允许重复,得到的元素可能是多个
        * 返回值是一个数组 -> 用于存储多个元素
    */

    var p2 = document.getElementsByName('p2');
    console.log(p2[0]);
    console.log(p2);//输出类数组

3.通过元素标签名称定位HTML页面的元素getElementsByTagName

1
2
3
4
5
6
7
8
     /*
        3. 通过元素标签名称定位HTML页面的元素
           * 返回值是一个数组 -> 用于存储多个元素
     */

    var pElementsp = document.getElementsByTagName('p');
    console.log(pElementsp);//(5) [p, p, p.myclass, p.myclass, p.myclass, p2: p]
    console.log(pElementsp.length);//5获取类数组值个数
    /*

4.通过class属性值定位HTML页面的元素getElementsByClassName

1
2
3
4
5
6
7
8
9
/*
        4. 通过class属性值定位HTML页面的元素
           * 返回值是一个类数组 -> 用于存储多个元素
           * 浏览器兼容问题
             * IE 8及之前版本不支持该方法
     */

     var myclass = document.getElementsByClassName('myclass');
     console.log(myclass);//(3) [p.myclass, p.myclass, p.myclass]
     console.log(myclass.length);//3

5.element.querySelector(CSS 选择器)

1
2
3
4
5
6
7
/*5.
       element.querySelector(CSS 选择器)
       方法返回匹配指定 CSS 选择器元素的第一个子元素 。
       需要注意的是选择器id加#,class加.
     */

      var qs = document.querySelector('.myclass');
      console.log(qs);

6. element.querySelectorAll(CSS 选择器)

1
2
3
4
5
6
/*6.
       element.querySelectorAll(CSS 选择器)
       如果你要返回所有匹配元素,请使用 querySelectorAll() 方法替代。
     */

      var qs = document.querySelectorAll('.myclass');//(3) [p.myclass, p.myclass, p.myclass]输出类数组
      console.log(qs);

05缓存DOM查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05缓存DOM查询</title>
</head>
<body>
    <p>这是缓存DOM</p>
    <span>这是缓存DOM2</span>
    <script>
        //通过变量形式缓存到内存
        var p = document.getElementsByTagName('p');
        console.log(p);
       
        //不通过变量每次需要重新调头路径
        console.log(document.getElementsByTagName('span'));

        //总结:如果需要多次调用可以设置缓存到内存中,反正则不需要。
    </script>
</body>
</html>

06DOM查询对比

性能对比

getElementById()方法

querySelector()方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var date = new Date();
            for(i = 0;i<100000;i++){
                var p1 = document.getElementById('p1');
            }
            var date1 = new Date();
        console.log(date1.getTime()-date.getTime()+'毫秒');
       
        //querySelector()方法
        var date2 = new Date();
            for(i = 0;i<100000;i++){
                var p2 = document.querySelector('#p2');
            }
            var date3 = new Date();
        console.log(date3.getTime()-date2.getTime()+'毫秒');
循环后的性能对比

循环后的性能对比

结论:小并发的情况下2种查询差别不大,在大并发情况下,两者差别就较大!

查询结果的不同对比

getElementById()方法

查询方法会随着页面代码增加,查询结果也增加。

查询方法会随着页面代码增加,查询结果也增加。

querySelector()方法

只返回第一次查询的结果,不随着查询结果增加。

只返回第一次查询的结果,不随着查询结果增加。

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var li = document.getElementsByTagName('li');
         console.log(li);//(4) [li, li, li, li]
         //创建元素节点
         var tagli = document.createElement('li');
         console.log(tagli);
         //将元素节点添加到父级ul下
         var domid = document.getElementById('domid');
         domid.appendChild(tagli);
         console.log(li);//(5) [li, li, li, li, li]  



         var li = document.querySelectorAll('li');
         console.log(li);//(4) [li, li, li, li]
         //创建元素节点
         var tagli = document.createElement('li');
         console.log(tagli);
         //将元素节点添加到父级ul下
         var domid = document.getElementById('domid');
         domid.appendChild(tagli);
         console.log(li);//(4) [li, li, li, li]

结论:

getElementById()查询方法会随着页面代码增加,查询结果也增加。

querySelector()只返回第一次查询的结果,不随着查询结果增加。

07通过NodeList对象对比DOM查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06通过NodeList对象对比DOM查询</title>
</head>
<body>
        <p class="myclass">这是一个段落测试内容.</p>
        <p class="myclass">这是一个段落测试内容.</p>
        <p class="myclass">这是一个段落测试内容.</p>
        <script>
             //动态NodeList
             var htmlcollection = document.getElementsByClassName('myclass');
             console.log(htmlcollection);//返回__proto_:HTMLCollection
             console.log(htmlcollection instanceof Array);//false
             console.log(htmlcollection instanceof Object);//true
             console.log(htmlcollection instanceof HTMLCollection);//true
             console.log(HTMLCollection);// { [native code] }
             console.log(HTMLCollection.prototype);
             console.log(HTMLCollection instanceof NodeList);// false
             console.log(HTMLCollection.prototype instanceof NodeList);// false

             //静态NodeList
             var NodeList1 = document.querySelectorAll('.myclass');
             console.log(NodeList1);//返回__proto__:NodeList
             console.log(NodeList1 instanceof Object);//true
             console.log(NodeList1 instanceof Array);//false
        </script>
</body>
</html>
nodelist

nodelist

结论:

1、两种查询方法存在不同的原型

2、getElementsBy..()虽然被称为动态NodeList,但其实和NodeList没有必然关系

3、querySelector..()存在必然联系

4、返回的数据类似数组格式,但不是数组,是一种类数组格式

08Docunment对象的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08Document对象的属性</title>
</head>
<body>
    <form action=""></form>
    <img src="" alt="">
    <script>
        // documentElement属性 -> 获取当前HTML页面的根标签(<html>)
        console.log(document.documentElement);
       
        // head属性 ->获取当前HTML页面的<head>标签
        console.log(document.head);
       
        //body属性 -> 获取当前HTML页面的<body>标签
        console.log(document.body);
       
        // forms属性 -> 获取当前HTML页面的所有表单元素
        console.log(document.forms);
       
        // images属性 -> 获取当前HTML页面的所有图片元素
        console.log(document.images);
    </script>
</body>
</html>

09创建节点案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>12创建节点</title>
    </head>
    <body>
        <ul id="tell">
            <li>苹果</li>
            <li>锤子</li>
            <li>小米</li>
        </ul>
        <script>
            // 向<ul>标签下添加一个新的<li>子标签 - <li id="mg">木瓜</li>
            //创建元素节点
            var li = document.createElement('li');
            console.log(li);

            //创建属性节点
            var id = document.createAttribute('id');
            console.log(id);
            //根据属性添加值
            id.nodeValue = 'meizu';
            li.setAttributeNode(id);//将属性节点添加到元素节点上面

            //创建文本节点
            var text = document.createTextNode('魅族');
            console.log(text);

            // 将文本节点作为子节点添加到元素节点上
            li.appendChild(text);

            //将元素节点添加到父级元素上
            var tell = document.getElementById('tell');//查询节点位置
            tell.appendChild(li);
        </script>
    </body>
    </html>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注