Tutorials Tonight
Follow Us

What Is A Node In Javascript?


In this tutorial, you will learn about javascript nodes, types of nodes in javascript, node tree, and a brief understanding of DOM (Document Object Model).

Have you ever thought about how a scripting language like javascript interacts with the components of an HTML document?
In brief, this is done by creating a tree of nodes from the HTML document.

  1. What is a node in javascript?
  2. Types of nodes
  3. Use of nodes

What is a node in javascript?

The Document Object Model (DOM) represents an HTML document with a logical structure, the branches of this logical structure is made up of nodes.

When you look at an HTML document from a javascript view then everything in the HTML document is a node. Either HTML elements, attributes, text, document and even comments are nodes in javascript.

For illustration look at the picture given below which represent an HTML document as a tree of nodes.

node structure in dom

In the above picture, you can see that at the end of every branch, there lies a node, either element node or text node. But even there are other things like comment, attribute, CDATA, etc all come under node category.

Every node is an object which has multiple methods and properties, commonly nodes are also called node objects.

Note: Every HTML element is a node in javascript but every node is not an HTML element.


Types of nodes in javascript

There are many different types of nodes in javascript. Using javascript you can get the node name and node type of any node:

  1. nodeName - The nodeName property returns the name of the types of node.
  2. 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.

Type Description Value
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 <p>This is a text node.</p> 3
CDATA Section node Example of CDATA is <![CDATA[ ... ]]> 4
Comment node All the HTML comments are comment node. Example <-- This is an HTML comment --> 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 <!DOCTYPE html> 10

let's see an example how to use property mensioned above.

Example

<p id="para">This is a paragraph.</p>

<script>
  let p = document.getElementById("para"); // selecting node
  console.log(p.nodeName, p.nodeType); // P, 1
  console.log(p.firstChild.nodeName, p.firstChild.nodeType); // #text, 3
  console.log(p.nextElementSibling.nodeName, p.nextElementSibling.nodeType); // SCRIPT, 1
</script>

Use of nodes

Splitting the entire HTML document in form of a tree of nodes gives scripting language a vision and a way to parse the document.

Since you can select any node within an HTML document using javascript gives you access and control over each and every component of the webpage.


Element node

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 text node, comment node.

An element node has nodeType = 1.


Javascript get node

Using nodes you can get any element from a document. There are some javascript methods used on document objects to get a node from the document.

  1. getElementById() (get element node using its id)
  2. querySelector() (get almost all types of node using CSS selectors)
  3. 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");

Conclusion

A node in javascript has a broad definition, everything in an HTML document can be seen as a node. Element as element node, text as a text node, comment as comment node, etc. These nodes are object which gives the user access to get other nodes through it. The global node that is used to get to all other nodes is the document node.

The document node is the root node of the document. It has a nodeType = 9 and a nodeName = #document.


Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.