Node对象和Element对象之间的区别？

Question

我对Node对象和Element对象完全感到困惑。 document.getElementById()返回Element对象，同时document.getElementsByClassName() 返回NodeList对象（元素或节点的集合？）如果div是元素对象，那么div节点对象呢？什么是节点对象？文档对象，元素对象和文本对象也是节点对象吗？根据David Flanagan的书“文档对象，其元素对象和文本对象都是Node对象”。那么，一个对象如何能够继承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]

Answer 1

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

An element是一种特定类型，node因为还有许多其他类型的节点（文本节点，注释节点，文档节点等）。

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

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

元素是一种特定类型的节点，可以使用HTML标记直接在HTML中指定该节点，并且可以具有诸如id或的属性class。可以有子级，等等。还有其他类型的节点，例如注释节点，文本节点等，具有不同的特征。每个节点都有一个.nodeType报告其节点类型的属性。您可以在此处看到各种类型的节点（MDN的图表）：

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

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

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

---

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

a nodeList和an 之间的区别HTMLCollection对使用方式的影响很小（据我所知），但是HTML5的设计者现在已经做出了区分。

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