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

JavaScript HTML

Harry乐

2020-03-24

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

第3518篇《Node对象和Element对象之间的区别？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答

梅 2020.03.24

Node是实现一个树状结构，所以它的方法是firstChild，lastChild，childNodes等，这更是一个类的一个通用的树结构。

然后，一些Node对象也是Element对象。 Element继承自Node。 Elementobject实际上代表HTML文件中由标记指定的对象<div id="content"></div>。的Element类中定义的属性和诸如方法attributes，id，innerHTML，clientWidth，blur()，和focus()。

一些Node对象是文本节点，而不是Element对象。每个Node对象都有一个nodeType属性，该属性指示HTML文档的节点类型：

1: Element node
3: Text node
8: Comment node
9: the top level node, which is document

我们可以在控制台中看到一些示例：

> document instanceof Node
  true

> document instanceof Element
  false

> document.firstChild
  <html>...</html>

> document.firstChild instanceof Node
  true

> document.firstChild instanceof Element
  true

> document.firstChild.firstChild.nextElementSibling
  <body>...</body>

> document.firstChild.firstChild.nextElementSibling === document.body
  true

> document.firstChild.firstChild.nextSibling
  #text

> document.firstChild.firstChild.nextSibling instanceof Node
  true

> document.firstChild.firstChild.nextSibling instanceof Element
  false

> Element.prototype.__proto__ === Node.prototype
  true

上方的最后一行显示Element继承自Node。（由于，该行将无法在IE __proto__中使用。需要使用Chrome，Firefox或Safari）。

顺便说一下，该document对象是节点树的顶部，并且document是一个Document对象，并且也Document继承自该对象Node：

> Document.prototype.__proto__ === Node.prototype
  true

以下是有关Node和Element类的一些文档：
https : //developer.mozilla.org/zh-CN/docs/DOM/Node
https://developer.mozilla.org/zh-CN/docs/DOM/Element

GO 2020.03.24

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。

乐米亚 2020.03.24

Node is used to represent tags in general. Divided to 3 types:

Attribute Note: is node which inside its has attributes. Exp: <p id=”123”></p>

Text Node: is node which between the opening and closing its have contian text content. Exp: <p>Hello</p>

Element Node : is node which inside its has other tags. Exp: <p><b></b></p>

Each node may be types simultaneously, not necessarily only of a single type.

Element is simply a element node.

樱神无 2020.03.24

应对所有DOM困境的最佳信息来源

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