[BÀI 11] DOM TRONG JAVASCRIPT

Với JS có thể tái cấu trúc lại toàn bộ tài liệu HTML. Có thể thêm, bớt, thay đổi hay sắp xếp lại các phần tử của trang. Để thay đổi mọi thứ trong trang, JS phải truy cập được tất cả các thành phần HTML trong tài liệu. Thông qua DOM, JS có thể truy cập và sửa đổi đến tất cả thành phần của trang .

 DOM là gì ? 

–  DOM (Document Object Model) : Là một mô hình chuẩn cho phép ngôn ngữ lập trình có thể truy xuất và thay đổi động nội dung, cấu trúc, định dạng cuả văn bản. Là một chuẩn được định nghĩa bởi W3C (World Wide Web Consortium) để có thể truy cập và thao tác với các tài liệu như html, xhtml hay xml bằng các ngôn ngữ lập trình như JavaScrip, PHP , Python,…

– Mô hình DOM chia làm 3 phần:

•  Core DOM: định nghĩa một tập tài liệu chuẩn cho mọi tài liệu có cấu trúc.
•  XML DOM: định nghĩa một tập đối tượng chuẩn cho tài liệu XML.
•  HTML DOM: định nghĩa một tập đối tượng chuẩn cho tài liệu  HTML.

HTML DOM

– Định nghĩa các đối tượng và thuộc tính của tất cả các thành phần HTML và phương thức để truy cập chúng.

Cấu trúc của HTML Document Model

• Theo mô hình mọi thứ trong tài liệu HTML là một nút.
• Mỗi thẻ HTML là một nút thành phần (element node).
• Các văn bản chứa trong các thành phần HTML gọi là các nút văn bản (text node).
• Mỗi thuộc tính của thành phần HTML là một nút thuộc tính (attribute node).
• Các ghi chú là các node ghi chú (comment node).

Các loại Document Object Model trong JavaScript

Javascript có cung cấp cho chúng ta nhiều phương thức, đối tượng và mỗi thành phần sẽ có những nhiệm vụ khác nhau.

• DOM document: có nhiệm vụ lưu trữ toàn bộ các thành phần trong tài liệu của website.
• DOM element: có nhiệm vụ truy xuất tới thẻ HTML nào đó thông qua các thuộc tính như tên class, id, name của thẻ HTML.
• DOM HTML: có nhiệm vụ thay đổi giá trị nội dung và giá trị thuộc tính của các thẻ HTML.
• DOM CSS: có nhiệm vụ thay đổi các định dạng CSS của thẻ HTML.
• DOM Event: có nhiệm vụ gán các sự kiện như onclick(), onload() vào các thẻ HTML.
• DOM Listener: có nhiệm vụ lắng nghe các sự kiện tác động lên thẻ HTML đó.
• DOM Navigation dùng để quản lý, thao tác với các thẻ HTML, thể hiện mối quan hệ cha – con của các thẻ HTML.
• DOM Node, Nodelist: có nhiệm vụ thao tác với HTML thông qua đối tượng (Object).

– Tham khảo các khóa học của Devpro tại đây !!!