深刻理解DOM節點類型第一篇——12種DOM節點類型概述

時間 2019-12-13

標籤深刻理解 dom 節點類型一篇概述欄目 HTML 简体版

原文原文鏈接

前面的話javascript

　　DOM是javascript操做網頁的接口，全稱爲文檔對象模型(Document Object Model)。它的做用是將網頁轉爲一個javascript對象，從而能夠使用javascript對網頁進行各類操做(好比增刪內容)。瀏覽器會根據DOM模型，將HTML文檔解析成一系列的節點，再由這些節點組成一個樹狀結構。DOM的最小組成單位叫作節點(node)，文檔的樹形結構(DOM樹)由12種類型的節點組成。本文將主要說明DOM節點類型

總括

　　通常地，節點至少擁有nodeType、nodeName和nodeValue這三個基本屬性。節點類型不一樣，這三個屬性的值也不相同html

nodeTypejava

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

元素節點            　　Node.ELEMENT_NODE(1)
屬性節點            　　Node.ATTRIBUTE_NODE(2)
文本節點            　　Node.TEXT_NODE(3)
CDATA節點             Node.CDATA_SECTION_NODE(4)
實體引用名稱節點    　　 Node.ENTRY_REFERENCE_NODE(5)
實體名稱節點        　　Node.ENTITY_NODE(6)
處理指令節點        　　Node.PROCESSING_INSTRUCTION_NODE(7)
註釋節點            　 Node.COMMENT_NODE(8)
文檔節點            　 Node.DOCUMENT_NODE(9)
文檔類型節點        　　Node.DOCUMENT_TYPE_NODE(10)
文檔片斷節點        　　Node.DOCUMENT_FRAGMENT_NODE(11)
DTD聲明節點            Node.NOTATION_NODE(12)

　　DOM定義了一個Node接口，這個接口在javascript中是做爲Node類型實現的，而在IE8-瀏覽器中的全部DOM對象都是以COM對象的形式實現的。因此，IE8-瀏覽器並不支持Node對象的寫法瀏覽器

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

nodeName架構

　　nodeName屬性返回節點的名稱post

nodeValue測試

　　nodeValue屬性返回或設置當前節點的值，格式爲字符串spa

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

元素節點

　　元素節點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

特性節點

　　元素特性節點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>

文本節點

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

　　如今，div元素內容爲'測試'

<script>
var txt = test.firstChild;
//3 '#text' '測試'
console.log(txt.nodeType,txt.nodeName,txt.nodeValue)
console.log(Node.TEXT_NODE === 3);//true    
</script>

CDATA節點

　　CDATASection類型只針對基於XML的文檔，只出如今XML文檔中，表示的是CDATA區域，格式通常爲

<![CDATA[
]]>

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

實體引用名稱節點

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

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

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

實體名稱節點

　　上面已經詳細解釋過，就再也不贅述

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

處理指令節點

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

註釋節點

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

如今，在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>

文檔節點

　　文檔節點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>

文檔類型節點

　　文檔類型節點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>

文檔片斷節點

　　文檔片斷節點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>