为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

青春有我 2019-10-23 13:15:10

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


查看完整描述

3 回答

?
哆啦的时光机

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的图表):

//img1.mukewang.com/5dafe1fd000152ff02860468.jpg

您会看到一种ELEMENT_NODE是一种特定类型的节点,其nodeType属性值为1

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

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


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

nodeList和an 之间的区别HTMLCollection对使用方式的影响很小(据我所知),但是HTML5的设计者现在已经做出了区分。

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


查看完整回答
反对 回复 2019-10-23
?
达令说

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


查看完整回答
反对 回复 2019-10-23
?
MM们

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


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


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


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


查看完整回答
反对 回复 2019-10-23

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信