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ó biểu diễn cấu trúc của tài liệu dưới dạng cây, trong đó mỗi thành phần của tài liệu (như thẻ HTML, thuộc tính, hoặc văn bản) là một node (nút) trong cây. DOM cho phép các ngôn ngữ lập trình như JavaScript truy cập, thao tác và thay đổi cấu trúc, nội dung, và kiểu dáng của tài liệu web một cách động.
DOM tổ chức tài liệu HTML thành một cây phân cấp (tree structure), với document là nút gốc (root node), từ đó các nhánh chứa các nút con khác như các thẻ HTML, văn bản, và thuộc tính.
Ví dụ, với tài liệu HTML đơn giản sau:
<!DOCTYPE html>
<html>
<head>
<title>Trang Web của Tôi</title>
</head>
<body>
<h1>Chào mừng!</h1>
<p>Đây là một đoạn văn bản.</p>
</body>
</html>
DOM sẽ tổ chức tài liệu này thành một cây như sau:
document
│
├── html
│ ├── head
│ │ └── title
│ │ └── "Trang Web của Tôi"
│ └── body
│ ├── h1
│ │ └── "Chào mừng!"
│ └── p
│ └── "Đây là một đoạn văn bản."
Mỗi thành phần HTML là một nút (node) trong cây DOM, và các nút này có thể chứa các nút con (như văn bản hoặc các thẻ HTML khác).
DOM không chỉ là một mô hình cấu trúc tài liệu mà còn là một API (giao diện lập trình ứng dụng) cho phép các ngôn ngữ lập trình thao tác với tài liệu. DOM API cung cấp các phương thức và thuộc tính để truy xuất và thay đổi nội dung của tài liệu.
Một số tính năng chính của DOM bao gồm:
Truy cập các phần tử HTML: Bạn có thể truy cập các phần tử HTML trong tài liệu thông qua DOM. Ví dụ:
const heading = document.querySelector('h1');
console.log(heading.textContent); // "Chào mừng!"
Thay đổi nội dung và cấu trúc: Bạn có thể thêm, sửa, hoặc xóa các phần tử HTML, thuộc tính, hoặc nội dung văn bản thông qua DOM.
Ví dụ để thay đổi nội dung của thẻ <h1>:
const heading = document.querySelector('h1');
heading.textContent = 'Xin chào, thế giới!';
Xử lý sự kiện (Event Handling): DOM cho phép bạn gắn các trình xử lý sự kiện (event handlers) vào các phần tử, chẳng hạn như nhấp chuột (click), di chuột (hover), và nhập liệu (input).
Ví dụ, xử lý sự kiện nhấp chuột vào một nút:
const button = document.querySelector('button');
button.addEventListener('click', function() {
alert('Bạn vừa nhấp vào nút!');
});
Tương tác với CSS: DOM cũng có thể thay đổi kiểu dáng (CSS) của các phần tử.
Ví dụ, thay đổi màu chữ của thẻ <p>:
const paragraph = document.querySelector('p');paragraph.style.color = 'red';
document, bạn có thể truy cập các phần tử khác như thẻ <html>, <body>, và các phần tử con của chúng.<div>, <p>, <h1>, v.v.) trong DOM được gọi là một element. Các element có thể chứa các element khác hoặc chứa nội dung văn bản.class, id).document.getElementById(): Truy xuất phần tử theo id.document.querySelector(): Truy xuất phần tử theo CSS selector.document.getElementsByClassName(): Truy xuất các phần tử theo class.document.getElementsByTagName(): Truy xuất các phần tử theo tên thẻ.element.textContent: Đọc hoặc thay đổi nội dung văn bản bên trong phần tử.element.innerHTML: Đọc hoặc thay đổi nội dung HTML bên trong phần tử (bao gồm các thẻ HTML con).element.appendChild(): Thêm phần tử con vào cuối phần tử hiện tại.element.removeChild(): Xóa phần tử con khỏi phần tử hiện tại.element.setAttribute(): Thay đổi thuộc tính của một phần tử.element.getAttribute(): Truy xuất giá trị thuộc tính của một phần tử.DOM là một phần quan trọng trong việc tương tác và xây dựng các ứng dụng web động. Nó cho phép các lập trình viên truy cập và thay đổi cấu trúc tài liệu HTML, lắng nghe và xử lý sự kiện, cũng như thay đổi giao diện trang web một cách động. DOM giúp JavaScript có thể thao tác trực tiếp với giao diện người dùng trên trình duyệt, là nền tảng của các trang web hiện đại.
