1. 程式人生 > 實用技巧 >節點物件和元素物件的區別

節點物件和元素物件的區別

在看《 JavaScript 高階程式第3版》DOM 一章的時候,對於節點一詞很疑惑,在裡面判斷節點型別的例子中:

if (someNode.nodeType == Node.ELEMENT_NODE) {
    alert("Node is an element.")
}

也就是說,如果兩者相等,則意味著 someNode 這個節點是一個元素,那元素節點和元素是相同的概念嗎?如果是的話,節點與元素的區別在哪?


簡單來說,節點是 DOM 層次結構中任何型別物件的通用名稱,有各種型別的節點比如元素節點,文字節點,註釋節點等等(如圖所示,來自MDN)。
元素節點是一種特定型別的節點,可以當作 HTML 中的元素,通過 nodeType 屬性可以查明節點的型別,通過 childNodes,firstChild 或 lastChild 屬性來訪問子節點

<p id="para">Hello World!</p>
<script>
    var p = document.getElementById("para");    // 取得<p>元素的引用,可看成元素節點
    var text = p.firstChild.nodeValue;    // 訪問元素節點的子節點文字節點,取得包含的文字
    console.log(p);    // <p id="para">Hello World!</p>
    console.log(text);    // "Hello world!"
</script>

參考