Advance JavaScript (DOM, BOM, Web API) / Document Object Model

Node vs Element Traversing

📌 In the DOM, everything is a node

  • Element nodes → <div>, <p>, <h1>

  • Text nodes → spaces, line breaks, text inside elements

  • Comment nodes → <!-- comment -->

👉 Whitespace also becomes a text node.

🌳 Sample HTML

<div id="box">
  <h2>Title</h2>
  <p>Paragraph</p>
</div>

⚠️ Notice the new lines and spaces — they matter.

🔹 1. childNodes

✔️ What it does: Returns ALL child nodes of an element.

✔️ Includes

  • ✅ Text nodes (spaces, line breaks)

  • ✅ Element nodes

🧪 Example

const box = document.getElementById("box");
console.log(box.childNodes);
NodeList(5)
0: text        ← newline
1: h2
2: text        ← newline
3: p
4: text        ← newline

📝 Why?

Because childNodes follows the raw DOM tree, not just HTML tags.

🔹 2. children

✔️ What it does: Returns ONLY element nodes.

❌ Does NOT include

  • Text nodes

  • Comments

🧪 Example

console.log(box.children);
HTMLCollection(2) [h2, p]

📝 Why?

This property is designed for clean element traversal, ignoring whitespace.

🔹 3. firstChild

✔️ What it does: Returns the first node (not element) inside a parent.

⚠️ Important: It may return a text node!

🧪 Example

console.log(box.firstChild);
#text

📝 Why?

The first thing inside <div> is a newline, which becomes a text node.

🔹 4. firstElementChild

✔️ What it does: Returns the first ELEMENT only.

🧪 Example

console.log(box.firstElementChild);
<h2>Title</h2>

📝 Why?

It skips text nodes and finds the first real HTML element.

🧠 Final Comparison Table

Property

What it Returns

Why

childNodes

Text + Elements

Raw DOM nodes

children

Only Elements

Cleaner traversal

firstChild

Text OR Element

First node (whitespace matters)

firstElementChild

Only Element

Ignores text nodes

✅ Rule of Thumb (VERY IMPORTANT)

✔️ Use these in real projects:

children
firstElementChild
lastElementChild
nextElementSibling
previousElementSibling

❌ Avoid these unless needed:

childNodes
firstChild
lastChild

Property

Includes Text Nodes

Includes Elements

childNodes

✅ Yes

✅ Yes

children

❌ No

✅ Yes

firstChild

✅ Yes

❌ Maybe

firstElementChild

❌ No

✅ Yes