EASYDOM系列教程 之 Element 物件

2021-09-16 19:30:41 字數 1118 閱讀 2780

dom 的標準規範中提供了 element 物件,該物件提供了 html 頁面中所有元素所具有的屬性和方法。

我們都知道 dom 標準規範中提供了 node 物件,主要是依靠 dom 節點樹結構訪問和更新 html 頁面的內容。而 dom 標準規範中提供了 element 物件,主要是依靠 dom 元素樹結構訪問和更新 html 頁面的內容。

值得注意的是:所有的 html 頁面的元素都是 htmlelement 物件,而這個物件又是繼承於 element 物件的。

html 頁面中的標籤,既是元素節點,又是元素。

如果我們將 html 頁面中的標籤當做元素節點的話,就是利用 dom 節點樹結構進行解析和操作。但是,有些情況利用 node 物件實現比較複雜,例如屬性節點的操作,而使用 element 物件提供的屬性和方法相對會簡單一些。

我們可以簡單地理解 element 物件是 node 物件的補充。當然,這種理解並不準確!

通過 element 物件,我們可以實現遍歷元素、屬性操作等操作。而這些操作也正是我們要學習 element 物件的屬性和方法。

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

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

console.log(element.prototype)
執行 html 頁面後,開啟開發者工具,我們可以看到以下內容:

上面執行後的結果只是部分內容,並不是全部內容。請自行測試!

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

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

EASYDOM系列教程 之屬性操作

element 物件提供了一些方法實現 html 元素的屬性操作,這種操作要比 node 物件提供的方法操作屬性節點要更便捷。element 物件提供了 getattribute 方法用於獲取指定元素的屬性值,其語法結構如下 var attribute element.getattribute at...

EASYDOM系列教程 之插入節點

node 物件提供了一些用於向 html 頁面插入節點的方法,通過這些方法我們可以實現向 html 頁面新增元素,或者移動 html 頁面中的元素。var parent document.getelementbyid parent var button document.createelement ...

EASYDOM系列教程 之Node介紹

dom 的標準規範中提供了 node 物件,該物件主要提供了用於解析 dom 節點樹結構的屬性和方法。dom 樹結構主要是依靠節點進行解析,稱為 dom 節點樹結構。node 物件是解析 dom 節點樹結構的主要入口。node 物件提供的屬性和方法,可以實現遍歷節點 插入節點和替換節點等操作。而這些...