Lesson 5: DOM Manipulation

Welcome to Lesson 5! Now that you know JavaScript basics, it’s time to focus on the Document Object Model (DOM), which is how JavaScript interacts with your HTML page. The DOM is a structured representation of your HTML, forming a tree of nodes. Each HTML element becomes a node in this tree, and JavaScript can manipulate these nodes dynamically, changing content, attributes, styles, and structure in real time.

Understanding the DOM is crucial because it allows you to make web pages interactive and responsive to user actions. Using the DOM, you can add new elements, remove existing ones, or modify content based on events or conditions. This is the foundation of creating dynamic web applications.

To access DOM elements, JavaScript provides several methods. Some of the most commonly used include:

• document.getElementById("id"): Selects an element by its unique ID.
• document.getElementsByClassName("class"): Returns an array-like collection of elements with the specified class.
• document.getElementsByTagName("tag"): Returns all elements with the given tag name.
• document.querySelector("selector"): Selects the first element that matches a CSS selector.
• document.querySelectorAll("selector"): Returns all elements matching a CSS selector.

For example, if you have a paragraph element with an ID of "intro":

<p id="intro">Welcome to the site!</p>

You can access and modify it in JavaScript:

let intro = document.getElementById("intro");
intro.textContent = "Hello, JavaScript DOM!";

Attributes can also be manipulated. For example, changing the src of an image or adding a class:

let image = document.querySelector("img");
image.src = "new-image.png";
image.alt = "Updated image";

Adding or removing elements dynamically is another powerful feature. You can create new nodes with document.createElement() and insert them using appendChild() or insertBefore(). Example:

let newDiv = document.createElement("div");
newDiv.textContent = "This is a new div";
document.body.appendChild(newDiv);

Similarly, removing elements is straightforward:

let oldDiv = document.getElementById("old-div");
oldDiv.remove();

Manipulating CSS styles via JavaScript allows for dynamic visual changes. Each element has a style property:

let box = document.querySelector(".box");
box.style.backgroundColor = "blue";
box.style.width = "200px";
box.style.height = "100px";

Classes can also be toggled to apply predefined CSS styles:

let button = document.querySelector("button");
button.classList.toggle("active");

Understanding the DOM is also crucial for handling forms and user input. You can access the value of input fields using .value:

let input = document.getElementById("username");
let username = input.value;

Dynamic lists can be generated by looping through arrays and creating elements for each item:

let fruits = ["Apple", "Banana", "Orange"];
let ul = document.createElement("ul");

fruits.forEach(fruit => {
  let li = document.createElement("li");
  li.textContent = fruit;
  ul.appendChild(li);
});

document.body.appendChild(ul);

Practice using the DOM by creating a to-do list, gallery, or interactive form. These exercises help solidify your understanding of element selection, content manipulation, and dynamic rendering.

By the end of this lesson, you should be comfortable with:

• Selecting elements using different DOM methods
• Modifying text, HTML, and attributes dynamically
• Adding, removing, and cloning elements
• Changing CSS styles and toggling classes
• Building dynamic lists, forms, and interactive components

DOM manipulation is essential for creating modern, interactive web applications. Combine your DOM skills with JavaScript basics, and you can create websites that respond to user input, change content dynamically, and provide a smooth, engaging experience.