famashines

2024-12-24

javascript

Module 10: DOM Manipulation

Objective: Learn how to use JavaScript to interact with and modify the DOM (Document Object Model) to make web pages dynamic and interactive.

1. What Is the DOM?

The DOM (Document Object Model) is a programming interface for web pages. It represents the structure of an HTML document as a tree of objects that you can interact with using JavaScript.

Real-Life Analogy:

Imagine the DOM as a blueprint of a building (the web page). JavaScript acts like a construction worker, making changes based on the blueprint.

Example: HTML Structure

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1 id="title">Hello, World!</h1>
    <p class="description">Welcome to my website.</p>
</body>
</html>

In the DOM, each element (<h1>, <p>, etc.) is represented as an object that you can manipulate.

2. Selecting Elements

You can select elements in the DOM using methods like getElementById, querySelector, and more.

Common Selection Methods

MethodDescriptionExample
document.getElementById()Selects an element by its id.document.getElementById("title")
document.querySelector()Selects the first element matching a selector.document.querySelector("h1")
document.querySelectorAll()Selects all elements matching a selector.document.querySelectorAll("p")

Example:

let title = document.getElementById("title");
console.log(title.textContent); // Outputs: Hello, World!

3. Changing Content

You can update the content of an element using properties like textContent or innerHTML.

Example:

let title = document.getElementById("title");
title.textContent = "Hello, JavaScript!"; // Changes the text

Using innerHTML:

let description = document.querySelector(".description");
description.innerHTML = "<strong>Dynamic content added!</strong>";

4. Changing Styles

You can change the CSS styles of elements using the style property.

Example:

let title = document.getElementById("title");
title.style.color = "blue";
title.style.fontSize = "24px";

5. Adding and Removing Classes

CSS classes can be dynamically added or removed using classList.

Example:

let title = document.getElementById("title");
title.classList.add("highlight"); // Adds a class
title.classList.remove("highlight"); // Removes a class

6. Creating and Appending Elements

You can create new elements and add them to the DOM.

Example:

let newElement = document.createElement("p");
newElement.textContent = "This is a new paragraph.";
document.body.appendChild(newElement);

7. Handling Events

You can make your web page interactive by responding to user actions like clicks, typing, or hovering.

Adding an Event Listener

Use addEventListener to attach a function to an event.

Example:

let button = document.querySelector("button");
button.addEventListener("click", function() {
    alert("Button clicked!");
});

Example with Input

let input = document.querySelector("input");
input.addEventListener("input", function() {
    console.log("User typed: " + input.value);
});

8. Practical Examples

Example 1: Toggle Visibility

Toggle the visibility of a paragraph when a button is clicked.

<button id="toggleButton">Toggle</button>
<p id="text">This is some text.</p>

<script>
    let button = document.getElementById("toggleButton");
    let text = document.getElementById("text");

    button.addEventListener("click", function() {
        if (text.style.display === "none") {
            text.style.display = "block";
        } else {
            text.style.display = "none";
        }
    });
</script>

Example 2: Change Background Color

Change the background color of the page when a button is clicked.

<button id="changeColor">Change Background</button>

<script>
    let button = document.getElementById("changeColor");

    button.addEventListener("click", function() {
        document.body.style.backgroundColor = "lightblue";
    });
</script>

9. Practice Exercises

Task 1: Dynamic Heading

  1. Create an h1 element in HTML with the text "Original Title".
  2. Write JavaScript to change the text to "Updated Title" when a button is clicked.

Example Solution:

<h1 id="heading">Original Title</h1>
<button id="updateButton">Update Title</button>

<script>
    let heading = document.getElementById("heading");
    let button = document.getElementById("updateButton");

    button.addEventListener("click", function() {
        heading.textContent = "Updated Title";
    });
</script>

Task 2: Add a List Item

  1. Create an empty <ul> in HTML.
  2. Add a button that adds a new list item with text "New Item" each time it’s clicked.

Example Solution:

<ul id="list"></ul>
<button id="addItem">Add Item</button>

<script>
    let list = document.getElementById("list");
    let button = document.getElementById("addItem");

    button.addEventListener("click", function() {
        let newItem = document.createElement("li");
        newItem.textContent = "New Item";
        list.appendChild(newItem);
    });
</script>

10. Common Errors

  1. Selecting Nonexistent Elements:

    let element = document.getElementById("nonexistent"); // Returns null
element.textContent = "Hello!"; // Error: Cannot set property 'textContent' of null

  2. Forgetting to Use addEventListener:

    button.onclick = function() { // Works but replaces other event listeners
    alert("Clicked!");
};

  3. Overwriting innerHTML:

    element.innerHTML = "<p>New Content</p>"; // Removes existing children

11. Challenge: Interactive Counter

  1. Create a button to increment a counter displayed on the page.
  2. Display the counter value in a heading (<h1>).

Example Solution:

<h1 id="counter">0</h1>
<button id="increment">Increment</button>

<script>
    let counter = 0;
    let counterDisplay = document.getElementById("counter");
    let button = document.getElementById("increment");

    button.addEventListener("click", function() {
        counter++;
        counterDisplay.textContent = counter;
    });
</script>