Hiểu Rõ Về Mô Hình Đối Tượng Tài Liệu (DOM) Trong Phát Triển Web Frontend

Mô Hình Đối Tượng Tài Liệu (DOM) (Document Object Model) là cách trình duyệt diễn giải các tài liệu HTML, XML thành một cấu trúc dạng cây. Nó cho phép các ngôn ngữ lập trình như JavaScript truy cập và thay đổi động nội dung, cấu trúc và kiểu dáng của trang web. Mỗi thẻ HTML trong DOM là một đối tượng, được gọi là một "nút". Thông qua DOM, nhà phát triển có thể sử dụng JavaScript để tương tác với trang web, ví dụ như thay đổi nội dung động, phản hồi sự kiện của người dùng.

  1. Cấu Trúc Cây DOM

Cây DOM là một cấu trúc phân cấp dạng cây được tạo nên từ các nút, các loại nút phổ biến nhất bao gồm:

  • Nút Element: Các thẻ HTML (như <div>, <p>, v.v.).
  • Nút Text: Nội dung văn bản bên trong các phần tử.
  • Nút Attribute: Các thuộc tính của phần tử (như class="ví dụ").
  • Nút Comment: Các ghi chú.

Ví dụ, đoạn HTML sau sẽ được diễn giải thành cây DOM:

<html>
  <head>
    <title>Tài Liệu</title>
  </head>
  <body>
    <h1>Xin Chào Thế Giới</h1>
    <p>Đây là một đoạn văn.</p>
  </body>
</html>

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

html
├── head
│   └── title ("Tài Liệu")
└── body
    ├── h1 ("Xin Chào Thế Giới")
    └── p ("Đây là một đoạn văn.")
  1. Truy Cập và Thao Tác với DOM

Bằng JavaScript, chúng ta có thể truy cập và thao tác với các nút DOM. Các phương thức phổ biến bao gồm:

Truy Cập Phần Tử DOM
  • document.getElementById(id): Tìm phần tử thông qua thuộc tính id.
  • document.getElementsByClassName(className): Tìm phần tử thông qua tên lớp.
  • document.getElementsByTagName(tênThẻ): Tìm phần tử thông qua tên thẻ.
  • document.querySelector(bộChọn): Tìm phần tử đầu tiên khớp với bộ chọn CSS.
  • document.querySelectorAll(bộChọn): Tìm tất cả các phần tử khớp với bộ chọn CSS.
const tieuDe = document.getElementById('tieuDe');  // Truy cập phần tử có id là tieuDe
const doanVan = document.getElementsByTagName('p');  // Truy cập tất cả thẻ p
    doanVanDauTien = document.querySelector('p');  // Truy cập thẻ p đầu tiên
Thay Đổi DOM
  • Thay đổi nội dung phần tử:
  • element.<strong>innerHTML</strong>: Lấy hoặc đặt nội dung HTML của phần tử.
  • element.<strong>textContent</strong>: Lấy hoặc đặt nội dung văn bản thuần túy của phần tử.
const tieuDe = document.getElementById('tieuDe');
tieuDe.innerHTML = 'Tiêu Đề Mới';  // Thay đổi nội dung HTML của thẻ h1
tieuDe.textContent = 'Nội Dung Văn Bản Mới';  // Thay đổi thành nội dung văn bản thuần túy
  • Thay đổi thuộc tính phần tử:
  • element.<strong>setAttribute</strong>(thuộcTính, giáTrị): Đặt thuộc tính cho phần tử.
  • element.<strong>getAttribute</strong>(thuộcTính): Lấy giá trị thuộc tính của phần tử.
  • element.<strong>classList</strong>: Thao tác với danh sách lớp của phần tử.
const lienKet = document.querySelector('a');
lienKet.setAttribute('href', 'https://vi.example.com');  // Thay đổi địa chỉ liên kết
lienKet.classList.add('hoatDong');  // Thêm lớp có tên hoatDong
lienKet.classList.remove('hoatDong');  // Loại bỏ lớp hoatDong
  • Thay đổi kiểu dáng:
  • Thông qua element.style để thay đổi trực tiếp kiểu dáng nội tuyến của phần tử.
const tieuDe = document.getElementById('tieuDe');
tieuDe.style.color = 'đỏ';  // Thay đổi màu sắc phần tử
tieuDe.style.fontSize = '24px';  // Thay đổi kích thước chữ
  • Thêm và Xóa nút

  • document.createElement(tênThẻ): Tạo phần tử DOM mới.

  • cha.appendChild(phầnTử): Thêm một nút con vào nút cha.

  • cha.removeChild(phầnTử): Loại bỏ một nút con khỏi nút cha.

Thẻ: DOM JavaScript HTML css Frontend Development

Đăng vào ngày 1 tháng 6 lúc 03:04

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn