[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:06.75,Default,,0000,0000,0000,,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.
Dialogue: 0,0:00:06.75,0:00:09.98,Default,,0000,0000,0000,,Dom de dom dom dom
Dialogue: 0,0:00:09.98,0:00:15.50,Default,,0000,0000,0000,,DOM là viết tắt của Document Object Model,
Dialogue: 0,0:00:15.50,0:00:18.91,Default,,0000,0000,0000,,và đó là cách trình duyệt cho phép những nhà phát triển như chúng ta
Dialogue: 0,0:00:18.91,0:00:21.64,Default,,0000,0000,0000,,xử lý trang web bằng Javascript.
Dialogue: 0,0:00:21.64,0:00:26.73,Default,,0000,0000,0000,,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,
Dialogue: 0,0:00:26.73,0:00:30.24,Default,,0000,0000,0000,,và chuyển tài liệu đó thành DOM.
Dialogue: 0,0:00:30.24,0:00:33.54,Default,,0000,0000,0000,,DOM đó thực chất là một đối tượng Javascript lớn
Dialogue: 0,0:00:33.54,0:00:37.74,Default,,0000,0000,0000,,chứa mọi thứ ta muốn biết hoặc thay đổi về một trang web,
Dialogue: 0,0:00:37.74,0:00:43.20,Default,,0000,0000,0000,,ví dụ tất cả các tag, thuộc tính và style cho từng tag.
Dialogue: 0,0:00:43.20,0:00:46.98,Default,,0000,0000,0000,,Để truy cập DOM trên một trang web từ Javascript,
Dialogue: 0,0:00:46.98,0:00:52.91,Default,,0000,0000,0000,,ta sử dụng biến toàn cầu `document`, sau đó ta có thể sử dụng các thuộc tính
Dialogue: 0,0:00:52.91,0:00:57.52,Default,,0000,0000,0000,,và gọi hàm đã được liên kết với đối tượng này.
Dialogue: 0,0:00:57.52,0:01:04.23,Default,,0000,0000,0000,,Chiến lược chung xử lý DOM gồm có 2 bước.
Dialogue: 0,0:01:04.23,0:01:09.31,Default,,0000,0000,0000,,Để tôi liệt kê ra đây nhé.
Dialogue: 0,0:01:09.31,0:01:14.76,Default,,0000,0000,0000,,Bắt đầu nhé, và ta có bước thứ hai.
Dialogue: 0,0:01:14.76,0:01:17.82,Default,,0000,0000,0000,,Bây giờ ta sẽ đi qua từng bước một.
Dialogue: 0,0:01:17.82,0:01:23.49,Default,,0000,0000,0000,,Bước đầu tiên là tìm nốt DOM bằng thủ tục access.
Dialogue: 0,0:01:23.49,0:01:28.97,Default,,0000,0000,0000,,Nếu tất cả những gì ta cần tìm là tag , ta có thể truy cập dễ dàng
Dialogue: 0,0:01:28.97,0:01:33.50,Default,,0000,0000,0000,,bằng cách nhập `document.body`.
Dialogue: 0,0:01:33.50,0:01:39.00,Default,,0000,0000,0000,,Và bước thứ 2 là xử lý nốt DOM mà ta đã tìm thấy
Dialogue: 0,0:01:39.00,0:01:43.39,Default,,0000,0000,0000,,bằng cách thay đổi thuộc tính, style, HTML bên trong,
Dialogue: 0,0:01:43.39,0:01:46.05,Default,,0000,0000,0000,,thêm vào nốt mới, ... .
Dialogue: 0,0:01:46.05,0:01:50.50,Default,,0000,0000,0000,,Vì vậy nếu muốn thay đổi nội dung của toàn bộ tag,
Dialogue: 0,0:01:50.50,0:01:53.76,Default,,0000,0000,0000,,ta có thể sử dụng tính chất `innerHTML`.
Dialogue: 0,0:01:53.76,0:01:58.64,Default,,0000,0000,0000,,Như vậy `document.body.innerHTML = “Webpage be gone!”;`
Dialogue: 0,0:01:58.64,0:02:01.76,Default,,0000,0000,0000,,Tada, tôi thành công rồi.
Dialogue: 0,0:02:01.76,0:02:05.76,Default,,0000,0000,0000,,Trình duyệt đang chờ những thay đổi đối với đối tượng document,
Dialogue: 0,0:02:05.76,0:02:10.18,Default,,0000,0000,0000,,và ngay khi ta thay đổi innerHTML của document.body,
Dialogue: 0,0:02:10.18,0:02:13.45,Default,,0000,0000,0000,,nó sẽ phản hồi lại trong tài liệu thực.
Dialogue: 0,0:02:13.45,0:02:17.78,Default,,0000,0000,0000,,Hãy nhớ rằng, đối tượng document không phải là trang web thực,
Dialogue: 0,0:02:17.78,0:02:24.03,Default,,0000,0000,0000,,nhưng trình duyệt sẽ cố phản hồi trang web hiện tại nhiều nhất có thể.
Dialogue: 0,0:02:24.03,0:02:28.61,Default,,0000,0000,0000,,Bây giờ, ta còn vô khối phương thức nữa để thực hiện bước 1,
Dialogue: 0,0:02:28.61,0:02:32.79,Default,,0000,0000,0000,,bởi thông thường ta sẽ muốn tìm thêm thứ gì đó ngoài tag body.
Dialogue: 0,0:02:32.79,0:02:37.66,Default,,0000,0000,0000,,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—
Dialogue: 0,0:02:37.66,0:02:41.77,Default,,0000,0000,0000,,Đó là vấn đề mà chúng ta sẽ thảo luận trong bài hướng dẫn về DOM access methods.
Dialogue: 0,0:02:41.77,0:02:45.29,Default,,0000,0000,0000,,Các bạn cũng sẽ có thể làm nhiều thứ hay ho trong bước thứ 2,
Dialogue: 0,0:02:45.29,0:02:49.14,Default,,0000,0000,0000,,ví dụ như thay đổi thuộc tính hay style của tag được tìm thấy.
Dialogue: 0,0:02:49.14,0:02:52.90,Default,,0000,0000,0000,,Ta sẽ thảo luận sau trong bài hướng dẫn DOM modification.
Dialogue: 0,0:02:52.90,0:02:57.87,Default,,0000,0000,0000,,Sau khi thành thục truy cập và xử lý DOM, ta sẽ tiếp tục với
Dialogue: 0,0:02:57.87,0:03:02.74,Default,,0000,0000,0000,,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.
Dialogue: 0,0:03:02.74,0:03:06.66,Default,,0000,0000,0000,,Hiện tại, nếu sử dụng Javascript để thực hiện
Dialogue: 0,0:03:06.66,0:03:10.25,Default,,0000,0000,0000,,những thứ ta có thể làm với HTML ngay từ đầu thì thật là buồn cười,
Dialogue: 0,0:03:10.25,0:03:14.98,Default,,0000,0000,0000,,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
Dialogue: 0,0:03:14.98,0:03:18.89,Default,,0000,0000,0000,,để sau này có thể mang lại trải nghiệm tương tác đầy đủ.
Dialogue: 0,0:03:18.89,0:00:00.00,Default,,0000,0000,0000,,Cố lên nhé, hẹn gặp lại các bạn.