What is a node in Javascript?

If you have an HTML file, you can see that it contains HTML elements, like <p>, <div>, <section>, etc. It also has HTML comments, line-breaks, text content, and HTML attributes. The browser reads this HTML file & according to the W3C HTML DOM standard, it breaks everything up in the HTML document into individual nodes.

<p>, <div>, <section>, etc. are treated as "element" nodes, but comments are "comment" nodes, "text" objects are "text nodes" & line-breaks are also classified as "text nodes". With the help of Javascript, we can access these DOM nodes in the node tree.

Always remember one thing: Every HTML element is a node, but not every node an HTML element.

Run this code & see the result in the console:

<div class="parent">
    <div class="child"></div>
    <!-- --> 
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
<script>
    var parent = document.querySelector('.parent')
    console.log(parent.childNodes) // returns a list of all child nodes
    console.log(parent.children)   // returns a list of child **element** nodes only
</script>

A "node", in this context, is simply an HTML element. The "DOM" is a tree structure that represents the HTML of the website, and every HTML element is a "node". See Document Object Model (DOM).

More specifically, "Node" is an interface that is implemented by multiple other objects, including "document" and "element". All objects implementing the "Node" interface can be treated similarly. The term "node" therefore (in the DOM context) means any object that implements the "Node" interface. Most commonly that is an element object representing an HTML element.


Nodes are in the DOM aka Document Object model. In the DOM, all parts of the document, such as elements, attributes, text, etc. are organized in a hierarchical tree-like structure; consisting of parents and children. These individual parts of the document are known as nodes.

enter image description here

The topmost node is the root node (Document Node) of the DOM tree, which has one child, the <html> element and so on. Further, the text content inside an element is a child node of the parent element, for example, "Mobile OS" is considered as a child node of the <h1> that contains it, and so on. Comments inside the HTML document are nodes in the DOM tree as well even though they dont effect the document in any way. HTML attributes such as id, class, title, style, etc. are also considered as nodes in DOM hierarchy.

Tags:

Javascript

Dom

Nodes

Recent Posts