Chapter 10: DOM Manipulation

DOM (Document Object Model) manipulation is a core part of working with web pages using JavaScript. This chapter explores how to interact with and modify HTML elements dynamically using JavaScript.

Basics of DOM

What is the DOM?

The DOM is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as a tree of nodes, where each node represents a part of the document.

Accessing DOM Elements

You can access and manipulate DOM elements using various JavaScript methods.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Manipulation</title>
  </head>
  <body>
    <div id="content">Hello, world!</div>
    <script>
      let content = document.getElementById("content");
      console.log(content.innerText); // Output: Hello, world!
    </script>
  </body>
</html>

Selecting Elements

JavaScript provides several methods to select DOM elements:

getElementById(): Selects an element by its ID.
getElementsByClassName(): Selects elements by their class name.
getElementsByTagName(): Selects elements by their tag name.
querySelector(): Selects the first element that matches a CSS selector.
querySelectorAll(): Selects all elements that match a CSS selector.

Examples:

// Selecting by ID
let header = document.getElementById("header");

// Selecting by class name
let items = document.getElementsByClassName("item");

// Selecting by tag name
let paragraphs = document.getElementsByTagName("p");

// Using CSS selectors
let firstItem = document.querySelector(".item");
let allItems = document.querySelectorAll(".item");

Interacting with HTML Elements

Changing Content

You can change the content of an element using the innerText or innerHTML properties.

Example:

let paragraph = document.getElementById("myParagraph");
paragraph.innerText = "New content!";

Changing Attributes

You can change attributes of elements using the setAttribute() method.

Example:

let image = document.getElementById("myImage");
image.setAttribute("src", "newImage.jpg");

Changing Styles

You can modify the style of elements using the style property.

Example:

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

Event Handling

JavaScript allows you to handle events such as clicks, mouseovers, and key presses. You can attach event listeners to elements to execute code when the events occur.

Adding Event Listeners

You can use the addEventListener() method to listen for events.

Example:

let button = document.getElementById("myButton");

button.addEventListener("click", function () {
  alert("Button was clicked!");
});

Common Events

click: Triggered when an element is clicked.
mouseover: Triggered when the mouse pointer is moved over an element.
keydown: Triggered when a key is pressed down.

Examples:

// Click event
button.addEventListener("click", function () {
  console.log("Button clicked");
});

// Mouseover event
button.addEventListener("mouseover", function () {
  console.log("Mouse is over the button");
});

// Keydown event
document.addEventListener("keydown", function (event) {
  console.log("Key pressed: " + event.key);
});

Creating and Modifying Elements Dynamically

Creating Elements

You can create new elements using document.createElement().

Example:

let newDiv = document.createElement("div");
newDiv.innerText = "I am a new div!";
document.body.appendChild(newDiv);

Modifying Elements

You can add, remove, or replace elements in the DOM.

Example: Adding Elements

let ul = document.getElementById("myList");
let newItem = document.createElement("li");
newItem.innerText = "New list item";
ul.appendChild(newItem);

Example: Removing Elements

let itemToRemove = document.getElementById("itemToRemove");
itemToRemove.parentNode.removeChild(itemToRemove);

Example: Replacing Elements

let oldElement = document.getElementById("oldElement");
let newElement = document.createElement("p");
newElement.innerText = "I am the new element";

oldElement.parentNode.replaceChild(newElement, oldElement);