“HTMLElement”和“Element”的区别是什么？

Question

HTMLElement 和 Element 有什么区别？

document.createElement（“div”）instanceof Element 返回 true

document.createElement（“div”）instanceof HTMLElement 返回 true

HTMLElement === Element 返回 false

- Li Juan

---

=== 检查值和类型是否相等... 在你的最后一行，类型不相等，即使一个类型扩展了另一个类型... 而 instanceof 检查对象是否为指定类型，如果第一个类型继承了另一个类型，则在两种情况下都将返回 true。 - Cipi

Answer 1

HTMLElement是一个Element，根据DOM Level 2 Core规范中关于HTML扩展的定义：

interface HTMLElement : Element {
           attribute DOMString       id;
           attribute DOMString       title;
           attribute DOMString       lang;
           attribute DOMString       dir;
           attribute DOMString       className;
};

Element（按规范）是指在DOM Core Level 2 规范中定义的 Element 接口（还有另一个DOM Core 规范 （工作草案）也存在）。

更新：有很多规范，对我来说并不完全清楚哪些浏览器使用哪个规范。

也许其他人有更深入的了解...

但无论如何，Element 是一个比 HTMLElement 更通用的接口，后者继承自前者。

更新2： 查看继承结构的好方法是执行任何元素的 console.dir(elementReference) （适用于 Chrome/Safari，在 Firefox 中需要 Firebug）。

- Felix Kling

---

现在，当使用console.dir(element)或console.log(element)时，控制台会显示一个交互式的视图元素，隐藏了对象的类型和层次结构。你可以使用Object.getPrototypeOf(element)来显示例如"HTMLDivElement { ... }"的内容。再调用一次则显示 "HTMLElement { ... }"。再调用一次则显示 "Element { ... }"：这里我们可以看到继承层次结构 :-) - Sebien

Answer 2

HTMLElement 明确指的是 HTML 元素，而 Element 可能指的是 XML 元素。不过，HTMLElement 在技术上是 Element 的一个子集。

- jerluc

---

在网页 JavaScript 中，您能否想到一种情况，其中会遇到一个有用的“Element”，但它不是一个“HTMLElement”？ - Bob Stein

@Bob Stein: 是的 - document.getElementsByTagName("svg")[0] 和可能的 document.getElementsByTagName("iframe")[0] - svg 是一个svg元素 - 它不一定有 element.innerHTML，例如。 - Stefan Steiger

Answer 3

HTMLElement 继承自 Element，Element 又继承自 Node。

这意味着你的 HTMLElement 实例同时是这三个类的实例。它作为 HTMLElement 的实例，拥有一个接口，其中包含只有 HTMLElement 需要的方法，比如 attachEvent。

- Thomas

---

实际上，“Element”继承自“Node”。 - Felix Kling

@Felix King，你说得对。我有点粗心大意，直接跳到了Object。我已经将我的答案从Object改为了Node。 - Thomas