×

Định nghĩa và ứng dụng cơ bản của DOM trong lập trình web

Avatar of luongtu
luongtu 0 Views

DOM (Document Object Model) là một tiêu chuẩn lập trình cho các tài liệu HTML và XML. Nó định nghĩa cấu trúc hợp lý của các tài liệu và cung cấp một cách để truy cập và thay đổi nội dung, cấu trúc và kiểu của chúng. DOM đại diện cho tài liệu dưới dạng một cấu trúc cây (tree structure) trong đó mỗi thành phần (element) của tài liệu là một đối tượng (object).

Cấu Trúc Của DOM

DOM tổ chức tài liệu HTML hoặc XML như một cấu trúc cây, với mỗi nút trong cây đại diện cho một phần của tài liệu:

  1. Nút Gốc (Root Node): Đỉnh của cây, thường là đối tượng document trong trường hợp HTML.
  2. Nút Phần Tử (Element Nodes): Các phần tử HTML như <div>, <p>, <a>, v.v.
  3. Nút Thuộc Tính (Attribute Nodes): Các thuộc tính của phần tử HTML như class, id, src, v.v.
  4. Nút Văn Bản (Text Nodes): Nội dung văn bản bên trong các phần tử HTML.

Ví Dụ Về Cấu Trúc DOM

Xem xét một tài liệu HTML đơn giản sau:

<!DOCTYPE html>
<html>
<head>
  <title>Document Object Model</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Cấu trúc DOM cho tài liệu này có thể được hình dung như sau:

document
├── html
│   ├── head
│   │   └── title
│   │       └── "Document Object Model"
│   └── body
│       ├── h1
│       │   └── "Hello, World!"
│       └── p
│           └── "This is a paragraph."

Truy Cập và Thay Đổi DOM

JavaScript cung cấp nhiều phương thức để truy cập và thay đổi các phần tử của DOM. Dưới đây là một số phương thức phổ biến:

1. Truy Cập Các Phần Tử DOM

  • document.getElementById(id): Trả về phần tử có ID cụ thể.
  • document.getElementsByClassName(className): Trả về danh sách các phần tử có class cụ thể.
  • document.getElementsByTagName(tagName): Trả về danh sách các phần tử có tên thẻ cụ thể.
  • document.querySelector(selector): Trả về phần tử đầu tiên phù hợp với bộ chọn CSS.
  • document.querySelectorAll(selector): Trả về danh sách tất cả các phần tử phù hợp với bộ chọn CSS.

2. Thay Đổi Nội Dung và Thuộc Tính

  • element.innerHTML: Đọc hoặc ghi nội dung HTML của phần tử.
  • element.textContent: Đọc hoặc ghi nội dung văn bản của phần tử.
  • element.setAttribute(attribute, value): Thiết lập giá trị của một thuộc tính.
  • element.getAttribute(attribute): Lấy giá trị của một thuộc tính.

Ví Dụ

<!DOCTYPE html>
<html>
<head>
  <title>DOM Manipulation</title>
</head>
<body>
  <h1 id="header">Hello, World!</h1>
  <button onclick="changeText()">Click me</button>

  <script>
    function changeText() {
      var header = document.getElementById("header");
      header.textContent = "Hello, DOM!";
    }
  </script>
</body>
</html>

Trong ví dụ trên, khi người dùng nhấn nút "Click me", JavaScript sẽ thay đổi nội dung của phần tử <h1> từ "Hello, World!" thành "Hello, DOM!".

Tổng Kết

Document Object Model (DOM) là một tiêu chuẩn lập trình quan trọng cho các tài liệu HTML và XML. Nó cung cấp một cách để truy cập và thay đổi nội dung, cấu trúc và kiểu của tài liệu thông qua một cấu trúc cây logic. DOM là một phần cốt lõi của JavaScript trong trình duyệt và là cơ sở cho việc phát triển các ứng dụng web tương tác. Hiểu và làm việc với DOM là một kỹ năng thiết yếu cho bất kỳ nhà phát triển web nào.

  1. Cấu trúc của DOM: Tài liệu được biểu diễn dưới dạng cây, với các nút đại diện cho các phần tử, thuộc tính và văn bản.
  2. Truy cập DOM: Sử dụng các phương thức như getElementById, getElementsByClassName, và querySelector để truy cập các phần tử cụ thể.
  3. Thay đổi DOM: Sử dụng innerHTML, textContent, và setAttribute để thay đổi nội dung và thuộc tính của các phần tử.

DOM là nền tảng để xây dựng các trang web động và tương tác, cho phép các nhà phát triển tạo ra trải nghiệm người dùng phong phú và hấp dẫn.

Comments

Bài viết liên quan