我完全混淆了Node对象和Element对象。document.getElementById()
返回Element对象,而document.getElementsByClassName()
返回NodeList对象(元素或节点的集合?)
如果div是一个Element对象,那么div Node对象呢?
什么是Node对象?
文档对象、元素对象、文本对象也是Node对象吗?
根据David Flanagan的书“The Document object,其Element对象和text对象都是Node对象”。
那么为什么一个对象可以继承Element对象和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]
发布于 2013-04-15 20:02:32
Element
继承自Node
,与Dog
继承Animal
的方式相同。
Element
对象是- Node
对象,就像Dog
对象是- Animal
对象一样。
Node
用于实现树结构,因此它的方法适用于firstChild
、lastChild
、childNodes
等。它更像是泛型树结构的类。
然后,一些Node
对象也是Element
对象。Element
继承自Node
。HTML实际上表示由<div id="content"></div>
等标记在Element
文件中指定的对象。Element
类定义属性和方法,如attributes
、id
、innerHTML
、clientWidth
、blur()
和focus()
。
某些Node
对象是文本节点,而不是Element
对象。每个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类的一些文档:
发布于 2016-03-07 18:51:16
Node一般用来表示标签。分为三种类型:
属性说明:是一个节点,它的内部有属性。Exp:<p id=”123”></p>
文本节点:在其开始和结束之间有连续文本内容的节点。Exp:<p>Hello</p>
Element Node :是在其内部有其他标记的节点。Exp:<p><b></b></p>
每个节点可以同时是类型,而不一定只是一种类型。
元素只是一个元素节点。
发布于 2021-07-24 22:01:15
DOM文档是节点的分层集合。每个节点可以具有父节点和/或子节点。
如果理解了什么是节点,就很容易理解DOM节点和元素之间的区别。
节点有类型,元素类型是其中之一。该元素由HTML文档中的标记表示。
https://stackoverflow.com/questions/9979172
复制相似问题