Node对象和Element对象之间的区别? [英] Difference between Node object and Element object?
问题描述
document.getElementById()
返回Element对象,而 document.getElementsByClassName()
返回NodeList对象(元素或节点的集合?)
如果一个div是一个Element对象,那么div Node对象呢?
什么是节点对象?
文档对象,元素对象和文本对象也是Node对象?
根据David Flanagan的The Document对象,它的元素对象和文本对象都是Node对象。
所以一个对象可以如何继承属性/方法的元素对象以及Node对象?
如果是,我想Node类和元素类在原型继承树中相关。
< div id =test>
< p class =para> 123< / p>
< p class =para> abc< / p>
< / div>
< p id =id_para>接下来的< / 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]
A node
是DOM层次结构中任何类型对象的通用名称。 节点
可以是内置的DOM元素之一,例如文档
或文档。身体
,它可以是HTML中指定的HTML标签,例如< input>
或< p> / code>或者它可以是由系统创建的文本节点,以在另一个元素中保存一段文本。因此,简而言之,
节点
是任何DOM对象。
DOM由一个节点层次结构组成,每个节点可以有一个父节点,一个子节点列表,一个nextSibling和previousSibling。这种结构形成一个树状的层次结构。 所以, 一个元素是特定类型的节点,可以在HTML中直接指定一个HTML标记,并且可以具有如 您可以看到一个 所以 由于 编辑: HTML5定义了一个 例如, I am totally confused between Node object and Element object.
If a div is an Element Object then what about div Node object? What is a Node Object? Are document object, Element object and Text Object are also Node object? As per David Flanagan's book 'The Document object, Its Element Objects and text objects are all Node objects'. So How come an object can inherit properties/methods of Element object as well as Node object? If yes, I guess Node Class and Element Class are related in prototypal tree of inheritance.
A An The DOM consists of a hierarchy of nodes where each node can have a parent, a list of child nodes and a nextSibling and previousSibling. That structure forms a tree-like hierarchy. The So, a An element is a specific type of node, one that can be directly specified in the HTML with an HTML tag and can have properties like an You can see an So Since EDIT: HTML5 defines an The distinction between a For example, the 这篇关于Node对象和Element对象之间的区别?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! / code>是一种特定类型的
节点
,因为还有许多其他类型的节点(文本节点,注释节点,文档节点等) / p>
文档
节点将有其子节点列表(头
节点和主体
节点)。 body
节点将有其子节点列表(HTML页面中的顶级元素)等等。
nodeList
只是一个数组式的节点列表
。
id
或一个类
。可以有孩子等...还有其他类型的节点,如评论节点,文本节点等,具有不同的特点。每个节点都有一个属性 .nodeType
,它报告它是什么类型的节点。您可以在此看到各种类型的节点(从 MDN ):
ELEMENT_NODE
是一种特殊类型的节点,其中 nodeType
property的值为 1
。
document.getElementById test)
只能返回一个节点,它保证是一个元素(特定类型的节点)。因为它只返回元素而不是列表。
document.getElementsByClassName(para)
可以返回多个对象,设计人员选择返回 nodeList
,因为这是为多个节点列表创建的数据类型。由于这些只能是元素(只有元素通常具有类名称),所以它在技术上是一个 nodeList
,其中只有节点类型元素,而设计者可能会有所不同命名集合是一个 elementList
,但是他们选择只使用一种类型的集合,无论它是否只包含元素。
HTMLCollection
,它是HTML元素的列表不是任何节点,只有Elements)。 HTML5中的一些属性或方法现在返回一个 HTMLCollection
。虽然在与 nodeList
的接口非常相似,但现在区分它只包含元素,而不是任何类型的节点。
nodeList
和 HTMLCollection
之间的区别对于您如何使用一个(但是HTML5的设计师现在已经做出了这样的区别。
element.children
property返回一个实时的HTMLCollection。document.getElementById()
returns Element object while document.getElementsByClassName()
returns NodeList object(Collection of Elements or Nodes?) <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]
node
is the generic name for any type of object in the DOM hierarchy. A node
could be one of the built-in DOM elements such as document
or document.body
, it could be an HTML tag specified in the HTML such as <input>
or <p>
or it could be a text node that is created by the system to hold a block of text inside another element. So, in a nutshell, a node
is any DOM object.element
is one specific type of node
as there are many other types of nodes (text nodes, comment nodes, document nodes, etc...).document
node would have its list of child nodes (the head
node and the body
node). The body
node would have its list of child nodes (the top level elements in your HTML page) and so on.nodeList
is simply an array-like list of nodes
.id
or a class
. can have children, etc... There are other types of nodes such as comment nodes, text nodes, etc... with different characteristics. Each node has a property .nodeType
which reports what type of node it is. You can see the various types of nodes here (diagram from MDN):ELEMENT_NODE
is one particular type of node where the nodeType
property has a value of 1
.document.getElementById("test")
can only return one node and it's guaranteed to be an element (a specific type of node). Because of that it just returns the element rather than a list.document.getElementsByClassName("para")
can return more than one object, the designers chose to return a nodeList
because that's the data type they created for a list of more than one node. Since these can only be elements (only elements typically have a class name), it's technically a nodeList
that only has nodes of type element in it and the designers could have made a differently named collection that was an elementList
, but they chose to use just one type of collection whether it had only elements in it or not.
HTMLCollection
which is a list of HTML Elements (not any node, only Elements). A number of properties or methods in HTML5 now return an HTMLCollection
. While it is very similar in interface to a nodeList
, a distinction is now made in that it only contains Elements, not any type of node.nodeList
and an HTMLCollection
has little impact on how you use one (as far as I can tell), but the designers of HTML5 have now made that distinction.element.children
property returns a live HTMLCollection.