search

Home >Web Front-end >JS Tutorial >DOM Manipulation in JavaScript

DOM Manipulation in JavaScript

DDD
DDDOriginal
2024-12-20 20:12:11729browse

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:

<html>
  <body>
    <h1>Welcome</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

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:

<html>
  <body>
    <h1>Welcome</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

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!

JavaScript css html Object for date Error using Interface Event delete dom this innerHTML input li Access
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JSON vs. Object Literal Notation: What are the Key Differences?Next article：JSON vs. Object Literal Notation: What are the Key Differences?

Related articles

See more