DOM (Document Object Model) Cho Người Mới Bắt Đầu

Nguyễn Đạt

Trong bài viết Khác biệt giữa Attribute và Property gần đây tác giả có đề cập tới khái niệm DOM hay Document Object Model. Tuy nhiên sau đó có một số độc giả đã đặt ra thắc mắc không hiểu chính xác thì DOM là gì.

Bài viết bổ sung này sẽ giải thích về khái niệm DOM theo một cách đơn giản về dễ hiểu nhất có thể để các bạn độc giả sau khi đi hết bài viết sẽ tự tin sử dụng thuật ngữ này mà không sợ nhầm lẫn.

DOM Là Gì

DOM được định nghĩa là một giao diện lập trình ứng dụng hay API dành cho các loại văn bản HTML và XML. DOM quy định cấu trúc của văn bản HTML và XML qua đó giúp lập trình viên có thể dễ quản lý văn bản HTML và XML.

Tuy nhiên nếu bạn là người mới tìm hiểu về HTML và JavaScript thì có thể định nghĩa trên sẽ rất khó hiểu và không cung cấp được nhiều thông tin hữu ích. Để phân tích khái niệm trên chúng ta cùng bắt đầu một ví dụ với một tập tin HTML có nội dung như sau:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOM Là Gì - Codehub.vn</title>
</head>
<body>
    <p id="para"><strong>DOM</strong> là viết tắt của <strong>Document Object Model</strong></p>
</body>
</html>

Điều gì xảy ra khi bạn mở tập tin HTML trên sử dụng trình duyệt? Thay vì nhìn thấy mã HTML của trang thì bạn sẽ nhìn thấy trình duyệt hiển thị kết quả như sau:

Cấu trúc DOM của trang

Và để hiển thị kết quả này thì trình duyệt đã tạo ra cấu trúc DOM tương ứng với mã HTML có trong file. Để xem cấu trúc DOM của trang bạn có thể mở công cụ developer tools của trình duyệt và đi tới tab Element.

Nhưng sao cái cấu trúc DOM này nó giống y chang mã HTML trong file? Nếu bạn đang thắc mắc với câu hỏi này thì hãy đọc tiếp phần sau.

Phân Biệt DOM và HTML

Cấu trúc DOM mà bạn mới thấy ở trên còn được gọi là cây DOM vì nó khá tương tự với cấu trúc của một cây trong đó bao gồm các nhánh mẹ và nhánh con. Với cấu trúc DOM thì các nhánh ở đây chính là các đối tượng DOM. Mỗi đối tượng DOM có thể bao gồm trong nó các đối tượng DOM con hoặc đối tượng DOM cha hoặc cả hai. Ví dụ với phần tử body sẽ có một đối tượng DOM tương ứng đại diện cho nó, tương tự cho phần tử p với giá tị thuộc tính id="param" cũng sẽ có một đối tượng DOM được tạo ra.

Văn bản HTMl được gắn với đối tượng DOM là document. Để xem đối tượng này bạn đi tới tab Console và nhập vào câu lệnh dưới đây sau đó nhấn Enter:

document

Khi rê chuột lên kết quả hiển thị của câu lệnh trên bạn sẽ thấy toàn bộ trang sẽ được phủ màu nền xanh nhạt như hình dưới đây:

Phần tử DOM document

Điều này là bởi vì đối tượng document được tạo ra để phản ánh toàn bộ trang văn bản HTMl.

Tiếp theo bạn chạy câu lệnh sau:

document.getElementById("para")

Bạn còn nhớ DOM có cấu trúc cây trong đó mỗi đối tượng có thể có các đối tượng con hoặc cha hoặc cả hai? Ở đây đối tượng document chứa đối tượng các đối tượng con và thông qua việc sử dụng phương thức (hay hàm)
getElementById("para") trên đối tượng này chúng ta sẽ tìm ra đối tượng con bên trong đó với thuộc tính id="para".

Khi rê chuột lên đối tượng này bạn sẽ thấy khung chứa văn bản trong cặp thẻ <p id="param">...</p> được phủ màu nền xanh nhạt như hình dưới đây:

Phần tử DOM paragraph

Ngoài ra bạn cũng thấy hai dải viền màu cam bao phía ngoài (trên và dưới) khung văn bản. Đây chính là khoảng đệm padding được trình duyệt tạo ra mặc định cho phần tử p.

Tiếp theo bạn chạy câu lệnh sau:

typeof document.getElementById("para")

Thuật toán typeof ở trên sẽ hiển thị kiểu dữ liệu của giá trị trả về từ document.getElementById("para"), ở đây là object:

typeof trên phần tử DOM paragraph

Bây giờ bạn quay lại tab Console và chạy câu lệnh sau:

document.getElementById("para").innerHTML

Bạn sẽ thấy kết quả như trong hình dưới đây:

Giá trị innerHTML của phần tử DOM paragraph

innerHTML là một property của đối tượng được tạo ra từ document.getElementById("para") dùng để lấy ra nội dung mã HTML bên trong phần tử p#para.

Tiếp tục vẫn trên tab Console bạn chạy câu lệnh sau:

document.getElementById("para").innerHTML = "Dom Là Gì"

Bạn có thấy thay đổi được tạo ra trên trang sau khi chạy câu lệnh? Nội dung của phần tử p#para đã được thay đổi giống như hình dưới đây:

Thay đổi giá trị innerHTML của phần tử DOM paragraph

Tuy nhiên khi bạn view source của trang trên trình duyệt bạn vẫn thấy mã HTML không thay đổi:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOM Là Gì - Codehub.vn</title>
</head>
<body>
    <p id="para"><strong>DOM</strong> là viết tắt của <strong>Document Object Model</strong></p>
</body>
</html>

Như vậy giữa DOM và HTML khác nhau như thế nào? Bảng dưới đây tóm tắt lại một số điểm chính mà bạn cần lưu ý:

  • Mã HTML được viết bởi developer trong khi đó DOM được tạo ra bởi JavaScript của trình duyệt.
  • Sau khi được trình duyệt tải về máy thì mã HTML không thay đổi. Ngược lại DOM có thể được thay đổi thông qua JavaScript.
  • Nội dung các phần tử HTML (và cả DOCTYPE) sẽ được phản ánh bởi đối tượng DOM tương ứng có trong cây DOM. Tuy nhiên không phải bất cứ đối tượng DOM nào cũng gắn với phần tử HTML.

Một trường hợp dễ phát hiện ra khi cấu trúc DOM bạn thấy trên tab Elements và mã HTML khác nhau đó là khi bạn tạo ra một file HTML không đúng chuẩn. Ví dụ như khi bạn tạo một bảng sử dụng thẻ <table> nhưng quên không đặt thẻ <tbody> bên trong như sau:

<table>
    <tr>
        <td>Cột 1</td>
        <td>Cột 2</td>
    </tr>
</table>

Lúc này khi hiển thị trang trên trình duyệt rồi sau đó xem cấu trúc của DOM thì bạn sẽ thấy trình duyệt sẽ tự cập nhật cấu trúc của bảng để phần tử tbody xuất hiện.

1 Phản Hồi

Thêm Phản Hồi

Bài Viết Liên Quan