Chapter 8: Working with the DOM

Learn how to manipulate the Document Object Model (DOM) to interact with HTML elements dynamically.

In this chapter, we’ll explore the Document Object Model (DOM) in JavaScript. The DOM represents the structure of a web page, allowing you to access and modify HTML elements dynamically. By manipulating the DOM, you can create interactive and responsive web experiences.

What is the DOM?

The Document Object Model (DOM) is a hierarchical representation of the elements in an HTML document. JavaScript can access, modify, and delete these elements, enabling dynamic changes to the content, structure, and style of a webpage.

Selecting Elements

To manipulate elements, you first need to select them. JavaScript provides several methods for selecting elements by their ID, class, tag, or CSS selectors:

// Selecting elements
let heading = document.getElementById("title");             // By ID
let buttons = document.getElementsByClassName("btn");       // By class name
let paragraphs = document.getElementsByTagName("p");        // By tag name
let mainContent = document.querySelector(".main-content");  // By CSS selector (first match)
let allItems = document.querySelectorAll(".item");          // By CSS selector (all matches)

These methods allow you to select elements based on different criteria, giving you flexibility in accessing DOM elements.

Manipulating Element Content

You can change the text or HTML content of an element using properties like textContent and innerHTML:

// Changing content
let heading = document.getElementById("title");
heading.textContent = "New Title";         // Sets text content
heading.innerHTML = "<em>New Title</em>"; // Sets HTML content

In this example, textContent updates the text inside the element, while innerHTML allows for adding HTML markup.

Modifying Element Attributes

You can modify attributes like src, href, and alt using setAttribute and getAttribute:

// Modifying attributes
let image = document.getElementById("myImage");
image.setAttribute("src", "new-image.jpg");
let imageSource = image.getAttribute("src");
console.log("Image source:", imageSource);

In this example, setAttribute changes the image’s src attribute, and getAttribute retrieves its current value.

Changing Element Styles

You can dynamically change the styling of elements by modifying the style property:

// Changing styles
let box = document.getElementById("box");
box.style.backgroundColor = "blue";
box.style.width = "200px";
box.style.height = "200px";

In this example, the background color and size of an element with the ID box are updated.

Creating and Appending Elements

JavaScript allows you to create new elements and add them to the DOM, making it possible to dynamically generate content:

// Creating and appending elements
let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

In this example, a new p element is created, given text content, and appended to the body of the document.

Removing Elements

You can remove elements from the DOM using the remove method:

// Removing an element
let paragraph = document.getElementById("paragraph-to-remove");
paragraph.remove();

In this example, the remove method deletes the element with the ID paragraph-to-remove from the DOM.

Traversing the DOM

DOM traversal methods allow you to navigate between elements based on their relationships. Common properties include:

parentNode: Accesses the parent element.
children: Accesses child elements.
nextSibling / previousSibling: Accesses adjacent elements.

// Traversing the DOM
let item = document.querySelector(".item");
console.log("Parent:", item.parentNode);
console.log("First child:", item.children[0]);
console.log("Next sibling:", item.nextSibling);

In this example, various DOM properties are used to navigate between elements related to the .item element.

Summary and Next Steps

In this chapter, we covered the basics of DOM manipulation in JavaScript, including selecting elements, changing content, modifying styles, creating new elements, and traversing the DOM. These techniques are essential for building dynamic and interactive web pages. In the next chapter, we’ll look into working with arrays and objects, two fundamental data structures in JavaScript.