Node对象和Element对象的区别？

如何解决Node对象和Element对象的区别？

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

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

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

所以，anodeList只是一个类似数组的列表nodes。

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

在此处输入图像描述

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

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

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

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

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

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

解决方法

我完全混淆了 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]