35

I was wondering what exactly a node is in JavaScript?

As in the functions:

element.nodeType
row.parentNode.removeChild(row);
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
jaredramirez
  • 645
  • 2
  • 11
  • 17

4 Answers4

56

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.

Gabriel Staples
  • 36,492
  • 15
  • 194
  • 265
Hubro
  • 56,214
  • 69
  • 228
  • 381
  • That is very strange: (div) instanceOf Node returns true, h2 instanceOf Node returns false on Chrome – albanx Oct 17 '19 at 15:14
  • @albanx I don't get that result on Chrome 76. I'm guessing there's an issue in your code. https://i.imgur.com/ck6fbhD.png – Hubro Oct 17 '19 at 15:18
  • I was trying the chrome dev console. Click a h2 element and do `$0 instanceOf Node` – albanx Oct 21 '19 at 10:28
  • @albanx Still can't reproduce (https://i.imgur.com/CBoB4gL.png) - What does `$0.__proto__` print for you? – Hubro Oct 22 '19 at 20:02
24

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.

Yahya Rehman
  • 321
  • 4
  • 16
  • The Document node has two children (you said one): the first is ` ` and the second is the `html` element. You can verify this by typing `document.firstChild` – Antoine Weber May 23 '21 at 04:18
20

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>
Gabriel Staples
  • 36,492
  • 15
  • 194
  • 265
Avijit Mandal
  • 380
  • 3
  • 8
  • Thanks for this answer. I learned a lot. Here's some valuable sources: 1) [JavaScript HTML DOM](https://www.w3schools.com/js/js_htmldom.asp) 2) [HTML DOM childNodes Property](https://www.w3schools.com/jsref/prop_node_childnodes.asp) 3) [HTML DOM children Property](https://www.w3schools.com/jsref/prop_element_children.asp). – Gabriel Staples Jul 04 '20 at 18:33
  • Note: to "run this code", save it as a file, such as `test.html`, and open it in a browser, such as Chrome. Then, press `F12`, or right-click --> Inspect, then go to the "Console" tab. Note that this html page will be completely blank, for the given code in your example above. That is expected. Beginners may not realize that, so I'm saying it here. – Gabriel Staples Jul 04 '20 at 18:36
1

A node (of DOM) is an element, from your HTML page, rendered by the browser to said “node tree” and on screen. It is to be accessible and manipulated by web-client programs, like JavaScript.

Hyfy
  • 301
  • 2
  • 11