I am totally confused between Node object and Element object.
document.getElementById()
returns Element object while document.getElementsByClassName()
returns NodeList object(Collection of Elements or Nodes?)
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.
<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]
Best Answer
A
node
is the generic name for any type of object in the DOM hierarchy. Anode
could be one of the built-in DOM elements such asdocument
ordocument.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, anode
is any DOM object.An
element
is one specific type ofnode
as there are many other types of nodes (text nodes, comment nodes, document nodes, etc...).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
document
node has thehtml
node as its child. Thehtml
node has its list of child nodes (thehead
node and thebody
node). Thebody
node would have its list of child nodes (the top level elements in your HTML page) and so on.So, a
nodeList
is simply an array-like list ofnodes
.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
id
or aclass
. 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):You can see an
ELEMENT_NODE
is one particular type of node where thenodeType
property has a value of1
.So
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.Since
document.getElementsByClassName("para")
can return more than one object, the designers chose to return anodeList
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 anodeList
that only has nodes of type element in it and the designers could have made a differently named collection that was anelementList
, but they chose to use just one type of collection whether it had only elements in it or not.EDIT: HTML5 defines an
HTMLCollection
which is a list of HTML Elements (not any node, only Elements). A number of properties or methods in HTML5 now return anHTMLCollection
. While it is very similar in interface to anodeList
, a distinction is now made in that it only contains Elements, not any type of node.The distinction between a
nodeList
and anHTMLCollection
has little impact on how you use one (as far as I can tell), but the designers of HTML5 have now made that distinction.For example, the
element.children
property returns a live HTMLCollection.