【EASYDOM系列教程】之Node介紹

weixin_33840661發表於2017-07-24

DOM 的標準規範中提供了 Node 物件,該物件主要提供了用於解析 DOM 節點樹結構的屬性和方法。

Node 物件的作用

DOM 樹結構主要是依靠節點進行解析,稱為 DOM 節點樹結構。Node 物件是解析 DOM 節點樹結構的主要入口。

Node 物件提供的屬性和方法,可以實現遍歷節點、插入節點和替換節點等操作。而這些操作也正是我們學習 Node 物件最為主要的目的。

Node 物件的繼承鏈關係

Node 物件是繼承於 EventTarget 物件的,EventTarget 是一個用於接收事件的物件。我們可以通過如下程式碼測試兩者之間的繼承關係:

console.log(Node.prototype instanceof EventTarget);

DOM 的標準規範中的 Document 物件和 Element 物件(後面的章節要學習的內容)都是繼承於 Node 物件的。我們可以通過如下程式碼測試它們之間的繼承關係:

console.log(Document.prototype instanceof Node);
console.log(Element.prototype instanceof Node);

測試 Node 物件

由於 Node 物件是 DOM 底層封裝的物件,所以我們並不能通過直接列印 Node 物件來檢視其屬性或方法。

而是要通過列印 Node 物件的 prototype 原型屬性來檢視其屬性或方法。

console.log(Node.prototype)

執行 HTML 頁面後,開啟 開發者工具,我們可以看到以下內容:

Node 物件


本教程免費開源,任何人都可以免費學習、分享,甚至可以進行修改。但需要註明作者及來源,並且不能用於商業。

本教程採用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。

圖片描述

相關文章