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>

如果覺得我的文章對您有用,請隨意打賞。您的支持將鼓勵我繼續創作!

發表評論

電子郵件地址不會被公開。 必填項已用*標注

中了亿元大奖 1万炒股一年最多挣多少 陕西快乐10分开奖结果 辉煌棋牌官方正版app 王者捕鱼官方 幸运28预测 大智慧股票软件下载 舟山体彩飞鱼开奖结果 股票发行价格在哪看 中国十只最有价值股票 山东体彩扑克3下载