• 4
name Punditsdkoslkdosdkoskdo

Difference between Node object & Element object?

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>
 <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 used to represent tags in general. Divided to 3 types:

Attribute Note: is node which inside its has attributes. Exp: <p id=”123”></p>

Text Node: is node which between the opening and closing its have contian text content. Exp: <p>Hello</p>

Element Node : is node which inside its has other tags. Exp: <p><b></b></p>

Each node may be types simultaneously, not necessarily only of a single type.

Element is simply a element node.

  • 0
Reply Report

Node is for implementing a tree structure, so its methods are for firstChildlastChildchildNodes, etc. It is more of a class for a generic tree structure.

And then, some Node objects are also Element objects. Element inherits from NodeElementobjects actually represents the objects as specified in the HTML file by the tags such as <div id="content"></div>. The Element class define properties and methods such as attributesidinnerHTMLclientWidthblur(), and focus().

Some Node objects are text nodes and they are not Element objects. Each Node object has a nodeType property that indicates what type of node it is, for HTML documents:

1: Element node
3: Text node
8: Comment node
9: the top level node, which is document

We can see some examples in the console:

> document instanceof Node

> document instanceof Element

> document.firstChild

> document.firstChild instanceof Node

> document.firstChild instanceof Element

> document.firstChild.firstChild.nextElementSibling

> document.firstChild.firstChild.nextElementSibling === document.body

> document.firstChild.firstChild.nextSibling

> document.firstChild.firstChild.nextSibling instanceof Node

> document.firstChild.firstChild.nextSibling instanceof Element

> Element.prototype.__proto__ === Node.prototype

The last line above shows that Element inherits from Node. (that line won't work in IE due to __proto__. Will need to use Chrome, Firefox, or Safari).

By the way, the document object is the top of the node tree, and document is a Document object, and Document inherits from Node as well:

> Document.prototype.__proto__ === Node.prototype
  • 0
Reply Report