1
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.

2
00:00:06,750 --> 00:00:09,978
Dom de dom dom dom

3
00:00:09,978 --> 00:00:15,502
DOM là viết tắt của Document Object Model,

4
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

5
00:00:18,907 --> 00:00:21,637
xử lý trang web bằng Javascript.

6
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,

7
00:00:26,726 --> 00:00:30,236
và chuyển tài liệu đó thành DOM.

8
00:00:30,236 --> 00:00:33,538
DOM đó thực chất là một đối tượng Javascript lớn

9
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,

10
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.

11
00:00:43,201 --> 00:00:46,980
Để truy cập DOM trên một trang web từ Javascript,

12
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

13
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.

14
00:00:57,520 --> 00:01:04,226
Chiến lược chung xử lý DOM gồm có 2 bước.

15
00:01:04,226 --> 00:01:09,309
Để tôi liệt kê ra đây nhé.

16
00:01:09,309 --> 00:01:14,759
Bắt đầu nhé, và ta có bước thứ hai.

17
00:01:14,759 --> 00:01:17,823
Bây giờ ta sẽ đi qua từng bước một.

18
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.

19
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

20
00:01:28,969 --> 00:01:33,504
bằng cách nhập `document.body`.

21
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

22
00:01:39,000 --> 00:01:43,386
bằng cách thay đổi thuộc tính, style, HTML bên trong,

23
00:01:43,386 --> 00:01:46,054
thêm vào nốt mới, ... .

24
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,

25
00:01:50,495 --> 00:01:53,758
ta có thể sử dụng tính chất `innerHTML`.

26
00:01:53,758 --> 00:01:58,643
Như vậy `document.body.innerHTML = “Webpage be gone!”;`

27
00:01:58,643 --> 00:02:01,758
Tada, tôi thành công rồi.

28
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,

29
00:02:05,764 --> 00:02:10,184
và ngay khi ta thay đổi innerHTML của document.body,

30
00:02:10,184 --> 00:02:13,450
nó sẽ phản hồi lại trong tài liệu thực.

31
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,

32
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ể.

33
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,

34
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.

35
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—

36
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.

37
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,

38
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.

39
00:02:49,135 --> 00:02:52,901
Ta sẽ thảo luận sau trong bài hướng dẫn DOM modification.

40
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

41
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.

42
00:03:02,735 --> 00:03:06,657
Hiện tại, nếu sử dụng Javascript để thực hiện

43
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,

44
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

45
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 đủ.

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