Definition
Trình duyệt sử dụng DOM (Document Object Model), để biểu diễn văn bản HTML thành dạng một dạng dữ liệu có cấu trúc.
Cụ thể hơn, DOM sẽ biểu diễn code HTML thành các đối tượng có các phương thức và thuộc tính để có thể truy xuất dễ dàng. Các đối tượng được xem như là các node và được biểu diễn dưới dạng DOM tree.
<html>
-> document node
<head>
-> element node - head
<title>HTML DOM -> text node</title>
-> element node - title
</head>
<body>
-> element node - body
</body>
</html>DOM không thuộc về JavaScript, tuy nhiên, nếu không có DOM thì JavaScript sẽ không có cách thể hiện nào cho một trang web để có thể truy cập và chỉnh sửa nội dung của nó.
DOM APIs thuộc Browser API, là một tập các giao diện (interface) chứa các phương thức dùng để duyệt và chỉnh sửa các node. Ví dụ: getElementById(), removeChild() là các phương thức thuộc DOM APIs.
Node & Document
Node là một base interface mà nhiều interface khác thuộc DOM API kế thừa. Trong HTML, có ba node đáng chú ý là element, attribute và text.
Đối tượng có tên là document có trong interface Document kế thừa từ Node đại diện cho toàn bộ website giúp chúng ta truy cập và chỉnh sửa các đối tượng element, attribute và text.
Node Types
Mỗi node đều có một thuộc tính gọi là nodeType, thể hiện cho loại node. Element node có giá trị là 1, attribute node là 2 và text node là 3.
Ví dụ dưới đây ta sẽ kiểm tra tên của ba node element, attribute và text. Cách lấy ra các node này tham khảo ở DOM Element và DOM Attribute. Riêng text node thì được lấy thông qua thuộc tính childNodes.
<h2 class="heading-2"> Heading 2 </h1>const secondHeading = document.querySelector(".heading-2")
console.log(secondHeading.nodeType) // 1
console.log(secondHeading.attributes.class.nodeType) // 2
console.log(secondHeading.childNodes[0].nodeType) // 3