← Back to Chapters

JavaScript DOM Nodes

? JavaScript DOM Nodes

⚡ Quick Overview

In the DOM (Document Object Model), a node is the basic building block of the page structure. Everything in an HTML document—elements, text, comments, attributes, and even the document itself—is represented as a node in a hierarchical tree.

By working with nodes, JavaScript can traverse, inspect, create, and modify parts of a webpage, making your applications dynamic and interactive.

? Key Concepts

  • DOM tree – The HTML document is represented as a tree of nodes.
  • Element nodes – Represent HTML tags such as <div>, <p>, <span>, etc.
  • Text nodes – Represent the actual text inside elements.
  • Comment nodes – Represent HTML comments used for notes and documentation.
  • Document node – Represents the entire HTML document (the root of the tree).
  • nodeType – A numeric value that tells you what kind of node you’re dealing with.

? Syntax and Theory

Some core properties available on DOM nodes:

  • nodeType – Returns a number representing the type of the node (e.g., 1 for elements, 3 for text).
  • nodeName – The node’s name (e.g., tag name for elements, #text for text nodes).
  • nodeValue – The content of text or comment nodes; for element nodes it is always null.
  • parentNode – The node’s direct parent in the DOM tree.
  • childNodes – A live collection of all child nodes, including text nodes and comments.
  • firstChild / lastChild – References to the first and last child node.

? Node Type Constants

Common numeric values for nodeType are also exposed as constants on the global Node object:

Constant Value Description
Node.ELEMENT_NODE 1 Element node
Node.TEXT_NODE 3 Text node
Node.COMMENT_NODE 8 Comment node
Node.DOCUMENT_NODE 9 Document node

? Use Cases

  • Inspecting and debugging the structure of your HTML using nodeType and nodeName.
  • Building interactive components by creating and appending new nodes dynamically.
  • Reading or changing text by working directly with text nodes instead of replacing entire HTML fragments.
  • Iterating over childNodes to understand everything (including comments and whitespace) inside a container.

? Code Examples

? Example: Checking node types 
<div id="test">Hello<!-- Comment --></div>
<script>
const test = document.getElementById("test");
console.log(test.nodeType);            // 1 (Element Node)
console.log(test.firstChild.nodeType); // 3 (Text Node)
console.log(test.lastChild.nodeType);  // 8 (Comment Node)
</script>
? Example: Exploring child nodes 
<div id="container">Hello
<!-- comment -->
<span>World</span>
</div>
<script>
const container = document.getElementById("container");
container.childNodes.forEach(node => {
console.log(node.nodeType, node.nodeName, node.nodeValue);
});
</script>
✏️ Example: Modifying a text node 
const textNode = document.createTextNode("Hello");
document.body.appendChild(textNode);
textNode.nodeValue = "Hello JS!";
? Example: Creating and appending nodes 
const p = document.createElement("p");
p.appendChild(document.createTextNode("New paragraph."));
document.body.appendChild(p);

? Output and Explanation

? Understanding the console output

In the first example, logging test.nodeType prints 1, meaning the <div> is an element node. Its firstChild is a text node (3), and its lastChild is the comment node (8).

In the second example, iterating over container.childNodes prints each child’s nodeType, nodeName, and nodeValue. You’ll see:

  • A text node for the whitespace or text "Hello".
  • A comment node for <!-- comment -->.
  • An element node for <span>World</span>.

In the text-node example, updating nodeValue from "Hello" to "Hello JS!" immediately updates what you see on the page. In the final example, we build a new <p> element, attach a text node to it, and append it to the document, dynamically adding content to the DOM.

? Tips and Best Practices

  • Use nodeType to safely identify the kind of node you’re working with.
  • childNodes includes text and comment nodes; use children if you only care about element nodes.
  • Create new nodes with document.createElement() and document.createTextNode() for precise control.
  • Always check that a node exists (e.g., check for null) before accessing its properties.
  • Remember that nodeValue on element nodes always returns null.
  • Use document.createComment() when you need to add comments dynamically to the DOM.

? Try It Yourself

  • Pick any element on your page and log the nodeType and nodeName of its child nodes.
  • Create and append a text node dynamically to a container element using createTextNode().
  • Change the nodeValue of a text node and observe the update in the browser.
  • Create a comment node with document.createComment() and append it to document.body.
  • Compare the output of childNodes and children on a complex element that contains text, comments, and other elements.
  • Experiment with firstChild and lastChild on different elements to see what they reference.