35

I was wondering what exactly a node is in JavaScript?

As in the functions:

element.nodeType
row.parentNode.removeChild(row);
3
  • 4
    You'll want to learn something about the DOM. This question is closely related to it. Jul 26, 2014 at 19:16
  • 1
    There are no nodes in javascript. There are javascript objects that represent DOM nodes however.
    – Bergi
    Jul 26, 2014 at 19:20
  • possible duplicate: stackoverflow.com/questions/4976344/…
    – Sid
    Jul 26, 2014 at 19:21

4 Answers 4

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.

4
  • That is very strange: (div) instanceOf Node returns true, h2 instanceOf Node returns false on Chrome
    – albanx
    Oct 17, 2019 at 15:14
  • @albanx I don't get that result on Chrome 76. I'm guessing there's an issue in your code. i.imgur.com/ck6fbhD.png
    – Hubro
    Oct 17, 2019 at 15:18
  • I was trying the chrome dev console. Click a h2 element and do $0 instanceOf Node
    – albanx
    Oct 21, 2019 at 10:28
  • @albanx Still can't reproduce (i.imgur.com/CBoB4gL.png) - What does $0.__proto__ print for you?
    – Hubro
    Oct 22, 2019 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.

1
  • The Document node has two children (you said one): the first is <!DOCTYPE html> and the second is the html element. You can verify this by typing document.firstChild May 23, 2021 at 4: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>
2
  • Thanks for this answer. I learned a lot. Here's some valuable sources: 1) JavaScript HTML DOM 2) HTML DOM childNodes Property 3) HTML DOM children Property. Jul 4, 2020 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. Jul 4, 2020 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.