[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.29,0:00:07.39,Default,,0000,0000,0000,,Tôi có trang web “All about dogs” này, cũng hay, nhưng thực ra,
Dialogue: 0,0:00:07.39,0:00:12.58,Default,,0000,0000,0000,,tôi biết không phải ai cũng đồng ý với tôi, tôi thích mèo hơn,
Dialogue: 0,0:00:12.58,0:00:17.18,Default,,0000,0000,0000,,và tôi muốn biến trang web này thành “All about cats”.
Dialogue: 0,0:00:17.18,0:00:23.27,Default,,0000,0000,0000,,Tôi sẽ sử dụng Javascript thay vì chỉ chỉnh sửa HTML này,
Dialogue: 0,0:00:23.27,0:00:26.43,Default,,0000,0000,0000,,và cuối cùng, có thể tôi sẽ biến được nó thành
Dialogue: 0,0:00:26.43,0:00:32.10,Default,,0000,0000,0000,,phần mở rộng trình duyệt để biến mọi trang web thành trang web về mèo.
Dialogue: 0,0:00:32.10,0:00:37.45,Default,,0000,0000,0000,,Như vậy sẽ thật tuyệt phải không, toàn bộ internet đều nói về mèo?
Dialogue: 0,0:00:37.45,0:00:44.76,Default,,0000,0000,0000,,Hiện tại, trang web này có tiêu đề, một đoạn văn và 2 hình ảnh.
Dialogue: 0,0:00:44.76,0:00:50.34,Default,,0000,0000,0000,,Ta sẽ thay đổi từng phần một, bắt đầu với tiêu đề,
Dialogue: 0,0:00:50.34,0:00:53.91,Default,,0000,0000,0000,,sử dụng 2 bước ta đã học.
Dialogue: 0,0:00:53.91,0:00:59.27,Default,,0000,0000,0000,,Bước đầu tiên là tìm nốt DOM chứa tiêu đề.
Dialogue: 0,0:00:59.27,0:01:06.90,Default,,0000,0000,0000,,Trước đây ta chỉ tìm nốt DOM bằng document.body,
Dialogue: 0,0:01:06.90,0:01:12.49,Default,,0000,0000,0000,,nhưng bây giờ tôi muốn cụ thể hơn nữa, tôi chỉ muốn h1 này thôi.
Dialogue: 0,0:01:12.49,0:01:14.70,Default,,0000,0000,0000,,h1 này có ID,
Dialogue: 0,0:01:14.70,0:01:19.74,Default,,0000,0000,0000,,Điều đó có nghĩa đây sẽ là tag duy nhất có ID đó trên trang,
Dialogue: 0,0:01:19.74,0:01:24.98,Default,,0000,0000,0000,,và ta có một cách rất đơn giản giúp tìm các nốt DOM có ID,
Dialogue: 0,0:01:24.98,0:01:30.34,Default,,0000,0000,0000,,một thủ tục trên đối tượng document được gọi là getElementById.
Dialogue: 0,0:01:30.34,0:01:33.20,Default,,0000,0000,0000,,Ta sẽ áp dụng nó trong tag  ở dưới này,
Dialogue: 0,0:01:33.20,0:01:38.53,Default,,0000,0000,0000,,bắt đầu bằng cách khai một biến để lưu trữ-- `var headingEI` --
Dialogue: 0,0:01:38.53,0:01:42.30,Default,,0000,0000,0000,,tôi muốn kết thúc tên biến bằng E1 hoặc Node,
Dialogue: 0,0:01:42.30,0:01:47.39,Default,,0000,0000,0000,,để tôi biết được chúng đang lưu trữ một phần tử, mà ta cũng gọi là nốt.
Dialogue: 0,0:01:47.39,0:01:52.74,Default,,0000,0000,0000,,Bây giờ ta sẽ áp dụng thủ tục. Đây là thủ tục được liên kết với đối tượng document toàn cầu,
Dialogue: 0,0:01:52.74,0:01:58.96,Default,,0000,0000,0000,,như vậy ta nhập `document`, rồi chấm, rồi `getElementById`,
Dialogue: 0,0:01:58.96,0:02:04.75,Default,,0000,0000,0000,,sau đó ngoặc đơn vì nó là một hàm. Để như thế thì nó sẽ không tìm được gì đâu,
Dialogue: 0,0:02:04.75,0:02:07.73,Default,,0000,0000,0000,,vì nó không biết phải tìm ID nào.
Dialogue: 0,0:02:07.73,0:02:12.01,Default,,0000,0000,0000,,Ta phải đưa ID cần tìm vào trong dấu ngoặc
Dialogue: 0,0:02:12.01,0:02:21.35,Default,,0000,0000,0000,,dưới dạng chuỗi đặt trong ngoặc kép. Như vậy ta có “heading”.
Dialogue: 0,0:02:21.35,0:02:24.10,Default,,0000,0000,0000,,Làm cách nào ta có thể biết trước khi xử lý
Dialogue: 0,0:02:24.10,0:02:26.54,Default,,0000,0000,0000,,đã tìm thấy phần tử hay chưa?
Dialogue: 0,0:02:26.54,0:02:31.77,Default,,0000,0000,0000,,Có một cách là sử dụng hàm console.log.
Dialogue: 0,0:02:31.77,0:02:36.20,Default,,0000,0000,0000,,Bây giờ, ta có thể tạm dừng, và mở công cụ phát triển ra.
Dialogue: 0,0:02:36.20,0:02:40.90,Default,,0000,0000,0000,,Hãy thử phím tắt command-option-I trên Mac,
Dialogue: 0,0:02:40.90,0:02:48.03,Default,,0000,0000,0000,,hoặc control-shift-I trên Windows. Thường thì một trong hai sẽ hoạt động.
Dialogue: 0,0:02:48.03,0:02:54.83,Default,,0000,0000,0000,,Các bạn có thấy h1 đăng xuất trong console không? Nếu vậy thì yay, điều đó có nghĩa
Dialogue: 0,0:02:54.83,0:03:00.26,Default,,0000,0000,0000,,ta đã hoàn thành bước 1. Ta đã tìm thấy phần tử và lưu trữ trong biến.
Dialogue: 0,0:03:00.26,0:03:06.36,Default,,0000,0000,0000,,Với bước 2, ta sẽ xử lý phần tử bằng phương thức đã biết,
Dialogue: 0,0:03:06.36,0:03:10.68,Default,,0000,0000,0000,,thay đổi innerHTML. Để xem nào, như vậy tức là ta sẽ nhập
Dialogue: 0,0:03:10.68,0:03:17.63,Default,,0000,0000,0000,,`headingEI.innerHTML =` -- dun-dun-dun, hãy nhìn xem—
Dialogue: 0,0:03:17.63,0:03:22.72,Default,,0000,0000,0000,,“All about cats”. Xong rồi đó.
Dialogue: 0,0:03:22.72,0:03:26.66,Default,,0000,0000,0000,,Triều đại mèo đã bắt đầu.
Dialogue: 0,0:03:26.66,0:00:00.00,Default,,0000,0000,0000,,Bây giờ hãy thử sức mình với thử thách nhé.