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]
This question is related to
javascript
html
dom
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.
Element inherits from Node, in the same way that Dog inherits from Animal.
An Element object "is-a" Node object, in the same way that a Dog object "is-a" Animal object.
Node is for implementing a tree structure, so its methods are for firstChild, lastChild, childNodes, etc. It is more of a class for a generic tree structure.
And then, some Node objects are also Element objects. Element inherits from Node. Element objects 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 attributes, id, innerHTML, clientWidth, blur(), 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
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
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
true
Here are some docs for the Node and Element classes:
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element
Node : http://www.w3schools.com/js/js_htmldom_nodes.asp
The Node object represents a single node in the document tree. A node can be an element node, an attribute node, a text node, or any other of the node types explained in the Node Types chapter.
Element : http://www.w3schools.com/js/js_htmldom_elements.asp
The Element object represents an element in an XML document. Elements may contain attributes, other elements, or text. If an element contains text, the text is represented in a text-node.
duplicate :
Best source of information for all of your DOM woes
http://www.w3.org/TR/dom/#nodes
"Objects implementing the Document, DocumentFragment, DocumentType, Element, Text, ProcessingInstruction, or Comment interface (simply called nodes) participate in a tree."
http://www.w3.org/TR/dom/#element
"Element nodes are simply known as elements."
Source: Stackoverflow.com