JavaScript HTML DOM Elements (Nodes)

JavaScript

JavaScript is a high-level, interpreted programming language that is widely used for web development. Initially designed as a client-side scripting language, it runs directly in web browsers, enabling dynamic and interactive user experiences. JavaScript can now be used for server-side development as well.

14 April 2025 | Category: JavaScript

In the HTML DOM (Document Object Model), everything is a node — from elements to text to comments. Understanding DOM nodes is crucial for manipulating and interacting with web pages using JavaScript.

📘 What is a DOM Node?

When a web page loads, the browser creates a DOM tree of all the elements in the page.

Each part of the HTML becomes a node:

The document itself is a node (document)
All HTML tags are element nodes
The text inside elements is a text node
Comments are comment nodes

🧱 Types of DOM Nodes

Node Type	Description	Example
Document Node	The web page itself	`document`
Element Node	Any HTML tag	`<p>`, `<div>`, `<img>`
Text Node	The text inside tags	`"Hello World"`
Attribute Node	Attributes like `id`, `class` (rarely used directly)
Comment Node	HTML comments `<!-- -->`

🌲 DOM Tree Structure Example

HTML:

<body>
  <h1>Hello <span>World</span></h1>
</body>

DOM Tree:

document
└── html
    └── body
        └── h1
            ├── Text: "Hello "
            └── span
                └── Text: "World"

🧪 Accessing DOM Elements

To access DOM nodes/elements in JavaScript, use:

// Accessing the body element
const body = document.body;

// Accessing the first h1 tag
const heading = document.querySelector("h1");

🧬 Navigating Nodes

<div id="box">Text <span>More</span></div>

<script>
  const box = document.getElementById("box");

  // Get all child nodes (includes text nodes and element nodes)
  console.log(box.childNodes);

  // Get only element nodes
  console.log(box.children);

  // Access first child node (may be a text node)
  console.log(box.firstChild); // #text (whitespace or "Text ")

  // Access first element child
  console.log(box.firstElementChild); // <span>More</span>
</script>

⚠️ Difference: Nodes vs Elements

Property	Includes Text Nodes?	Elements Only?
`childNodes`	✅ Yes	❌ No
`children`	❌ No	✅ Yes
`firstChild`	✅ Yes	❌ No
`firstElementChild`	❌ No	✅ Yes

🔄 Looping Through Nodes

const box = document.getElementById("box");

// Loop through all child elements
for (let child of box.children) {
  console.log(child.tagName); // Outputs tag names like SPAN, P, etc.
}

// Loop through all child nodes (including text)
box.childNodes.forEach((node) => {
  console.log(node.nodeName); // Outputs "#text", "SPAN", etc.
});

📌 Useful Node Properties

Property	Description
`nodeName`	Returns the name of the node
`nodeType`	Returns the node type as a number
`nodeValue`	Returns the value of a node (text)
`textContent`	Gets or sets text inside a node

Example:

const heading = document.querySelector("h1");
console.log(heading.nodeName); // H1
console.log(heading.textContent); // Hello World

📊 Node Type Values

Node Type Name	Value
Element Node	1
Attribute Node	2
Text Node	3
Comment Node	8
Document Node	9

🧠 Real-Life Use Case: Clean Text Extraction

HTML:

<p id="para">Welcome to <b>JavaScript</b></p>

JavaScript:

const para = document.getElementById("para");

console.log(para.innerHTML);    // "Welcome to <b>JavaScript</b>"
console.log(para.textContent);  // "Welcome to JavaScript"

✅ Summary

Task	Use
Access elements	`getElementById`, `querySelector`
Navigate child/parent nodes	`childNodes`, `parentNode`
Get only element children	`children`
Access text inside	`textContent`, `nodeValue`