Discover the DOM

Learning Objectives

Understand the DOM tree structure
Master DOM navigation techniques
Learn to access parent, child, and sibling elements
Apply DOM knowledge to real projects

Section 14.1: Introduction to the DOM

What is the DOM?

The DOM is a tree representation of your HTML page, accessible to JavaScript.

<html>
  <body>
    <div id="container">
      <h1>Title</h1>
      <p>Paragraph</p>
    </div>
  </body>
</html>

DOM Tree Visualization

document
└── html
    └── body
        └── div#container
            ├── h1
            └── p

Section 14.2: Get Started with the DOM in JavaScript

Accessing the Document Object

// The root object
console.log(document);

// Get HTML element
console.log(document.documentElement);

// Get body element
console.log(document.body);

Accessing Elements

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

const buttons = document.getElementsByClassName("btn");

const links = document.getElementsByTagName("a");

const element = document.querySelector(".header");
const elements = document.querySelectorAll(".button");

Element Properties

<div id="myDiv" class="container large">
    <h1>Heading</h1>
</div>

<script>
let div = document.getElementById("myDiv");

console.log(div.id);           // myDiv
console.log(div.className);    // container large
console.log(div.innerHTML);    // <h1>Heading</h1>
console.log(div.textContent);  // Heading
</script>

Section 14.3: Navigating the DOM

Parent Elements

let p = document.querySelector("p");
let parent = p.parentElement;
let grandparent = p.parentElement.parentElement;

Child Elements

let container = document.getElementById("container");

let firstChild = container.firstElementChild;
let lastChild = container.lastElementChild;
let allChildren = container.children;

Sibling Elements

let heading = document.querySelector("h1");

let nextSibling = heading.nextElementSibling;
let prevSibling = heading.previousElementSibling;

Complete Traversal Example

<div id="parent">
    <p class="first">First</p>
    <p class="second">Second</p>
    <p class="third">Third</p>
</div>

<script>
let secondParagraph = document.querySelector("p.second");

// Navigate around
console.log(secondParagraph.parentElement);      // div#parent
console.log(secondParagraph.previousElementSibling); // p.first
console.log(secondParagraph.nextElementSibling); // p.third
console.log(secondParagraph.parentElement.children[1]); // p.second (same element)
</script>

Section 14.4: Handling Child Elements

Iterating Through Children

let container = document.getElementById("container");

// Using for loop
for (let i = 0; i < container.children.length; i++) {
    console.log(container.children[i]);
}

// Using forEach
Array.from(container.children).forEach(child => {
    console.log(child);
});

Checking Element Type

let container = document.getElementById("container");

let firstChild = container.firstElementChild;

if (firstChild.tagName === "H1") {
    console.log("The first child is a heading");
}

Coding Challenges

Challenge 14.1: Showing a Node's Child

Task: Write a function that:

Takes an element ID as input
Displays all its child elements
Shows their tag names and text content

Example HTML:

<div id="parent">
    <h1>Heading</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>

Expected Output:

Children of parent:
1. H1 - "Heading"
2. P - "Paragraph 1"
3. P - "Paragraph 2"

Key Takeaways

✅ DOM is a tree structure of HTML elements
✅ Access elements with querySelector or getElementById
✅ Navigate with parentElement, children, siblings
✅ Use textContent to get/set text
✅ Use innerHTML to get/set HTML

Quiz Questions

What is the DOM tree?
How do you get an element by ID?
How do you access a parent element?
What's the difference between textContent and innerHTML?
How do you iterate through children?

Next Module: Module 15 - Traverse the DOM