Node对象和Element对象的区别？答案

【问题标题】：Difference between Node object and Element object?Node对象和Element对象的区别？
【发布时间】：2012-04-16 06:36:25
【问题描述】：

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

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

什么是节点对象？

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

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

那么一个对象怎么能继承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]

【问题讨论】：

节点有12种，element是其中之一
这12种不都是Element Object吗？比如 1 = ELEMENT_NODE, 3 = TEXT_NODE，我认为两者也是 Element 对象。
不，他们不是。元素只是单一类型的节点。
现在还在使用吗？自从看到 Mozilla 的文档后，我问它说： var elements = document.getElementsByClassName(names);元素是已找到元素的实时 HTMLCollection。因此，显然，getElementsByClassName 不再返回 NodeList。
WHATWG：The nodes representing HTML elements in the DOM... (3.2.2)。一些吹毛求疵的人可能会从中得出 is 有点不同。尽管如此，该规范似乎以可互换的方式使用了这些术语（DOM 节点代表 HTML 元素，仅代表 HTML 元素）。

标签： javascript html dom

【解决方案1】：

解决所有 DOM 问题的最佳信息来源

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

实现 Document、DocumentFragment、DocumentType 的对象， Element、Text、ProcessingInstruction 或 Comment 接口（只需称为节点）参与一棵树。

https://www.w3.org/TR/dom/#element

元素节点简称为元素。

【讨论】：

【解决方案2】：

DOM 文档是节点的分层集合。每个节点都可以有一个父节点和/或子节点。

如果您了解节点是什么，就很容易理解 DOM 节点和元素之间的区别。

节点有类型，元素类型就是其中之一。该元素由 HTML 文档中的标记表示。

【讨论】：

简单地说！整个比喻只用几句话。干得好。

【解决方案3】：

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

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

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

【讨论】：

所以所有元素都是节点，但并非所有节点都是元素......对吗？我只是在思考在迭代某些事物时是否将事物描述为 JavaScript 函数中的节点或元素。
我知道我正在复活一个 7 年前的帖子，但我只是想说谢谢你对这个出色而彻底的解释！完全有道理。
哇，感谢您的精彩回答。非常简短，但非常彻底。并回答了我一直在思考的问题和困惑，为什么我们称这个东西为 nodeList 而不是 elementList。谢谢！
很好的答案。只是一个小的修正：“document 节点将有它的子节点列表（head 节点和 body 节点）。” - head 和 body 节点不是document 的孩子。 document 有一个孩子，即html (document.documentElement)。 document.documentElement / html 是 head 和 body 的父级。 :-)
@genbatro - 谢谢。我已经更新了答案以反映它是 document > [html] > [head, body] 等等......

【解决方案4】：

Element 继承自 Node，与 Dog 继承自 Animal 的方式相同。

Element 对象“is-a”Node 对象，与 Dog 对象“is-a”Animal 对象的方式相同。

Node是实现树形结构的，所以它的方法是针对firstChild、lastChild、childNodes等的，它更像是一个通用树形结构的类。

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

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

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。（由于__proto__，该行在 IE 中不起作用。需要使用 Chrome、Firefox 或 Safari）。

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

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

以下是 Node 和 Element 类的一些文档：
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element

【讨论】：

<span data-a="1" >123</span> 呢？这个跨度是一个拥有自己节点的元素。但是属性也有它自己的节点吗？
我要澄清的唯一一点是 Node 是一个接口而不是一个类。许多 DOM API 对象类型从中继承。它允许对这些类型进行类似的处理；例如，继承相同的一组方法，或以相同的方式进行测试。我在您引用的 Mozilla 链接中找到了这个。感谢您的宝贵回答
你解释的好处是用一个简单普通的东西来类比，命名为dog，animal。读者立即抓住它。工藤！

【解决方案5】：

节点：http://www.w3schools.com/js/js_htmldom_nodes.asp

Node 对象表示文档树中的单个节点。节点可以是元素节点、属性节点、文本节点或节点类型一章中介绍的任何其他节点类型。

元素：http://www.w3schools.com/js/js_htmldom_elements.asp

Element 对象表示 XML 文档中的一个元素。元素可能包含属性、其他元素或文本。如果元素包含文本，则文本将在文本节点中表示。

重复：

【讨论】：

【解决方案6】：

节点通常用于表示标签。分为3种：

属性说明：是节点，其内部具有属性。 exp：<p id=”123”></p>

文本节点：是在其打开和关闭之间具有连续文本内容的节点。 exp：<p>Hello</p>

元素节点：是其内部有其他标签的节点。 exp：<p><b></b></p>

每个节点可以同时是类型，不一定只有一种类型。

元素只是一个元素节点。

【讨论】：