Node 和 Element 的关系

问题

Node 和 Element 是什么关系？它们有什么区别？

解答

继承关系

Element 继承于 Node，具有 Node 的方法，同时扩展了自己的特有方法。

Node 是一个基类，DOM 中的 Element、Text 和 Comment 都继承于它。换句话说，Element、Text 和 Comment 是三种特殊的 Node，它们分别对应：

• ELEMENT_NODE - 元素节点
• TEXT_NODE - 文本节点
• COMMENT_NODE - 注释节点

我们平时使用的 HTML 元素，即 Element，是类型为 ELEMENT_NODE 的 Node。

方法区别

Element 的一些方法明确区分了 Node 和 Element：

// Node 方法 - 返回所有类型的子节点（包括文本节点、注释节点等）
element.childNodes // NodeList

// Element 方法 - 只返回元素节点
element.children // HTMLCollection

// Node 方法 - 返回父节点（可能是任何类型的 Node）
element.parentNode

// Element 方法 - 返回父元素节点
element.parentElement

Node 的方法返回值可能是任何类型的 Node（文本节点、注释节点等），而 Element 的方法返回值一定是 Element。

关键点

• Element 继承于 Node，是一种特殊的 Node
• Node 包含 Element、Text、Comment 三种主要类型
• childNodes 返回所有节点，children 只返回元素节点
• Node 方法可能返回任何类型节点，Element 方法只返回元素节点