Site logo
Loading...

JavaScript: The Complete Guide

Tìm hiểu DOM Manipulation trong JavaScript: Hướng dẫn chi tiết

Giới thiệu

DOM (Document Object Model) là một giao diện lập trình cho các tài liệu HTML và XML. Nó đại diện cho cấu trúc của tài liệu dưới dạng cây, nơi mỗi nút (node) là một phần tử của tài liệu. DOM Manipulation là kỹ thuật sử dụng JavaScript để truy cập và thay đổi nội dung, cấu trúc, hoặc kiểu dáng của trang web.

DOM là gì?

DOM là một mô hình cây phân cấp, trong đó:

  • Document là gốc của cây.
  • Element là các nút con đại diện cho các thẻ HTML.
  • Text là các nút con chứa nội dung văn bản.

Ví dụ về DOM

HTML mẫu:

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <h1 id="title">Hello, World!</h1>
    <p class="description">This is a paragraph.</p>
  </body>
</html>

Cấu trúc DOM tương ứng:

Document
 └── html
      ├── head
      │    └── title
      └── body
           ├── h1#title
           └── p.description

Truy cập phần tử DOM

1. Sử dụng getElementById

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

2. Sử dụng getElementsByClassName

const paragraphs = document.getElementsByClassName("description");
console.log(paragraphs[0].textContent); // Output: This is a paragraph.

3. Sử dụng querySelector và querySelectorAll

const title = document.querySelector("#title");
console.log(title.textContent); // Output: Hello, World!

const paragraphs = document.querySelectorAll(".description");
paragraphs.forEach((p) => console.log(p.textContent));

Thay đổi nội dung và thuộc tính

1. Thay đổi nội dung

const title = document.getElementById("title");
title.textContent = "Welcome to JavaScript!";
console.log(title.textContent); // Output: Welcome to JavaScript!

2. Thay đổi thuộc tính

const link = document.createElement("a");
link.href = "https://example.com";
link.textContent = "Visit Example";
document.body.appendChild(link);
console.log(link.href); // Output: https://example.com

Thêm và xóa phần tử

1. Thêm phần tử

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

2. Xóa phần tử

const title = document.getElementById("title");
title.remove();

Thay đổi kiểu dáng (CSS)

1. Sử dụng style

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

2. Thêm hoặc xóa class

const title = document.getElementById("title");
title.classList.add("highlight");
title.classList.remove("highlight");

Sự kiện DOM

1. Lắng nghe sự kiện

const button = document.createElement("button");
button.textContent = "Click Me";
document.body.appendChild(button);

button.addEventListener("click", () => {
  alert("Button clicked!");
});

2. Các loại sự kiện phổ biến

  • click: Khi người dùng nhấp chuột.
  • mouseover: Khi chuột di chuyển qua phần tử.
  • keydown: Khi người dùng nhấn phím.

So sánh các phương pháp truy cập DOM

Phương pháp Mô tả Hỗ trợ trình duyệt
getElementById Truy cập phần tử qua ID Tất cả
getElementsByClassName Truy cập phần tử qua class Tất cả
querySelector Truy cập phần tử qua CSS selector IE8+
querySelectorAll Truy cập tất cả phần tử qua CSS selector IE8+

Ví dụ thực tế: Tạo danh sách động

HTML mẫu:

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

JavaScript:

const list = document.getElementById("list");
const button = document.getElementById("addItem");

button.addEventListener("click", () => {
  const newItem = document.createElement("li");
  newItem.textContent = `Item ${list.children.length + 1}`;
  list.appendChild(newItem);
});

Kết luận

DOM Manipulation là một kỹ năng quan trọng trong phát triển web. Hiểu cách truy cập, thay đổi, và tương tác với DOM sẽ giúp bạn xây dựng các ứng dụng web động và hấp dẫn. Hãy thực hành các ví dụ trên để nắm vững kiến thức này.

Nếu bạn có bất kỳ câu hỏi nào, hãy để lại bình luận bên dưới!