0:00:00.000,0:00:06.750
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.

0:00:06.750,0:00:09.978
Dom de dom dom dom

0:00:09.978,0:00:15.502
DOM là viết tắt của Document Object Model,

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

0:00:18.907,0:00:21.637
xử lý trang web bằng Javascript.

0:00:21.637,0:00:26.726
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,

0:00:26.726,0:00:30.236
và chuyển tài liệu đó thành DOM.

0:00:30.236,0:00:33.538
DOM đó thực chất là một đối tượng Javascript lớn

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

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

0:00:43.201,0:00:46.980
Để truy cập DOM trên một trang web từ Javascript,

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

0:00:52.913,0:00:57.520
và gọi hàm đã được liên kết với đối tượng này.

0:00:57.520,0:01:04.226
Chiến lược chung xử lý DOM gồm có 2 bước.

0:01:04.226,0:01:09.309
Để tôi liệt kê ra đây nhé.

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

0:01:14.759,0:01:17.823
Bây giờ ta sẽ đi qua từng bước một.

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

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

0:01:28.969,0:01:33.504
bằng cách nhập `document.body`.

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

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

0:01:43.386,0:01:46.054
thêm vào nốt mới, ... .

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

0:01:50.495,0:01:53.758
ta có thể sử dụng tính chất `innerHTML`.

0:01:53.758,0:01:58.643
Như vậy `document.body.innerHTML = “Webpage be gone!”;`

0:01:58.643,0:02:01.758
Tada, tôi thành công rồi.

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

0:02:05.764,0:02:10.184
và ngay khi ta thay đổi innerHTML của document.body,

0:02:10.184,0:02:13.450
nó sẽ phản hồi lại trong tài liệu thực.

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

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

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

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

0:02:32.794,0:02:37.663
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—

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

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

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

0:02:49.135,0:02:52.901
Ta sẽ thảo luận sau trong bài hướng dẫn DOM modification.

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

0:02:57.871,0:03:02.735
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.

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

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

0:03:10.253,0:03:14.977
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

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

0:03:18.893,0:00:00.000
Cố lên nhé, hẹn gặp lại các bạn.