DOM Manipulation in JavaScript

Day 7: DOM Manipulation in JavaScript

Date: December 14, 2024

Welcome to Day 7 of your JavaScript learning journey! Today’s topic focuses on DOM Manipulation, one of the most exciting aspects of JavaScript. With DOM manipulation, you can dynamically update, add, or remove elements from a webpage, making it interactive and user-friendly. By the end of today’s lesson, you’ll also create a simple To-Do List project to put your knowledge into practice.

---

1. What is the DOM?

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of an HTML document as a tree of objects, allowing you to access and manipulate elements programmatically using JavaScript.

Here’s an example of how the DOM represents HTML:

  
    <h1 id="Welcome">Welcome</h1>
    <p>This is a paragraph.</p>
  

The DOM tree for the above would look like this:

Document
 └── html
      └── body
           ├── h1
           └── p

---

2. Accessing DOM Elements

You can access elements in the DOM using several methods:

Using getElementById

let title = document.getElementById("title");
console.log(title); // Logs the element with ID "title"

Using getElementsByClassName

let items = document.getElementsByClassName("item");
console.log(items); // Logs all elements with class "item"

Using querySelector and querySelectorAll

let firstItem = document.querySelector(".item"); // First element with class "item"
let allItems = document.querySelectorAll(".item"); // All elements with class "item"

---

3. Modifying DOM Elements

Changing Content

You can update the text or HTML inside an element using:

• innerText: Updates the visible text.
• innerHTML: Updates the HTML content.

let title = document.getElementById("title");
title.innerText = "Updated Title"; // Changes visible text
title.innerHTML = "<strong>Updated Title</strong>"; // Adds HTML formatting

Changing Styles

You can directly modify the CSS styles of an element.

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

Adding or Removing Classes

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

---

4. Handling Events

Events allow you to make your web pages interactive. Here are some common event types and how to handle them.

Inline Event Handling

In your HTML:

<button onclick="alert('Button Clicked!')">Click Me</button>

Using addEventListener

This approach is preferred as it separates JavaScript from HTML.

let button = document.getElementById("btn");
button.addEventListener("click", function () {
  alert("Button Clicked!");
});

Common Events

• click: Triggered when an element is clicked.
• mouseover: Triggered when the mouse hovers over an element.
• keyup: Triggered when a key is released.

Example:

  
    <h1 id="Welcome">Welcome</h1>
    <p>This is a paragraph.</p>
  

---

5. Project: To-Do List

Let’s combine what you’ve learned into a simple To-Do List application.

HTML Structure

Document
 └── html
      └── body
           ├── h1
           └── p

How It Works

1. User types a task in the input field.
2. Clicking "Add Task" creates a new
3. element with the task.
4. Each task has a "Delete" button to remove it.

---

6. Key Takeaways

1. DOM Access: Use methods like getElementById and querySelector.
2. DOM Modification: Change content, styles, and classes dynamically.
3. Event Handling: Use addEventListener to make your pages interactive.
4. Practice Project: Build a to-do list to reinforce your knowledge.

---

Practice Tasks for Day 7

1. Add a "Mark as Done" feature to your to-do list.
2. Create a shopping list app where users can input items and their quantities.
3. Experiment with event types like mouseover and keydown in a small project.

---

Next Steps

Tomorrow, on Day 8, we’ll explore Error Handling and Debugging, learning how to handle unexpected issues in your JavaScript code. See you then!

The above is the detailed content of DOM Manipulation in JavaScript. For more information, please follow other related articles on the PHP Chinese website!