Node对象和Element对象的区别？

小编典典

Node对象和Element对象的区别？

all

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

阅读 118

2022-03-23

共1个答案

小编典典

Anode是 DOM 层次结构中任何类型对象的通用名称。Anode可以是内置 DOM 元素之一，例如documentor
document.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因为这是他们为包含多个节点的列表创建的数据类型。由于这些只能是元素（通常只有元素具有类名），因此从技术上讲，它是 a
nodeList，其中只有元素类型的节点，设计者可以制作一个不同命名的集合，它是 a
elementList，但他们选择只使用一种类型集合是否只有元素。

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

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

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

2022-03-23