Node对象和Element对象的区别？

Question

我完全混淆了 Node 对象和 Element 对象。 document.getElementById() 返回 Element 对象而 document.getElementsByClassName() 返回 NodeList 对象（元素或节点的集合？）

如果一个 div 是一个元素对象，那么 div 节点对象呢？

什么是节点对象？

文档对象、元素对象和文本对象也是节点对象吗？

根据大卫弗拉纳根的书“文档对象，其元素对象和文本对象都是节点对象”。

那么一个对象怎么能继承 Element 对象和 Node 对象的属性/方法呢？

如果是，我猜节点类和元素类在继承的原型树中是相关的。

  <div id="test">
           <p class="para"> 123 </p>
           <p class="para"> abc </p>
 </div>
 <p id="id_para"> next </p>

document.documentElement.toString();    // [object HTMLHtmlElement]

var div = document.getElementById("test");
div.toString();                         // [object HTMLDivElement]

var p1 = document.getElementById("id_para");
p1.toString();                          // [object HTMLParagraphElement]

var p2 = document.getElementsByClassName("para");
p2.toString();                          //[object HTMLCollection]

原文由 P K 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

node 是 DOM 层次结构中任何类型对象的通用名称。 node 可以是内置 DOM 元素之一，例如 document 或 document.body ，它可以是 HTML 中指定的 HTML 标记，例如 <input> 或 <p> 或者它可能是由系统创建的文本节点，用于在另一个元素中保存文本块。所以，简而言之，一个 node 是任何 DOM 对象。

element 是一种特定类型的 node 因为还有许多其他类型的节点（文本节点、评论节点、文档节点等）。

DOM 由节点层次结构组成，其中每个节点可以有一个父节点、一个子节点列表以及一个 nextSibling 和 previousSibling。该结构形成树状层次结构。 document 节点有 html 节点作为其子节点。 html 节点有它的子节点列表（ head 节点和 body 节点）。 body 节点将具有其子节点列表（HTML 页面中的顶级元素）等等。

因此， nodeList 只是一个类似数组的列表 nodes 。

元素是一种特定类型的节点，可以直接在 HTML 中使用 HTML 标签指定，并且可以具有 id 或 class 等属性。可以有子节点等等……还有其他类型的节点比如评论节点、文本节点等等……各有特点。每个节点都有一个属性 .nodeType 报告它是什么类型的节点。您可以在此处查看各种类型的节点（来自 MDN 的图表）：

您可以看到 ELEMENT_NODE 是一种特定类型的节点，其中 nodeType 属性的值为 1 。

所以 document.getElementById("test") 只能返回一个节点，并且保证是一个元素（特定类型的节点）。因此，它只返回元素而不是列表。

由于 document.getElementsByClassName("para") 可以返回多个对象，因此设计人员选择返回 nodeList 因为这是他们为多个节点的列表创建的数据类型。由于这些只能是元素（只有元素通常有一个类名），它在技术上是一个 nodeList 它只有元素类型的节点，设计者可以制作一个不同命名的集合，它是一个 elementList ，但他们选择只使用一种类型的集合，无论它是否只有元素。

---

编辑： HTML5 定义了一个 HTMLCollection 这是一个 HTML 元素列表（不是任何节点，只有元素）。 HTML5 中的许多属性或方法现在返回 HTMLCollection 。虽然它在接口上与 nodeList 非常相似，但现在的区别在于它只包含元素，而不包含任何类型的节点。

nodeList 和 HTMLCollection --- 之间的区别对你如何使用它们几乎没有影响（据我所知），但 HTML5 的设计者现在已经做出了这种区分。

例如， element.children 属性返回一个实时的 HTMLCollection。

原文由 jfriend00 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

解决所有 DOM 问题的最佳信息来源

https://www.w3.org/TR/dom/#nodes

实现 Document、DocumentFragment、DocumentType、Element、Text、ProcessingInstruction 或 Comment 接口的对象（简称为节点）参与到树中。

https://www.w3.org/TR/dom/#element

元素节点简称为元素。

原文由 Matt Esch 发布，翻译遵循 CC BY-SA 4.0 许可协议