- Authors
- Name
- Nguyễn Đức Xinh
- Published on
- Published on
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!