Node对象和Element对象的区别?

IT技术 javascript html dom
2021-01-23 03:54:08

我完全混淆了 Node 对象和 Element 对象。 document.getElementById()返回 Element 对象,同时document.getElementsByClassName() 返回 NodeList 对象(元素或节点的集合?)

如果一个 div 是一个元素对象,那么 div 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]
6个回答

Anode是 DOM 层次结构中任何类型对象的通用名称。Anode可以是内置 DOM 元素之一,例如documentdocument.body,也可以是 HTML 中指定的 HTML 标记,例如<input><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因为这是他们为多个节点的列表创建的数据类型。由于这些只能是元素(通常只有元素具有类名),因此从技术上讲nodeList,它只包含元素类型的节点,设计者可以创建一个不同名称的集合,即 an elementList,但他们选择仅使用一种类型集合中是否只有元素。


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

anodeList和 an之间的区别HTMLCollection对您如何使用它们几乎没有影响(据我所知),但是 HTML5 的设计者现在已经做出了这种区别。

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

我知道我正在复活一个 7 岁的帖子,但我只想说谢谢你这个出色而彻底的解释!完全有道理。
2021-03-17 03:54:08
@genbatro - 谢谢。我已经更新了答案以反映它变成了文档 > [html] > [head, body] 等等......
2021-03-21 03:54:08
哇,谢谢你这么精彩的回答。非常简短,但非常彻底。并回答了我一直在思考的问题和困惑,为什么我们称这个东西为 nodeList 而不是 elementList。谢谢!
2021-03-22 03:54:08
所以所有元素都是节点,但并非所有节点都是元素......对吗?我只是在考虑在迭代某些事物时是将事物描述为 JavaScript 函数中的节点还是元素。
2021-03-24 03:54:08
很好的答案。只是一个小小的更正:“document节点将拥有其子节点列表(head节点和body节点)。 ”-headbody节点不是 的子节点documentdocument有一个孩子,是htmldocument.documentElement)。document.documentElement/htmlheadand的父级body:-)
2021-04-08 03:54:08

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

一个Element对象“是一个”Node对象,就像一个Dog对象“是一个”Animal对象一样。

Node是实现一个树状结构,所以它的方法是firstChildlastChildchildNodes等,这更是一个类的一个通用的树结构。

然后,有些Node对象也是Element对象。 Element继承自Node. Element对象实际上表示 HTML 文件中由诸如 之类的标记指定的对象<div id="content"></div>Element类中定义的属性和诸如方法attributesidinnerHTMLclientWidthblur(),和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. (由于 ,该行在 IE 中不起作用__proto__。需要使用 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

你的解释有什么好处,就是用一个简单的普通东西来比喻,把它命名为doganimal读者马上抓住它。工藤!
2021-03-26 03:54:08
我想澄清的唯一一点是 Node 是一个接口而不是一个类。从中继承了许多 DOM API 对象类型。它允许对这些类型进行类似的处理;例如,继承相同的一组方法,或以相同的方式进行测试。我在你参考的 mozilla 链接中找到了这个。感谢您的宝贵回答
2021-04-03 03:54:08
怎么样<span data-a="1" >123</span>这个跨度是一个元素,它有自己的节点。但是属性也有它自己的节点吗?
2021-04-11 03:54:08

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

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

实现 Document、DocumentFragment、DocumentType、Element、Text、ProcessingInstruction 或 Comment 接口的对象(简称为节点)参与树。

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

元素节点简称为元素。

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

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

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

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

复制 :

节点一般用于表示标签。分为3种:

属性注意:是其内部具有属性的节点。经验:<p id=”123”></p>

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

元素节点:是其内部具有其他标签的节点。经验:<p><b></b></p>

每个节点可以同时是类型,不一定是单一类型。

元素只是一个元素节点。