element 是 node 的子类，体现泛化→特化关系；node 是 dom 所有节点的基类，定义通用属性方法；element 继承并扩展元素专属能力，如 getattribute、children 等；完整继承链为 eventtarget ← node ← element ← htmlelement ← htmldivelement。

Element 是 Node 的子类，Node 是 DOM 节点的基类，整个继承链体现的是“泛化 → 特化”的层级关系。

Node 是所有节点的顶层接口

DOM 中一切可操作的对象（元素、文本、注释、文档、属性、片段等）都属于 Node 类型。它定义了通用能力，比如：

Gradle 9.8.0

下载

• parentNode、childNodes、nextSibling 等导航属性
• appendChild()、removeChild()、cloneNode() 等操作方法
• nodeType（数值标识类型，如 1 表示 ELEMENT_NODE，3 表示 TEXT_NODE）
• nodeName 和 nodeValue（不同节点类型表现不同，比如文本节点的 nodeValue 是内容，元素节点的 nodeValue 是 null）

Element 继承自 Node 并扩展专属能力

Element 不是独立于 Node 的并列类型，而是明确继承自 Node 的子接口。这意味着：

• 所有 Element 实例天然具备 Node 的全部属性和方法（例如可以调用 parentNode 或 removeChild()）
• Element 新增了只对“标签元素”有意义的方法，比如：getAttribute()、setAttribute()、classList、innerHTML
• Element 还进一步区分了导航行为：例如 children 只返回 Element 子节点（跳过文本/注释），而 childNodes 返回所有子 Node
• Element 实例的 nodeType 恒为 1，但 Node 实例的 nodeType 可能是 1、3、8、9 等

完整的继承链是：EventTarget ← Node ← Element ← HTMLElement ← HTMLDivElement 等

浏览器中具体元素（如 <div>）不是直接构造自 Element，而是由更具体的构造函数生成： <ul> <li> <code>document.querySelector('div') 返回的是 HTMLDivElement 实例

它依次继承：HTMLDivElement → HTMLElement → Element → Node → EventTarget

所以一个 div 元素既能响应事件（来自 EventTarget），也能被遍历（来自 Node），还能操作 class（来自 Element），也能设置 style（来自 HTMLElement）

用 instanceof 判断时，el instanceof Element 和 el instanceof Node 同时为 true，但反过来不成立

实际判断与调试技巧

遇到 DOM 对象时，快速厘清类型可借助这些方式：

• 查 nodeType：值为 1 → 肯定是 Element；值为 3 → 文本节点（不是 Element）
• 查 tagName：Element 有该属性（如 'DIV'），Node 其他类型会返回 undefined
• 查 constructor.name：能看到具体构造函数名，比如 'HTMLParagraphElement'
• 用 el.children.length vs el.childNodes.length 对比：若差值明显，说明存在大量空白文本节点（换行缩进导致）