1. DOM là gì?
DOM (Document Object Model) là mô hình đối tượng tài liệu, đại diện cho cấu trúc của tài liệu HTML hoặc XML dưới dạng cây (tree) các nút (node). Mỗi phần tử của tài liệu được xem như một nút trong cây.
2. Truy cập phần tử DOM
Để truy cập các phần tử trong DOM, JavaScript cung cấp một số phương pháp phổ biến:
- getElementById(): Trả về 1 phần tử với id cụ thể.
var element = document.getElementById("myElement");
//Ví dụ: ta có thẻ HTML như sau: <h1 id="tieu-de-bai-viet">Tiêu đề bài viết</h1>
//Muốn truy cập được element này ta dùng như sau:
var element = document.getElementById("tieu-de-bai-viet");- getElementsByClassName(): Trả về danh sách các phần tử với lớp CSS cụ thể
var elements = document.getElementsByClassName("myClass");
//Ví dụ: ta có các thẻ HTML như sau:
<h1 class="article-header">Tiêu đề bài viết 1</h1>
<h2 class="article-header">Tiêu đề bài viết 2</h2>
//Muốn truy cập được các elements này ta dùng như sau:
var element = document.getElementsByClassName("article-header");- getElementsByTagName(): Trả về danh sách các phần tử với tên thẻ cụ thể.
var elements = document.getElementsByTagName("div");- querySelector(): Trả về phần tử đầu tiên phù hợp với một CSS selector cụ thể.
var element = document.querySelector(".myClass");- querySelectorAll(): Trả về danh sách tất cả các phần tử phù hợp với một CSS selector cụ thể.
var elements = document.querySelectorAll(".myClass");Đối với các dạng querySelector thì chúng ta cần viết theo dạng selector của CSS.
VD: querySelector("#tieu-de-bai-viet") hoặc querySelector(".article-header') hoặc querySelectorAll(".article-header");
3. Thay đổi nội dung của phần tử
innerHTML: Sử dụng để thay đổi hoặc lấy nội dung HTML bên trong một phần tử.
element.innerHTML = "<p>New Content</p>";innerText hoặc textContent: Sử dụng để thay đổi hoặc lấy nội dung văn bản bên trong một phần tử.
element.innerText = "New Text Content";4. Thay đổi thuộc tính phần tử
setAttribute(): Sử dụng để thêm hoặc cập nhật giá trị thuộc tính của phần tử.
element.setAttribute("class", "newClass");getAttribute(): Sử dụng để lấy giá trị của thuộc tính.
var value = element.getAttribute("id");removeAttribute(): Sử dụng để xóa thuộc tín
h khỏi phần tử.
element.removeAttribute("style");5. Thay đổi kiểu dáng của phần tử
style: Truy cập trực tiếp vào các thuộc tính CSS.
element.style.color = "blue";
element.style.fontSize = "20px";6. Thêm và xóa các phần tử
createElement(): Tạo một phần tử HTML mới.
var newElement = document.createElement("div");appendChild(): Thêm phần tử con vào cuối danh sách con của một phần tử cha.
var parent = document.getElementById("parentElement");
parent.appendChild(newElement);removeChild(): Xóa một phần tử con khỏi phần tử cha.
var child = document.getElementById("childElement");
parent.removeChild(child);insertBefore(): Chèn phần tử trước một phần tử con khác của phần tử cha.
var anotherChild = document.getElementById("anotherChild");
parent.insertBefore(newElement, anotherChild);7. Thêm và xóa lớp CSS
classList.add(): Thêm một hoặc nhiều lớp CSS vào phần tử.
element.classList.add("class1", "class2");classList.remove(): Xóa một hoặc nhiều lớp CSS từ phần tử.
element.classList.remove("class1", "class2");classList.toggle(): Bật hoặc tắt một lớp CSS, nghĩa là thêm lớp nếu nó chưa có và ngược lại.
element.classList.toggle("active");8. Sự kiện (Events)
Để làm cho trang web tương tác, bạn có thể thêm sự kiện vào các phần tử DOM.
addEventListener(): Thêm sự kiện cho một phần tử.
element.addEventListener("click", function() {
alert("Element clicked!");
});9. Ví dụ cơ bản
Dưới đây là một ví dụ đơn giản về việc thay đổi nội dung của một phần tử khi người dùng nhấp vào một nút.
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation</title>
</head>
<body>
<p id="text">Original Text</p>
<button id="changeTextButton">Change Text</button>
<script>
var button = document.getElementById("changeTextButton");
button.addEventListener("click", function() {
var text = document.getElementById("text");
text.innerText = "Text Changed!";
});
</script>
</body>
</html>
Khi người dùng nhấp vào nút, nội dung của đoạn văn sẽ được thay đổi.
10. Kết luận
DOM Manipulation là một trong những kỹ năng cơ bản nhưng rất quan trọng trong lập trình web. Việc hiểu và sử dụng thành thạo DOM Manipulation sẽ giúp bạn tạo ra các trang web tương tác và động hơn.
Nếu bạn có câu hỏi cụ thể nào về DOM Manipulation hoặc cần thêm ví dụ, hãy cho tôi biết nhé!
Bài viết liên quan
Làm quen với VueJS
Nếu bạn mới bắt đầu học lập trình front-end, thì Vue.js là một gợi ý không thể bỏ qua vì cách tiếp cận và sử dụng rất dễ dàng.
Lý thuyết về Cookie & Session & Localstorage
Cookie thích hợp cho việc lưu trữ thông tin nhỏ và ngắn hạn, Session là lựa chọn tốt để lưu trữ thông tin bảo mật như phiên làm việc
Xử lý bất đồng bộ với callback, promise, và async/await trong JavaScript
Bất đồng bộ là một khái niệm quan trọng trong lập trình, đặc biệt là trong các ứng dụng web và xử lý tác vụ như tải dữ liệu từ máy chủ, đọc file từ hệ thống
Quản lý nội bộ, quản lý khách hàng, GYM-YOGA-AEROBIC, Spa, Quản Lý Bán Hàng…
Thiết kế website chuyên nghiệp, chuẩn SEO
Ứng Dụng Đa Nền Tảng Kết Nối Mọi Thiết Bị
Xây dựng chiến lược marketing online phù hợp với nhu cầu doanh nghiệp
