ProgramGuru

Understand the DOM Tree

Understand the DOM Tree

The DOM is the browser's object representation of a document. Parent and child relationships let code visit and change one part of a school notice without editing the original HTML file.

Before this topic, review Sort and Find Marks Deliberately if its terms are unfamiliar.

What you’ll learn

  • Explain understand the dom tree through the school example.
  • Trace the shown operations and distinguish their result from displayed output.
  • Make the practice change and explain its consequence: The heading text changes, but the same two child elements remain.

Work through the school example

This is JavaScript in a browser. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

Create this markup in a separate index.html, then place the JavaScript in a script after these elements. Use this isolated practice page so the selectors refer to its markup.

<section id="notice"><h3>Class report</h3><p>Diya</p></section>

JavaScript · browser · complete script for the supplied markup

const notice = document.getElementById("notice");
console.log(notice.children.length);
console.log(notice.firstElementChild.textContent);

Expected output

2
Class report

What is the DOM Tree in JavaScript?

The DOM (Document Object Model) Tree is a structured representation of an HTML document as a tree of objects. When a web page is loaded, the browser parses the HTML and creates a DOM tree — each HTML element becomes a node in this tree.

Why Should You Learn the DOM Tree?

If you're serious about web development, understanding the DOM is essential. It's your gateway to interact with the content, structure, and even the styling of the page using JavaScript. From dynamic content updates to building entire interactive applications — it all starts here.

Basic Structure of the DOM Tree

Here's a simple HTML structure:


<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello DOM</h1>
    <p>Welcome to the DOM tree tutorial</p>
  </body>
</html>

Now, imagine this as a tree:

  • document
    • html
      • head
        • title
      • body
        • h1
        • p

Accessing DOM Nodes

Every element on a page can be accessed through the DOM using JavaScript.

const heading = document.querySelector('h1');
console.log(heading.textContent);

Hello DOM

document.querySelector allows us to select the first matching element. In this case, it's the <h1>.

DOM Tree Navigation

Here’s how you can navigate the tree:

const body = document.body;
console.log(body.firstChild);       // Might be a text node (whitespace)
console.log(body.children[0]);      // h1 element
console.log(body.lastElementChild); // p element

#text
<h1>Hello DOM</h1>
<p>Welcome to the DOM tree tutorial</p>

Common Properties for Traversing the DOM

  • parentNode – Gets the parent of a node
  • childNodes – Gets a NodeList of child nodes (includes text)
  • children – Gets an HTMLCollection of child elements (excludes text)
  • firstChild / lastChild
  • nextSibling / previousSibling

Modifying the DOM Tree

You can change content, structure, or even add new nodes:

const para = document.createElement('p');
para.textContent = 'This is added dynamically!';
document.body.appendChild(para);

<h1>Hello DOM</h1>
<p>Welcome to the DOM tree tutorial</p>
<p>This is added dynamically!</p>

Removing Nodes from the DOM Tree

const oldPara = document.querySelector('p');
oldPara.remove();

After execution, the first paragraph will be removed from the DOM structure.

Replacing Elements in the DOM Tree

const newHeading = document.createElement('h2');
newHeading.textContent = 'Updated Heading';
const oldHeading = document.querySelector('h1');
document.body.replaceChild(newHeading, oldHeading);

<h2>Updated Heading</h2>
<p>Welcome to the DOM tree tutorial</p>

Advanced DOM Tree Example: Nested Manipulation

const ul = document.createElement('ul');
for (let i = 1; i <= 3; i++) {
  const li = document.createElement('li');
  li.textContent = 'Item ' + i;
  ul.appendChild(li);
}
document.body.appendChild(ul);

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Event-Based DOM Interaction

The DOM tree also enables event-driven manipulation. Example:

document.querySelector('h2').addEventListener('click', function() {
  alert('Heading clicked!');
});

Clicking the heading triggers a JavaScript alert — a simple but powerful use of DOM interaction.

Conclusion

Practice with live HTML files, inspect elements using browser DevTools, and write JavaScript to see the tree come alive. The more you experiment, the more fluent you become in speaking the language of the web.

Recognize the important boundary

children counts element children, while childNodes also includes text nodes. The live DOM can differ from the initial HTML source.

Try a small variation

JavaScript · original source for practice

const notice = document.getElementById("notice");
console.log(notice.children.length);
console.log(notice.firstElementChild.textContent);

Your task: Replace Class report with School report. Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

Markup used by this section:

<section id="notice"><h3>Class report</h3><p>Diya</p></section>

Worked answer and reasoning

The heading text changes, but the same two child elements remain.

Markup for this edited program:

<section id="notice"><h3>School report</h3><p>Diya</p></section>

JavaScript · complete worked variation

const notice = document.getElementById("notice");
console.log(notice.children.length);
console.log(notice.firstElementChild.textContent);

Expected output

2
School report

Predict the original program

JavaScript · original program for this question

const notice = document.getElementById("notice");
console.log(notice.children.length);
console.log(notice.firstElementChild.textContent);

Markup used by this section:

<section id="notice"><h3>Class report</h3><p>Diya</p></section>
In the browser, what does the original JavaScript example display, in order?
Choose one answer. You can try again.

Answer and explanation

2 → Class report

The DOM is the browser's object representation of a document. Parent and child relationships let code visit and change one part of a school notice without editing the original HTML file. children counts element children, while childNodes also includes text nodes. The live DOM can differ from the initial HTML source.

Keep the useful idea

The DOM is the browser's object representation of a document. Parent and child relationships let code visit and change one part of a school notice without editing the original HTML file.

Check your variation against this explanation: The heading text changes, but the same two child elements remain.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.

Reaching the recap and completing the quizzes are separate milestones.

    Next lesson: Find a Document Element →