javascript - Node对象和Element对象的区别？

Question

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

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

什么是节点对象？

document对象、Element对象、Text对象也是Node对象吗？

根据 David Flanagan 的书“文档对象，其元素对象和文本对象都是节点对象”。

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

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

 <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]

Answer 1

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

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

DOM 由节点的层次结构组成，其中每个节点可以有一个父节点、一个子节点列表以及一个 nextSibling 和 previousSibling。该结构形成树状层次结构。 document节点有 html节点作为它的 child 。 html节点有它的子节点列表(head 节点和 body 节点)。 body node 将有它的子节点列表(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。