WEBVTT

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

00:00:06.750 --> 00:00:09.978
Dom de dom dom dom

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

00:00:15.502 --> 00: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

00:00:18.907 --> 00:00:21.637
xử lý trang web bằng Javascript.

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

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

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

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

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

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

00:00:46.980 --> 00: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

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

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

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

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

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

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

00:01:23.493 --> 00: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

00:01:28.969 --> 00:01:33.504
bằng cách nhập `document.body`.

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

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

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

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

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

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

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

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

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

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

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

00:02:17.778 --> 00: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ể.

00:02:24.029 --> 00: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,

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

00:02:32.794 --> 00: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—

00:02:37.663 --> 00: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.

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

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

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

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

00:02:57.871 --> 00: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.

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

00:03:06.657 --> 00: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,

00:03:10.253 --> 00: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

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

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