DOM的概念及子節點類型_ZenDei技術網路在線

前言 DOM的作用是將網頁轉為一個javascript對象，從而可以使用javascript對網頁進行各種操作(比如增刪內容)。瀏覽器會根據DOM模型，將HTML文檔解析成一系列的節點，再由這些節點組成一個樹狀結構。DOM的最小組成單位叫做節點(node)，文檔的樹形結構(DOM樹)由12種類型的節 ...

前言

DOM的作用是將網頁轉為一個javascript對象，從而可以使用javascript對網頁進行各種操作(比如增刪內容)。瀏覽器會根據DOM模型，將HTML文檔解析成一系列的節點，再由這些節點組成一個樹狀結構。DOM的最小組成單位叫做節點(node)，文檔的樹形結構(DOM樹)由12種類型的節點組成。

一：DOM ==> 全稱： document Object Mode 文檔對象模型

文檔： html頁面

文檔對象：頁面元素（節點）

文檔對象模型： W3C標准定義：為了能夠使用javascript去操作頁面中的元素定義出來的標準

二：DOM會把文檔當成一節點樹，文檔裡面的每一個元素都是一個節點。同時定義了很多方法來操作這些節點（元素）

三：屬性

　　什麼是屬性：

　　　　1.使用的時候不用再前面加括弧

　　　　2.一個屬性肯定是某個對象下麵的，所以在使用的時候肯定是調用某個對象（元素）下麵的屬性

　　元素.childNodes （存在相容性，不推薦使用，推薦使用另一個 children）

元素.children （不管在標準還是非標準下，只包含元素類型的節點。推薦使用）

　　　　特點：只讀屬性。

　　　　代表：子節點列表集合,試劑盒就有長度，可使用數組形式獲取

　　　　只包含兒子子節點，不包含孫子子節點

　　　　獲取：實行 [] 下表獲取

　　　　標準模式下（非IE）：childNodes 包含了文本和元素類型節點，也會包含非法嵌套的子節點（註意：不是孫子節點）

　　　　非標準：childNodes只包含元素類型的節點。ie7以不會包含非法嵌套子節點

　　　　ul元素下麵的所有子元素都包括在這個childNodes屬性裡面

　　　　訪問ul裡面的所有 li 子元素形式：

　　　　　　var oul = document.getElementById('ul');

　　　　　　oul.childNodes.length // 9 標準模式下

1 <ul id='ul'>
2     <li>1</li>
3     <li>2</li>
4     <li>3</li>
5     <li>4</li>
6 </ul>

為什麼是9呢？

DOM裡面定義了12種節點：

一般地，節點至少擁有nodeType、nodeName和nodeValue這三個基本屬性。

元素.nodeType 1

　　只讀屬性，代表當前元素的類型

　　nodeType屬性返回節點類型的常數值。不同的類型對應不同的常數值，12種類型分別對應1到12的常數值

元素.attributes

　　只讀屬性，代表當前元素的屬性是什麼（如：id，border，，，等屬性）

　　屬性列表集合

　　屬性的名稱：元素.attributes[0].name

　　屬性的值：元素.attributes[0].value

 1 <ul id='ul' style= 'color','red'>
 2     <li>1</li>
 3     <li>2</li>
 4     <li>3</li>
 5     <li>4</li>
 6 </ul>
 7 
 8 var oul =  document.getElementById('ul');
 9 oul.attributes.length  //2
10 oul.attributes[0].name  //id
11 元素.attributes[1].value  //red

--------------------------------------------------------------------------------------------------------------------

元素節點　　 Node.ELEMENT_NODE(1) nodeType值： 1

屬性節點　　 Node.ATTRIBUTE_NODE(2) nodeType值： 2

文本節點　　 Node.TEXT_NODE(3) nodeType值： 3

CDATA節點 Node.CDATA_SECTION_NODE(4) nodeType值： 4

實體引用名稱節點　 Node.ENTRY_REFERENCE_NODE(5) nodeType值： 5

實體名稱節點　　 Node.ENTITY_NODE(6) nodeType值： 6

處理指令節點　　 Node.PROCESSING_INSTRUCTION_NODE(7) nodeType值： 7

註釋節點　 Node.COMMENT_NODE(8) nodeType值： 8

文檔節點　 Node.DOCUMENT_NODE(9) nodeType值： 9

文檔類型節點　　 Node.DOCUMENT_TYPE_NODE(10) nodeType值： 10

文檔片段節點　　 Node.DOCUMENT_FRAGMENT_NODE(11) nodeType值： 11

DTD聲明節點 Node.NOTATION_NODE(12) nodeType值： 12

--------------------------------------------------------------------------------------------------------------------

DOM定義了一個Node介面，這個介面在javascript中是作為Node類型實現的，而在IE8-瀏覽器中的所有DOM對象都是以COM對象的形式實現的。所以，IE8-瀏覽器並不支持Node對象的寫法

1 //在標準瀏覽器下返回1，而在IE8-瀏覽器中報錯，提示Node未定義 2 console.log(Node.ELEMENT_NODE);//1

nodeName

nodeName屬性返回節點的名稱

nodeValue

nodeValue屬性返回或設置當前節點的值，格式為字元串

接下來，將按照節點類型的常數值對應順序，從1到12進行詳細說明

