Định nghĩa DOM – document object model

- DOM (Document Object Model) là một biểu diễn có cấu trúc của tài liệu HTML

- DOM cho phép chúng ta sử dụng JS để truy cập vào các phần tử và style (CSS) để sử dụng chúng. Nói cách khác, DOM là một điểm kết nối giữa tài liệu HTML và code JS

- DOM được trình duyệt tạo tự động ngay sau khi tải trang HTML, và được lưu trữ dưới dạng cây DOM 

Cây cấu trúc DOM

- Trong cây DOM, mỗi phần tử HTML là một object hay còn gọi là một node. Document là object đầu tiên (root) của cây DOM, nó là điểm truy cập của cây DOM. Phần tử con tiếp theo thường là html và nó tiếp tục có 2 phần tử con là head và body (2 phần tử này là 2 phần tử liền kề, anh em). Đi tiếp xuống dưới sẽ thấy nhiều các phần tử html lồng nhau và chúng được biểu diễn trong cây DOM.

- Cây DOM không chỉ có các node phần tử mà còn có các node cho text, comments,... Tất cả những thứ có trong tài liệu HTML đều được biểu diễn trong DOM 

Quan hệ giữa DOM với JS và trình duyệt web

- DOM và các phương thức của phần tử DOM là một phần của WEB API (là các thư viện viết bằng JS mà trình duyệt triển khai mà chúng ta có thể truy cập từ code JS)

- DOM là một điểm kết nối giữa code JS với tài liệu HTML được hiển thị bởi trình duyệt. 

- JS tương tác với trình duyệt thông qua DOM, JS có thể: 

   + Tạo, sửa đổi, xóa các phần tử trong DOM 

   + Đặt style, class, attribute, eventListener và phản hồi event

- DOM là một api, nó là interface được cung cấp để tương tác một cách có cấu trúc với DOM Tree bao gồm nhiều phương thức (như querySelector, addEventListener, createElement, ...) và thuộc tính (như innerHTML, textContent, ...)

- Tất cả các thuộc tính và phương thức của DOM được tổ chức thành các loại object khác nhau.

API DOM được cấu trúc như thế nào

- Mỗi node đơn trong DOM tree là một kiểu node, được biểu diễn bởi 1 đối tượng. 

- Mỗi đối tượng có các phương thức và thuộc tính nhất định.

- Có một số kiểu node: Element, Text, Comment, Document.

Khái niệm kế thừa

- Tính kế thừa là tất cả các node con sẽ có quyền truy cập vào các phương thức, thuộc tính của tất cả các node cha.

- API Dom được chia thành các kiểu node khác nhau, mỗi node có quyền truy cập vào các thuộc tính và phương thức khác nhau và chúng cũng được kế thừa nhiều thuộc tính từ tổ tiên của chúng.

Document node

- Document mà chúng ta sử dụng mọi lúc trong thao tác DOM thực chất chỉ là một loại node, chứa các phương thức quan trọng, chẳng hạn như querySelector, createElement và getElementById. 

- Lưu ý các querySelector có sẵn trên cả document và element.

EventTarget node

- Api DOM cần một cách cho phép tất cả các loại node lắng nghe sự kiện, để làm điều này ta hay gọi phương thức addEventListener trên element hoặc document.

- Vì addEventListener là một phương thức của EventTarget - node cha của Node và Window, nên có thể gọi phương thức này trên mọi node dựa trên cơ chế kế thừa.

Một số câu lệnh tương tác với DOM

- Câu lệnh document.documentElement: lấy ra các phần tử trong document.

- Câu lệnh document.head lấy ra phần head của document (phần không hiển thị)

- Câu lệnh document.body lấy ra phần body của document (phần nội dung chứa HTML để hiển thị ra trình duyệt).

- Câu lệnh document.querySelector() lấy ra phần tử đầu tiên dựa vào id hoặc class.

- Câu lệnh document.querySelectorAll() lấy ra tất cả các phần tử phù hợp với điều kiện chọn.

- Câu lệnh document.getElementById() lấy ra các phần tử dựa vào id.

- Câu lệnh document.getElementsByTagName() lấy ra các phần tử dựa vào tag.

- Câu lệnh document.getElementsByClassName() lấy ra các phần tử theo class.

- Phương thức createElement để tạo element với classList.add, textContent và innerHTML

- Chèn element với prepend và append: thêm vào đầu element và cuối element

- Phương thức .cloneNode() sao chép tất cả các phần tử con 

- before() chèn vào trước phần tử.

- after() chèn vào sau phần tử.

- Đọc các attribute không theo tiêu chuẩn với phương thức getAttribute()

- Tạo attribute mới với setAttribute()

- Phương thức document.documentElement.style.setProperty() để thay đổi giá trị của biến

- Thuộc tính classList với các phương thức add, remove, toggle, contains

   + add: thêm class vào element

   + remove: loại bỏ class ra khỏi element

   + toggle: kiểm tra element xem có class không, nếu không thì add, nếu có thì remove