Traverse the DOM

Learning Objectives

Master CSS selectors for element selection
Learn DOM element properties and attributes
Handle classes dynamically
Obtain element information
Apply traversal techniques to real projects

Section 15.1: Sample Web Page

Example HTML

<!DOCTYPE html>
<html>
<head>
    <title>Product Page</title>
</head>
<body>
    <header>
        <h1>My Store</h1>
        <nav>
            <a href="/" class="active">Home</a>
            <a href="/products">Products</a>
            <a href="/about">About</a>
        </nav>
    </header>
    <main>
        <article class="product" data-id="1">
            <h2>Product 1</h2>
            <p>Description</p>
            <span class="price">$19.99</span>
        </article>
    </main>
</body>
</html>

Section 15.2: Selecting Elements

getElementById

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

getElementsByClassName

let products = document.getElementsByClassName("product");
// Returns HTMLCollection (live)

getElementsByTagName

let links = document.getElementsByTagName("a");
// Returns HTMLCollection (live)

query Selector (CSS Selectors)

// Single element
let element = document.querySelector(".header");
let element = document.querySelector("#main");
let element = document.querySelector("article p");

// Multiple elements
let products = document.querySelectorAll(".product");
// Returns NodeList (static)

CSS Selector Patterns

// Class selector
document.querySelector(".product");

// ID selector
document.querySelector("#header");

// Tag selector
document.querySelector("h1");

// Attribute selector
document.querySelector("[data-id='1']");

// Combined selectors
document.querySelector(".product .price");

// Multiple conditions
document.querySelector("article.featured p");

Section 15.3: Selecting Elements via CSS Selectors

Common Patterns

// All divs
document.querySelectorAll("div");

// Elements with specific class
document.querySelectorAll(".btn");

// Elements with specific ID
document.querySelector("#main");

// Nested elements
document.querySelectorAll("header nav a");

// Attribute matching
document.querySelectorAll('[href]');
document.querySelectorAll('[data-status="active"]');

// Pseudo-selectors
document.querySelectorAll("li:first-child");
document.querySelectorAll("p:last-of-type");

Section 15.4: Obtaining Information about Elements

Element Properties

let element = document.querySelector(".product");

// Get text content
console.log(element.textContent);

// Get HTML content
console.log(element.innerHTML);

// Get tag name
console.log(element.tagName);

// Get classes
console.log(element.className);
console.log(element.classList);

// Get ID
console.log(element.id);

Element Attributes

let link = document.querySelector("a");

// Get attribute
console.log(link.getAttribute("href"));

// Set attribute
link.setAttribute("href", "/new-page");

// Has attribute
console.log(link.hasAttribute("href"));

// Remove attribute
link.removeAttribute("href");

Data Attributes

<div data-id="123" data-name="product">Product</div>

<script>
let element = document.querySelector("div");

// Access data attributes
console.log(element.dataset.id);     // "123"
console.log(element.dataset.name);   // "product"

// Set data attributes
element.dataset.price = "19.99";
</script>

Handling Classes

let element = document.querySelector(".box");

// Add class
element.classList.add("active");

// Remove class
element.classList.remove("active");

// Toggle class
element.classList.toggle("active");

// Check class
if (element.classList.contains("active")) {
    console.log("Active!");
}

// Get all classes
console.log(element.classList);

// Replace class
element.classList.replace("old", "new");

Coding Challenges

Challenge 15.1: Counting Elements

Task: Count the number of:

All paragraphs
All elements with class "highlight"
All links in the navigation

Challenge 15.2: Handling Attributes

Task: Modify HTML attributes:

Get all image src attributes
Change href attributes of links
Add/remove data attributes

Challenge 15.3: Handling Classes

Task: Dynamically manage classes:

Add "active" class to first item
Remove "inactive" class from all items
Toggle class on button click

Key Takeaways

✅ querySelector is the modern way to select elements
✅ querySelectorAll returns NodeList of matching elements
✅ CSS selectors are powerful and flexible
✅ classList makes managing classes easy
✅ Data attributes store custom data
✅ textContent gets/sets text
✅ innerHTML gets/sets HTML

Quiz Questions

What is the difference between querySelector and getElementById?
How do you add a class to an element?
What are data attributes?
How do you get an element's text content?
How do you select all elements with a specific class?

Next Module: Module 16 - Modify Page Structure