节点对象和元素对象之间的区别？

javascript dom html

2022-08-29 23:24:22

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

如果 div 是元素对象，那么 div Node 对象呢？

什么是节点对象？

文档对象、元素对象和文本对象也是节点对象吗？

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

那么为什么一个对象可以继承元素对象和Node对象的属性/方法呢？

如果是，我想Node Class和Element Class在原型继承树中是相关的。

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

答案 1

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

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

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

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

元素是一种特定类型的节点，可以在 HTML 中使用 HTML 标记直接指定，并且可以具有类似 an 或 .可以生孩子，等等...还有其他类型的节点，例如注释节点，文本节点等...具有不同的特性。每个节点都有一个属性，该属性报告它是什么类型的节点。你可以在这里看到各种类型的节点（来自MDN的图表）：idclass.nodeType

enter image description here

您可以看到是一种特定类型的节点，其中属性的值为。ELEMENT_NODEnodeType1

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

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

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

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

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

答案 2

Element继承自，其方式与从继承的方式相同。NodeDogAnimal

对象“is-a”对象，就像对象“is-a”对象一样。ElementNodeDogAnimal

Node用于实现树结构，因此其方法用于、、等。它更像是泛型树结构的类。firstChildlastChildchildNodes

然后，一些对象也是对象。继承自。对象实际上表示 HTML 文件中由标记（如）指定的对象。该类定义属性和方法，例如、、、、和。NodeElementElementNodeElement<div id="content"></div>ElementattributesidinnerHTMLclientWidthblur()focus()

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

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

上面的最后一行显示继承自。（由于 .将需要使用Chrome，Firefox或Safari）。ElementNode__proto__

顺便说一句，该对象是节点树的顶部，并且是一个对象，并且还继承自：documentdocumentDocumentDocumentNode

> 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