12種DOM節點類型概述
DOM是javascript操作網頁的接口,全稱爲文檔對象模型(Document Object Model)。它的作用是將網頁轉爲一個javascript對象,從而可以使用javascript對網頁進行各種操作(比如增刪內容)。瀏覽器會根據DOM模型,將HTML文檔解析成一系列的節點,再由這些節點組成一個樹狀結構。DOM的最小組成單位叫做節點(node),文檔的樹形結構(DOM樹)由12種類型的節點組成。本文將主要說明DOM節點類型
【1】元素節點
元素節點element對應網頁的HTML標籤元素。元素節點的節點類型nodeType值是1,節點名稱nodeName值是大寫的標籤名,nodeValue值是null
以body元素爲例
// 1 'BODY' null
console.log(document.body.nodeType,document.body.nodeName,document.body.nodeValue)
console.log(Node.ELEMENT_NODE === 1);//true
【2】特性節點
元素特性節點attribute對應網頁中HTML標籤的屬性,它只存在於元素的attributes屬性中,並不是DOM文檔樹的一部分。特性節點的節點類型nodeType值是2,節點名稱nodeName值是屬性名,nodeValue值是屬性值
現在,div元素有id="test"的屬性
<div id="test"></div>
<script>
var attr = test.attributes.id;
//2 'id' 'test'
console.log(attr.nodeType,attr.nodeName,attr.nodeValue)
console.log(Node.ATTRIBUTE_NODE === 2);//true
</script>
【3】文本節點
文本節點text代表網頁中的HTML標籤內容。文本節點的節點類型nodeType值是3,節點名稱nodeName值是'#text',nodeValue值是標籤內容值
現在,div元素內容爲'測試'
<div id="test">測試</div>
<script>
var txt = test.firstChild;
//3 '#text' '測試'
console.log(txt.nodeType,txt.nodeName,txt.nodeValue)
console.log(Node.TEXT_NODE === 3);//true
</script>
【5】實體引用名稱節點
實體是一個聲明,指定了在XML中取代內容或標記而使用的名稱。 實體包含兩個部分, 首先,必須使用實體聲明將名稱綁定到替換內容。 實體聲明是使用 <!ENTITY name "value"> 語法在文檔類型定義(DTD)或XML架構中創建的。其次,在實體聲明中定義的名稱隨後將在 XML 中使用。 在XML中使用時,該名稱稱爲實體引用。
實體引用名稱節點entry_reference的節點類型nodeType的值爲5,節點名稱nodeName的值爲實體引用的名稱,nodeValue的值爲null
//實體名稱
<!ENTITY publisher "Microsoft Press">
//實體名稱引用
<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元素中存在一個<!-- 我是註釋內容 -->
<div id="myDiv"><!-- 我是註釋內容 --></div>
<script>
var com = myDiv.firstChild;
//8 '#comment' '我是註釋內容'
console.log(com.nodeType,com.nodeName,com.nodeValue)
console.log(Node.COMMENT_NODE === 8);//true
</script>
【9】文檔節點
文檔節點document表示HTML文檔,也稱爲根節點,指向document對象。文檔節點的節點類型nodeType的值爲9,節點名稱nodeName的值爲'#document',nodeValue的值爲null
<script>
//9 "#document" null
console.log(document.nodeType,document.nodeName,document.nodeValue)
console.log(Node.DOCUMENT_NODE === 9);//true
</script>
【10】文檔類型節點
文檔類型節點DocumentType包含着與文檔的doctype有關的所有信息。文檔類型節點的節點類型nodeType的值爲10,節點名稱nodeName的值爲doctype的名稱,nodeValue的值爲null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var nodeDocumentType = document.firstChild;
//10 "html" null
console.log(nodeDocumentType.nodeType,nodeDocumentType.nodeName,nodeDocumentType.nodeValue);
console.log(Node.DOCUMENT_TYPE_NODE === 10);
</script>
</body>
</html>
【11】文檔片段節點
文檔片段節點DocumentFragment在文檔中沒有對應的標記,是一種輕量級的文檔,可以包含和控制節點,但不會像完整的文檔尋親戰勝額外的資源。該節點的節點類型nodeType的值爲11,節點名稱nodeName的值爲'#document-fragment',nodeValue的值爲null
<script>
var nodeDocumentFragment = document.createDocumentFragment();
//11 "#document-fragment" null
console.log(nodeDocumentFragment.nodeType,nodeDocumentFragment.nodeName,nodeDocumentFragment.nodeValue);
console.log(Node.DOCUMENT_FRAGMENT_NODE === 11);//true
</script>
【12】DTD聲明節點
DTD聲明節點notation代表DTD中聲明的符號。該節點的節點類型nodeType的值爲12,節點名稱nodeName的值爲符號名稱,nodeValue的值爲null
最後
在這12種DOM節點類型中,有一些適用於XML文檔,有一些是不常用的類型。而對於常用類型,後面會陸續進行詳細介紹,本文對這12種節點類型只做概述