The DOM (Video Version)

Tiếp theo, các bạn sẽ nghe thấy tôi lặp lại một cụm từ viết tắt rất nhiều lần: DOM.

Dom de dom dom dom

DOM là viết tắt của Document Object Model,

và đó là cách trình duyệt cho phép những nhà phát triển như chúng ta

xử lý trang web bằng Javascript.

Mỗi khi trình duyệt tải 1 trang web, nó sẽ phân tích cú pháp tất cả HTML và CSS,

và chuyển tài liệu đó thành DOM.

DOM đó thực chất là một đối tượng Javascript lớn

chứa mọi thứ ta muốn biết hoặc thay đổi về một trang web,

ví dụ tất cả các tag, thuộc tính và style cho từng tag.

Để truy cập DOM trên một trang web từ Javascript,

ta sử dụng biến toàn cầu `document`, sau đó ta có thể sử dụng các thuộc tính

và gọi hàm đã được liên kết với đối tượng này.

Chiến lược chung xử lý DOM gồm có 2 bước.

Để tôi liệt kê ra đây nhé.

Bắt đầu nhé, và ta có bước thứ hai.

Bây giờ ta sẽ đi qua từng bước một.

Bước đầu tiên là tìm nốt DOM bằng thủ tục access.

Nếu tất cả những gì ta cần tìm là tag , ta có thể truy cập dễ dàng

bằng cách nhập `document.body`.

Và bước thứ 2 là xử lý nốt DOM mà ta đã tìm thấy

bằng cách thay đổi thuộc tính, style, HTML bên trong,

thêm vào nốt mới, ... .

Vì vậy nếu muốn thay đổi nội dung của toàn bộ tag,

ta có thể sử dụng tính chất `innerHTML`.

Như vậy `document.body.innerHTML = “Webpage be gone!”;`

Tada, tôi thành công rồi.

Trình duyệt đang chờ những thay đổi đối với đối tượng document,

và ngay khi ta thay đổi innerHTML của document.body,

nó sẽ phản hồi lại trong tài liệu thực.

Hãy nhớ rằng, đối tượng document không phải là trang web thực,

nhưng trình duyệt sẽ cố phản hồi trang web hiện tại nhiều nhất có thể.

Bây giờ, ta còn vô khối phương thức nữa để thực hiện bước 1,

bởi thông thường ta sẽ muốn tìm thêm thứ gì đó ngoài tag body.

Có thể các bạn muốn tìm tag với một ID nhất định, hoặc tất cả các tag cùng loại—

Đó là vấn đề mà chúng ta sẽ thảo luận trong bài hướng dẫn về DOM access methods.

Các bạn cũng sẽ có thể làm nhiều thứ hay ho trong bước thứ 2,

ví dụ như thay đổi thuộc tính hay style của tag được tìm thấy.

Ta sẽ thảo luận sau trong bài hướng dẫn DOM modification.

Sau khi thành thục truy cập và xử lý DOM, ta sẽ tiếp tục với

những phương pháp áp dụng thú vị, ví dụ khi phản hồi với sự kiện người dùng hoặc tạo hoạt hình.

Hiện tại, nếu sử dụng Javascript để thực hiện

những thứ ta có thể làm với HTML ngay từ đầu thì thật là buồn cười,

nhưng tin tôi đi, các bạn sẽ rất muốn thành thục truy cập và xử lý DOM

để sau này có thể mang lại trải nghiệm tương tác đầy đủ.

Cố lên nhé, hẹn gặp lại các bạn.