Dom模型

時間 2019-12-09

標籤 dom 模型欄目 HTML 简体版

原文原文鏈接

1.dom之對象分類

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>對象分類</title>
 6 
 7 </head>
 8 <body>
 9     <div id="div1">
10         <div ></div>
11         <p></p>
12     </div>
13  <script type="text/javascript">
14 
15         /*在DOM(文檔對象模型中，也是一切都是對象，可是範圍很小，就只有幾個
16             1.document object
17             2.element object
18             3.text object
19             4.attribute object
20             5.comment object
21             5個對象封裝到一個Node object中。node object有
22             本身的節點屬性：
23                 attribute；nodeType;nodeName;nodeValue;innerHTML;
24                     導航屬性：
25                         parentNode
26                         firstChild
27                         lastChild
28                         childNodes
29                         因爲上面的5個屬性都是封裝到一個Node Object中，因此咱們能夠直接使用這些屬性。/
30         */
31         var ele=document.getElementById("div1");
32                     //自身屬性
33         console.log(ele.nodeName);
34         console.log(ele.nodeType);
35         console.log(ele.nodeValue);
36                     //導航屬性之firstChild
37         var ele2=ele.firstChild;
38         alert(ele2.nodeName);//#text 結果使人驚訝，原來2個div之間有一些空格，這些就是形成是文本的緣由
39 
40         var ele3=ele.childNodes;
41         alert(ele3.length);//5，js把空白區域當成了文本
42         var parent=ele.parentNode;
43         alert(parent);
44     </script>
45 </body>
46 </html>

View Code

2.dom對象模型的根據文檔樹結構進行導航。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>對象分類</title>
 6 
 7 </head>
 8 <body>
 9     <div id="div1">
10         <div ></div>
11         <p></p>
12     </div>
13  <script type="text/javascript">
14 
15         /*在DOM(文檔對象模型中，也是一切都是對象，可是範圍很小，就只有幾個
16             1.document object
17             2.element object
18             3.text object
19             4.attribute object
20             5.comment object
21             5個對象封裝到一個Node object中。node object有
22             本身的節點屬性：
23                 attribute；nodeType;nodeName;nodeValue;innerHTML;
24                     導航屬性：
25                         parentNode
26                         firstChild
27                         lastChild
28                         childNodes
29                         因爲上面的5個屬性都是封裝到一個Node Object中，因此咱們能夠直接使用這些屬性。/
30         */
31         var ele=document.getElementById("div1");
32           /*          //自身屬性
33         console.log(ele.nodeName);
34         console.log(ele.nodeType);
35         console.log(ele.nodeValue);
36                     //導航屬性之firstChild
37         var ele2=ele.firstChild;
38         alert(ele2.nodeName);//#text 結果使人驚訝，原來2個div之間有一些空格，這些就是形成是文本的緣由
39 
40         var ele3=ele.childNodes;
41         alert(ele3.length);//5，js把空白區域當成了文本
42         var parent=ele.parentNode;
43         alert(parent);*/
44                     //既然firstChild不行，可是firstElementChild能夠
45         var ele_son=ele.firstElementChild;
46         alert(ele_son.nodeName);
47                     //lastElementChild
48         var last=ele.lastElementChild;
49         alert(last.nodeName);
50                     //全部節點children
51         var ele_nodes=ele.children;
52         alert(ele_nodes.length);
53         alert(ele_nodes[0].nodeName);
54 
55         for(var i=0;i<ele_nodes.length;i++){
56                 console.log(ele_nodes[i].nodeName);
57         }
58                    //nextElementSibling,兄弟元素節點，記住沒有空白文檔
59 
60         var sib=ele.firstElementChild;
61         console.log(sib.nextElementSibling.nodeName);
62     </script>
63 </body>
64 </html>

View Code

3.全局查找和局部查找

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>查找</title>
 6 </head>
 7 <body>
 8     <div id="div1">hello
 9         <div class="div2">hello2</div>
10         <div class="div3" name="lizebo">hello3
11                 <p>hello inner</p>
12                 <p id="p1">world innerhtml</p>
13         </div>
14         <p>hello,browser</p>
15     </div>
16     <script type="text/javascript">
17                     //這裏注意一下啊，這裏爲何是elements,而不是element。這是有意義的，由於
18                     //設計者知道以class命名元素可能有多個，而id只能有一個。
19                   //1.經過id 選擇器:document.getElementById();
20                   //2.經過class選擇器
21        var ele=document.getElementsByClassName("div2");
22        console.log(ele[0].nodeName);
23        console.log(ele[0].innerHTML);
24                     //3經過tag
25        var tagnames=document.getElementsByTagName("p");
26        console.log(tagnames);
27        console.log(tagnames[0].innerHTML);
28                     //4.經過名字,雖然用的很少，可是能夠用這個
29        var names=document.getElementsByName("lizebo");
30        console.log(names[0].nodeName);
31 
32        /*局部去找也就是不經過document找，那麼只有用element了,都差很少，這個怎麼方便怎麼用。*/
33                     var els=document.getElementsByClassName("div3")[0];
34                     var jubu=els.getElementsByTagName("p");
35                     console.log(jubu[0].innerHTML);
36 
37 
38     </script>
39 </body>
40 </html>