【1】元素節點

元素節點element對應網頁的HTML標簽元素。元素節點的節點類型nodeType值是1，節點名稱nodeName值是大寫的標簽名，nodeValue值是null

以body元素為例

1 // 1 'BODY' null
2 console.log(document.body.nodeType,document.body.nodeName,document.body.nodeValue)
3 console.log(Node.ELEMENT_NODE === 1);//true

【2】特性節點

元素特性節點attribute對應網頁中HTML標簽的屬性，它只存在於元素的attributes屬性中，並不是DOM文檔樹的一部分。特性節點的節點類型nodeType值是2，節點名稱nodeName值是屬性名，nodeValue值是屬性值

現在，div元素有id="test"的屬性

1 <div id="test"></div>
2 <script>
3     var attr = test.attributes.id;
4     //2 'id' 'test'
5     console.log(attr.nodeType,attr.nodeName,attr.nodeValue)
6     console.log(Node.ATTRIBUTE_NODE === 2);//true 
7 </script>

【3】文本節點

文本節點text代表網頁中的HTML標簽內容。文本節點的節點類型nodeType值是3，節點名稱nodeName值是'#text'，nodeValue值是標簽內容值

現在，div元素內容為'測試'

1 <div id="test">測試</div>
2 <script>
3     var txt = test.firstChild;
4     //3 '#text' '測試'
5     console.log(txt.nodeType,txt.nodeName,txt.nodeValue)
6     console.log(Node.TEXT_NODE === 3);//true 
7 </script>

【4】CDATA節點

CDATASection類型只針對基於XML的文檔，只出現在XML文檔中，表示的是CDATA區域，格式一般為

1 <![CDATA[
2 ]]>

該類型節點的節點類型nodeType的值為4，節點名稱nodeName的值為'#cdata-section'，nodevalue的值是CDATA區域中的內容

【5】實體引用名稱節點

實體是一個聲明，指定了在XML中取代內容或標記而使用的名稱。實體包含兩個部分，首先，必須使用實體聲明將名稱綁定到替換內容。實體聲明是使用 <!ENTITY name "value"> 語法在文檔類型定義(DTD)或XML架構中創建的。其次，在實體聲明中定義的名稱隨後將在 XML 中使用。在XML中使用時，該名稱稱為實體引用。

實體引用名稱節點entry_reference的節點類型nodeType的值為5，節點名稱nodeName的值為實體引用的名稱，nodeValue的值為null

1 //實體名稱
2 <!ENTITY publisher "Microsoft Press">
3 //實體名稱引用
4 <pubinfo>Published by &publisher;</pubinfo>

【6】實體名稱節點
上面已經詳細解釋過，就不再贅述

該節點的節點類型nodeType的值為6，節點名稱nodeName的值為實體名稱，nodeValue的值為null

【7】處理指令節點

處理指令節點ProcessingInstruction的節點類型nodeType的值為7，節點名稱nodeName的值為target，nodeValue的值為entire content excluding the target

【8】註釋節點

註釋節點comment表示網頁中的HTML註釋。註釋節點的節點類型nodeType的值為8，節點名稱nodeName的值為'#comment'，nodeValue的值為註釋的內容

現在，在id為myDiv的div元素中存在一個

1 <div id="myDiv"><!-- 我是註釋內容 --></div>
2 <script>
3     var com = myDiv.firstChild;
4     //8 '#comment' '我是註釋內容'
5     console.log(com.nodeType,com.nodeName,com.nodeValue)
6     console.log(Node.COMMENT_NODE === 8);//true 
7 </script>

【9】文檔節點

文檔節點document表示HTML文檔，也稱為根節點，指向document對象。文檔節點的節點類型nodeType的值為9，節點名稱nodeName的值為'#document'，nodeValue的值為null

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8 <script>
 9     var nodeDocumentType = document.firstChild;
10     //10 "html" null
11     console.log(nodeDocumentType.nodeType,nodeDocumentType.nodeName,nodeDocumentType.nodeValue);
12     console.log(Node.DOCUMENT_TYPE_NODE === 10);
13 </script>
14 </body>
15 </html>

【11】文檔片段節點

文檔片段節點DocumentFragment在文檔中沒有對應的標記，是一種輕量級的文檔，可以包含和控制節點，但不會像完整的文檔尋親戰勝額外的資源。該節點的節點類型nodeType的值為11，節點名稱nodeName的值為'#document-fragment'，nodeValue的值為null

1 <script>
2     var nodeDocumentFragment = document.createDocumentFragment(); 
3     //11 "#document-fragment" null
4     console.log(nodeDocumentFragment.nodeType,nodeDocumentFragment.nodeName,nodeDocumentFragment.nodeValue);
5     console.log(Node.DOCUMENT_FRAGMENT_NODE === 11);//true
6 </script>

【12】DTD聲明節點

DTD聲明節點notation代表DTD中聲明的符號。該節點的節點類型nodeType的值為12，節點名稱nodeName的值為符號名稱，nodeValue的值為null

總結

在這12種DOM節點類型中，有一些適用於XML文檔，有一些是不常用的類型。而對於常用類型，後面會陸續進行詳細介紹，本文對這12種節點類型只做概述，希望本文對大家能有所幫助。