Chuyển tới nội dung

Cách Giải Thích Dễ Hiểu Của DOM HTML

  • bởi

DOM HTML (Document Object Model) là nền tảng cho sự tương tác giữa trang web và người dùng. Hãy tưởng tượng DOM như một cây gia phả, nơi mỗi thành viên đại diện cho một phần tử HTML trên trang web.

DOM HTML Là Gì?

DOM HTML là một giao diện lập trình ứng dụng (API) cho phép truy cập và thao tác các phần tử HTML trên trang web. Nó định nghĩa cấu trúc logic của tài liệu HTML và cách các phần tử được truy cập và thao tác. Nói một cách đơn giản, DOM biến đổi mã HTML tĩnh thành một cấu trúc động, cho phép JavaScript tương tác và thay đổi nội dung, kiểu dáng và hành vi của trang web.

Tại Sao DOM HTML Quan Trọng?

DOM đóng vai trò then chốt trong việc tạo ra các trang web động và tương tác. Nó cho phép:

  • Thay đổi nội dung động: Cập nhật nội dung trang web mà không cần tải lại toàn bộ trang.
  • Xử lý sự kiện người dùng: Phản hồi các hành động của người dùng như nhấp chuột, di chuột, nhập liệu, v.v.
  • Tạo hiệu ứng động: Thêm hiệu ứng chuyển động, hoạt ảnh và các cải tiến trực quan khác.
  • Xây dựng ứng dụng web một trang (SPA): Tạo trải nghiệm người dùng liền mạch và nhanh chóng.

Cấu Trúc Của DOM HTML

DOM được tổ chức dưới dạng một cây với các nút (node). Mỗi nút đại diện cho một phần tử HTML, một thuộc tính, văn bản hoặc một phần thông tin khác trên trang web. Nút gốc của cây là document, đại diện cho toàn bộ tài liệu HTML.

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

JavaScript cung cấp nhiều cách để truy cập các phần tử DOM:

  • Theo ID: document.getElementById("id")
  • Theo lớp: document.getElementsByClassName("class")
  • Theo tên thẻ: document.getElementsByTagName("tag")
  • Theo bộ chọn CSS: document.querySelector("selector"), document.querySelectorAll("selector")

Thao Tác Các Phần Tử DOM

Sau khi truy cập được phần tử DOM, bạn có thể thao tác nó bằng cách sử dụng các thuộc tính và phương thức của nó:

  • Thay đổi nội dung: element.innerHTML = "Nội dung mới"
  • Thay đổi thuộc tính: element.setAttribute("thuộc tính", "giá trị")
  • Thay đổi kiểu dáng: element.style.thuộcTính = "giá trị"
  • Thêm/xóa phần tử: parent.appendChild(child), parent.removeChild(child)

Ví Dụ Về DOM HTML

<!DOCTYPE html>
<html>
<head>
  <title>Ví dụ DOM HTML</title>
</head>
<body>
  <h1 id="myHeading">Tiêu đề</h1>
  <p>Đoạn văn bản.</p>

  <script>
    // Thay đổi nội dung của tiêu đề
    document.getElementById("myHeading").innerHTML = "Tiêu đề mới";
  </script>
</body>
</html>

Trong ví dụ này, đoạn mã JavaScript sử dụng document.getElementById("myHeading") để truy cập phần tử h1 có id là “myHeading” và thay đổi nội dung của nó thành “Tiêu đề mới”.

Lời Kết

DOM HTML là một phần không thể thiếu của lập trình web phía máy khách. Nó cung cấp cầu nối giữa mã HTML và JavaScript, cho phép bạn tạo ra các trang web động, tương tác và thân thiện với người dùng. Hiểu rõ về DOM sẽ giúp bạn nâng cao kỹ năng lập trình web và tạo ra những trải nghiệm web tuyệt vời.