HOME › học javascript - lập trình javascript cơ bản>>13. dom trong javascript

DOM là gì trong JavaScript

26 tháng 12 ,2021

Cùng tìm hiểu về DOM trong JavaScript. Bạn sẽ biết DOM là gì trong JavaScript, cũng như các thành phần của DOM sau bài học này.

DOM là gì trong JavaScript

DOM trong JavaScript là viết tắt của cụm từ Document Object Model, dịch sang tiếng Việt là Mô hình Đối tượng Tài liệu, là một API chuyên dụng để xử lý các tài liệu HTML và XML dưới dạng các đối tượng(object). DOM trước đây đã được tiêu chuẩn hóa bởi cơ quan tiêu chuẩn W3C, nhưng bây giờ đã được tiêu chuẩn hóa bởi WHATWG.

Các tiêu chuẩn về DOM đã được WHATWG chuẩn hóa tại trang web chính thức https://dom.spec.whatwg.org/.

Như tên gọi của nó, DOM - Mô hình Đối tượng Tài liệu giúp xử lý các phần tử(element) có trong các tài liệu HTML/XML, cũng như dữ liệu văn bản(text) có trong các phần tử đó dưới dạng các Đối Tượng(object).

DOM coi các tài liệu HTML/XML dưới dạng một tổ hợp có thứ bậc của các đối tượng. Và JavaScript cũng như rất nhiều ngôn ngữ lập trình web khác đều cung cấp các API chuyên dụng để xử lý tổ hợp đối tượng này.

Node là gì trong JavaScript

Trong DOM, một đối tượng trong tổ hợp tạo nên tài liệu HTML/XML được gọi là một Node(nút). Tùy thuộc vào kiểu đối tượng mà chúng ta sẽ có các kiểu Node khác nhau, ví dụ như Node phần tử(element node), Node văn bản(text node) hoặc Node thuộc tính(attribute node) chẳng hạn.

Nói một cách khác thì Node chính là đơn vị nhỏ nhất để cấu tạo nên DOM.

Bằng cách sử dụng JavaScript, chúng ta có thể thao tác với các Node trong DOM để sửa tài liệu HTML/XML và qua đó trực tiếp thay đổi nội dung hiển thị trên web. Ví dụ, chúng ta có thể dễ dàng thêm các đối tượng như dòng văn bản, hộp, nút v.v. vào web, thêm các xử lý khi click vào nút, cũng như là tinh chỉnh thiết kế đồ họa của các đối tượng thông qua việc sửa đổi CSS.

Cấu trúc của DOM trong JavaScript

Như đã nói ở trên thì DOM coi các tài liệu HTML/XML dưới dạng một tổ hợp có thứ bậc của các đối tượng, mỗi đối tượng trong đó được gọi là 1 Node, và các Node được phân loại dựa theo kiểu của đối tượng mà nó đại diện.

Ví dụ cụ thể, chúng ta có một trang HTML như sau:

<!DOCTYPE HTML>
<html>
<head>
<title>Hẹn hò</title>
</head>
<body>
<h1>Chào em</h1>
<p id="hello">
Hẹn em <strong>Hồ Tây</strong> nhé!
</p>
</body>
</html>

Với ví dụ này thì này thì DOM sẽ coi trang HTML dưới dạng một tổ hợp có thứ bậc của các đối tượng như sau:

Giống như trên thì Node có thứ bậc cao nhất trong DOM là Document Node. Dưới Document Node sẽ có các Node khác được xếp theo thứ bậc và lên kết với nhau. Ví dụ như các Element Node dùng để biểu diễn các phần tử của html, các Text Node dùng để biểu nội dung văn bản có trong các phần tử, hay các Attribute Node dùng để biểu diễn các thuộc tính của phần tử, ví dụ như thuộc tính id chẳng hạn.

Ngoài các loại Node trên, trong DOM còn có nhiều loại khác, ví dụ như comment node biểu diễn các đối tượng ghi chú, hoặc là blank node biểu diễn các khoảng trắng trong DOM.

Quan hệ giữa các Node trong DOM

Trong một Document Node, các Node có thứ bậc nhỏ hơn sẽ tồn tại 2 loại quan hệ là quan hệ anh em và quan hệ cha con, dựa theo vị trí của chúng trong tổ hợp.

Ví dụ với trang HTML ở trên thì quan hệ giữa các Node trong DOM như sau:

Giống như trên thì body node là node cha của h1 node và p node. Ngược lại thì h1 node và p node chính là node con của body node. Và chúng là node anh em của nhau.

Việc xác định quan hệ giữa các node trong DOM rất quan trọng trong việc xác định vị trí của các node khi cần thao tác với chúng trong DOM.

Ví dụ sử dụng DOM trong JavaScript

Ở phần trên chúng ta đã tìm hiểu về DOM cũng như các thành phần cấu trúc của nó rồi.

Sau đây hãy cùng xem một ví dụ đơn giản về thao tác với Node trong DOM bằng đoạn code JavaScript dưới đây.

<script>
function clickButton(){
  document.getElementById("sample").innerHTML = "Cảm ơn！";
}
</script>

<input type="button" value="Hãy click" onclick="clickButton()">
<p id="sample">Hãy click</p>

-- --

Xin chào

-- --

Giống như trên thì chúng ta có thể dễ dàng lấy node trong DOM và tiến hành thay đổi nó một cách dễ dàng.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về DOM trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.