国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

淺析Node與Element

U2FsdGVkX1x / 2401人閱讀

摘要：坑當然，也有可能會遇到踩坑的現象。與的關系至于與的關系，從繼承方面講可能為清晰很多。總結是節點，其中包含不同類型的節點，只是節點的一種。繼承與，可以調用的方法。

起因

起因有二：

在看winter老師的分享：《一個前端的自我修養》時，有注意到這么一幅圖，里面有寫childNode和children屬性。

昨天有學弟問起我，能否自己定義一個所有元素節點通用的方法，就像數組可以用 Array.prototype.xxx 來添加一個所有數組的方法。
于是發現自己對于Node和Element的概念其實還不太清晰，所以上MDN看了看，寫篇博客沉淀一下。

Node

Node類繼承于EventTarget，下面是MDN給的解釋。

Node在這兒指DOM節點，其中包括了我們最常見的元素節點，比如 div/p/span 之類的。除此之外還包括了 Document/Comment 之類的節點。
一個節點的類型，可以通過其nodeType類型查看到，具體的類型則可以看下圖：

高頻的屬性與方法

Node定義了一些經典的節點操作方法，我這兒畫了個簡單的圖，并沒有列出全部屬性。

寫前端的同學，日常應該都會頻繁的用到這些方法。

坑

當然，也有可能會遇到踩坑的現象。比如說在使用nextSibling完成遍歷操作的時候，nextSibling有可能會返回的是文本節點而非元素節點，那么在調用一些元素節點的屬性或方法時（如 innerHTML），就會出錯。這也是為什么一定要區分清楚兩種節點的原因。

Element

至于說Element, 大家肯定就熟悉多了。學前端入門的時候，就用過的 document.getElementBy* 的 Api，取出來的就是Element。
Element在MDN的解釋如下：

這個其實大家日常的使用也非常多，就不多做解釋了。

Node與Element的關系

至于Node與Element的關系，從繼承方面講可能為清晰很多。

Element 繼承于 Node，具有Node的方法，同時又拓展了很多自己的特有方法。
所以在Element的一些方法里，是明確區分了Node和Element的，比如說：childNodes, children, parentNode, parentElement等方法。

而Node的一些方法，返回值為Node，比如說文本節點，注釋節點之類的，而Element的一些方法，返回值則一定是Element。
區分清楚這點了，也能避免很多低級問題。

如何給所有DOM元素添加方法

由于JavaScript原型的特點，我們只要給原型添加方法，就可以在所有繼承的子元素中調用此方法。

當然，在這兒你選擇污染Element的原型也好，Node的原型也罷，都是可行的。
具體看你要調用這個方法的元素，是純元素節點還是會有別的一些節點。
按需取用就行。

DEMO:

HTMLElement.prototype.sayHi = () => alert("hi")

const p = document.querySelector("p")
p.sayHi()
總結：

Node是節點，其中包含不同類型的節點，Element只是Node節點的一種。

Element繼承與Node，可以調用Node的方法。

給所有DOM元素添加方法，只需要污染Node或者Element的原型鏈就行。

參考資料：

MDN-Node

MDN-Element

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50912.html

相關文章

  • LinkedList源碼淺析

    摘要：重要方法在鏈尾添加元素除了這個方法以外，還提供了等一些方法，都是為實現和方法服務的，因為雙向鏈表的原因，這些實現都很簡單。 類聲明 LinkedList類聲明如下： public class LinkedList extends AbstractSequentialList implements List, Deque, Cloneable, java.io.Seria...

    DC_er 評論0 收藏0

  • 淺析SAX,DOM,JAXP,JDOM與DOM4J之間的關系

    摘要：通過解析器獲取文檔對象后，開發人員可以很方便的對其進行操作，如獲取更元素，獲取一個子元素，增加子元素，移除子元素。它并沒有為解析提供任何新功能，但是它為在獲取與解析器提供了更加直接的途徑。自身不包含解析器，默認使用隨包一起發行的。 showImg(/img/bVDhQE?w=888&h=220); 文章最初發表于我的個人博客非典型性程序猿 眾所周知，SAX與DOM是JAVA中兩大核心X...

    妤鋒シ 評論0 收藏0

  • 淺析SAX,DOM,JAXP,JDOM與DOM4J之間的關系

    摘要：通過解析器獲取文檔對象后，開發人員可以很方便的對其進行操作，如獲取更元素，獲取一個子元素，增加子元素，移除子元素。它并沒有為解析提供任何新功能，但是它為在獲取與解析器提供了更加直接的途徑。自身不包含解析器，默認使用隨包一起發行的。 showImg(https://segmentfault.com/img/bVDhQE?w=888&h=220); 文章最初發表于我的個人博客非典型性程序猿...

    JasinYip 評論0 收藏0

  • 淺析vue的雙向數據綁定

    摘要：原理的雙向數據綁定的原理相信大家都十分了解主要是通過的對象的屬性重寫的和函數來實現的所以接下來不使用進行實際的代碼開發過程中如果函數使用父級的情況還是使用顯示緩存中間變量和閉包來處理原因是箭頭函數沒有獨立的執行上下文所以箭頭函數內部出現對象 1.原理 vue的雙向數據綁定的原理相信大家都十分了解；主要是通過ES5的Object對象的defineProperty屬性；重寫data的set...

    sshe 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<