首頁  >  文章  >  web前端  >  DOM中node和element的差別是什麼

DOM中node和element的差別是什麼

青灯夜游
青灯夜游原創
2021-12-09 17:25:452933瀏覽

node和element的區別:1、Node是節點,其中包含不同類型的節點,而Element只是Node節點的一種;2、Element繼承於Node,具有Node的方法,同時又拓展了很多自己的特有方法。

DOM中node和element的差別是什麼

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

我們常常使用document.getElementById去取得DOM中的元素,也會使用childNodes來取得子節點。那麼Element和Node的差別是什麼?

Node提供的節點與Element提供的節點

在學jQuery的時候,大家是不是也是總混淆Node與Eleme

DOM中node和element的差別是什麼

##左邊為Node/右邊為Element
Node與Element的關係

Node與Element的關係,從繼承方面思考可能清晰很多。

Element 繼承於 Node,有Node的方法,同時又拓展了許多自己的特有方法。

在Element的一些方法裡,是明確區分了Node和Element的

比如說:childNodes與 children, parentNode與parentElement等方法。

Node的一些方法,傳回值為Node,比如說文字節,註解節點之類的,而Element的一些方法,回傳值一定是Element。

區分清楚這點了,也能避免很多低階問題。

簡單的說就是Node是一個基類,DOM中的Element,Text和Comment都繼承於它。

換句話說,Element,Text和Comment是三種特殊的Node,它們分別叫做ELEMENT_NODE,
TEXT_NODE和COMMENT_NODE。

所以我們平常使用的html上的元素,也就是Element,就是類型為ELEMENT_NODE的Node。

總結:

  • Node是節點,包含不同類型的節點,Element只是Node節點的一種。

  • Element繼承與Node,可以呼叫Node的方法。

  • 為所有DOM元素加入方法,只需要污染Node或Element的原型鏈就行。

Node在這裡指DOM節點,其中包含了我們最常見的元素節點,像是 div/p/span 之類的。除此之外還包括了 Document/Comment 之類的節點。

一個節點的類型,可以透過其nodeType類型查看到,具體的類型則可以看下圖:

DOM中node和element的差別是什麼##【相關推薦:
javascript學習教學

以上是DOM中node和element的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn