In brief, this is done by creating a tree of nodes from the HTML document.
- Types of nodes
- Use of nodes
- Node vs Element
- How to Get Node
Table Of Contents
A node is a part of the DOM tree that is used to get access to every component of a webpage.
The DOM tree is a tree of nodes that are created by the browser when the page is loaded. The tree is a representation of the HTML document. All parts of this tree such as the head, body, another HTML tag, text, attributes, etc. are known as nodes.
For illustration look at the picture given below which represent an HTML document as a tree of nodes.
In the above picture, you can see that at the end of every branch, there lies a node, either an element node or text node. But even there are other things like comment, attribute, CDATA, etc all come under the node category.
Every node is an object which has multiple methods and properties, commonly nodes are also called node objects.
- nodeName - The nodeName property returns the name of the types of node.
- nodeType - The nodeType property returns an integer value where these integers indicate the type of node.
The table given below shows types of nodes with descriptions and values returned by the nodeType property.
|Element node||Example of element nodes are <p>, <img>, <div>, etc||1|
|Attribute node||All attributes of an element are attribute node. Example class, title, style, etc||2|
|Text node||The actual text inside an element are called text node. Example ||3|
|CDATA Section node||Example of CDATA is ||4|
|Comment node||All the HTML comments are comment node. Example ||8|
|Document node||The document is itself a node. Example document||9|
|Document type node||The document type defined at the top of document is called document type node. Example ||10|
let's see an example how to use property mensioned above.
<p id="para">This is a paragraph.</p> <script> // selecting node let p = document.getElementById("para"); // get node name and node type console.log(p.nodeName, p.nodeType); // P, 1 // get node name and node type of child node console.log(p.firstChild.nodeName, p.firstChild.nodeType); // #text, 3 // get node name and node type of next sibling console.log(p.nextElementSibling.nodeName, p.nextElementSibling.nodeType); // SCRIPT, 1 </script>
Use of nodes
The node is the basic building block of the DOM. It splits the entire HTML document in form of a tree of nodes giving scripting language a way to parse the document.
Node vs Element
Do not confuse a node with an element.
A node is a general name for objects in the document, whereas an element is just one type of node among multiple like a text node, comment node.
An element node has nodeType = 1.
In short, an element is a type of node. So all elements are nodes but not all nodes are elements.
- getElementById() (get element node using its id)
- querySelector() (get almost all types of node using CSS selectors)
- getAttributeNode() (get attribute node)
Example: get element node by ID
let element = document.getElementById("id1");
Example: get nodes using CSS selector
let nodes = document.querySelector(".box");
Example: get element node by ID
let parentNode = document.getElementById("id1"); let attributeNode = parentNode.getAttributeNode("class");
The document node is the root node of the document. It has a nodeType = 9 and a nodeName = #document.