DOM節點是什麼？ - tw511教學網

在網頁中所有物件和內容都被稱為節點，如文件、元素、文字、屬性、注釋等。節點（Node）是 DOM 最基本的單元，並派生出不同型別的節點，它們共同構成了文件的樹形結構模型。

節點型別

根據 DOM 規範，整個文件是一個文件節點，每個標籤是一個元素節點，元素包含的文字是文字節點，元素的屬性是一個屬性節點，注釋屬於注釋節點，以此類推。

DOM 支援的節點型別說明如表所示。

DOM 節點型別說明
節點型別	說明	可包含的子節點型別
Document	表示整個文件，DOM 樹的根節點	Element（最多一個）、ProcessingInstruction、Comment、DocumentType
DocumentFragment	表示文件片段，輕量級的 Document 物件，僅包含部分文件	ProcessingInstruction、Comment、Text、CDATASection、EntityReference
DocumentType	穩文件定義的實體提供介面	None
ProcessingInstruction	表示處理指令	None
EntityReference	表示實體參照元素	ProcessingInstruction、Comment、Text、CDATASection、EntityReference
Element	表示元素	Text、Comment、ProcessingInstruction、CDATASection、EntityReference
Attr	表示屬性	Text、EntityReference
Text	表示元素或屬性中的文字內容	None
CDATASection	表示文件中的 CDATA 區段，其包含的文字不會被解析器解析	None
Comment	表示注釋	None
Entity	表示實體	ProcessingInstruction、Comment、Text、CDATASection、EntityReference
Notation	表示在 DTD 中宣告的符號	None

使用 nodeType 屬性可以判斷一個節點的型別，取值說明如表所示。

nodeType 屬性返回值說明
節點型別	nodeType 返回值	常數名
Element	1	ELEMENT_NODE
Attr	2	ATTRIBUTE_NODE
Text	3	TEXT_NODE
CDATASection	4	CDATA_SECTION_NODE
EntityReference	5	ENTITY_REFERENCE_NODE
Entity	6	ENTITY_NODE
ProcessingInstruction	7	PROCESSING_INSTRUCTION_NODE
Comment	8	COMMENT_NODE
Document	9	DOCUMENT_NODE
DocumentType	10	DOCUMENT_TYPE_NODE
DocumentFragment	11	DOCUMENT_FRAGMENT_NODE
Notation	12	NOTATION_NODE

範例

下面範例演示如何借助節點 nodeType 屬性檢索當前文件中包含元素的個數。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>DOM</h1>
<p>DOM 是<cite>Document Object Model</cite>首字母簡寫，中文翻譯為<b>文件物件模型</b>，是<i>W3C</i>組織推薦的處理可延伸標識語言的標準程式設計介面。</p>
<ul>
    <li>D 表示文件，HTML 文件結構。</li>
    <li>O 表示物件，文件結構的 JavaScript 指令碼化對映。</li>
    <li>M 表示模型，指令碼與結構互動的方法和行為。</li>
</ul>
<script>
function count (n) {  //定義文件元素統計函數
    var num = 0;  //初始化變數
    if (n.nodeType == 1)  //檢查是否為元素節點
    num ++;  //如果是，則計數器加1
    var son = n.childNodes;  //獲取所有子節點
    for (var i = 0; i < son.length; i ++) {  //迴圈統一每個子元素
        num += count (son[i]);  //遞回操作
    }
    return num;  //返回統計值
}
console.log("當前文件包含" + count (document) + "個元素");  //計算元素的總個數
</script>
</body>
</html>

演示效果如下：