WEBVTT

00:00:01.287 --> 00:00:07.387
Tôi có trang web “All about dogs” này, cũng hay, nhưng thực ra,

00:00:07.387 --> 00:00:12.583
tôi biết không phải ai cũng đồng ý với tôi, tôi thích mèo hơn,

00:00:12.583 --> 00:00:17.178
và tôi muốn biến trang web này thành “All about cats”.

00:00:17.178 --> 00:00:23.267
Tôi sẽ sử dụng Javascript thay vì chỉ chỉnh sửa HTML này,

00:00:23.267 --> 00:00:26.431
và cuối cùng, có thể tôi sẽ biến được nó thành

00:00:26.431 --> 00:00:32.095
phần mở rộng trình duyệt để biến mọi trang web thành trang web về mèo.

00:00:32.095 --> 00:00:37.450
Như vậy sẽ thật tuyệt phải không, toàn bộ internet đều nói về mèo?

00:00:37.450 --> 00:00:44.761
Hiện tại, trang web này có tiêu đề, một đoạn văn và 2 hình ảnh.

00:00:44.761 --> 00:00:50.340
Ta sẽ thay đổi từng phần một, bắt đầu với tiêu đề,

00:00:50.340 --> 00:00:53.909
sử dụng 2 bước ta đã học.

00:00:53.909 --> 00:00:59.268
Bước đầu tiên là tìm nốt DOM chứa tiêu đề.

00:00:59.268 --> 00:01:06.895
Trước đây ta chỉ tìm nốt DOM bằng document.body,

00:01:06.895 --> 00:01:12.492
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.

00:01:12.492 --> 00:01:14.700
h1 này có ID,

00:01:14.700 --> 00:01:19.743
Điều đó có nghĩa đây sẽ là tag duy nhất có ID đó trên trang,

00:01:19.743 --> 00:01:24.980
và ta có một cách rất đơn giản giúp tìm các nốt DOM có ID,

00:01:24.980 --> 00:01:30.342
một thủ tục trên đối tượng document được gọi là getElementById.

00:01:30.342 --> 00:01:33.198
Ta sẽ áp dụng nó trong tag  ở dưới này,

00:01:33.198 --> 00:01:38.527
bắt đầu bằng cách khai một biến để lưu trữ-- `var headingEI` --

00:01:38.527 --> 00:01:42.299
tôi muốn kết thúc tên biến bằng E1 hoặc Node,

00:01:42.299 --> 00:01:47.390
để 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.

00:01:47.390 --> 00:01:52.743
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,

00:01:52.743 --> 00:01:58.964
như vậy ta nhập `document`, rồi chấm, rồi `getElementById`,

00:01:58.964 --> 00:02:04.753
sau đó ngoặc đơn vì nó là một hàm. Để như thế thì nó sẽ không tìm được gì đâu,

00:02:04.753 --> 00:02:07.733
vì nó không biết phải tìm ID nào.

00:02:07.733 --> 00:02:12.011
Ta phải đưa ID cần tìm vào trong dấu ngoặc

00:02:12.011 --> 00:02:21.354
dưới dạng chuỗi đặt trong ngoặc kép. Như vậy ta có “heading”.

00:02:21.354 --> 00:02:24.098
Làm cách nào ta có thể biết trước khi xử lý

00:02:24.098 --> 00:02:26.537
đã tìm thấy phần tử hay chưa?

00:02:26.537 --> 00:02:31.770
Có một cách là sử dụng hàm console.log.

00:02:31.770 --> 00:02:36.202
Bây giờ, ta có thể tạm dừng, và mở công cụ phát triển ra.

00:02:36.202 --> 00:02:40.896
Hãy thử phím tắt command-option-I trên Mac,

00:02:40.896 --> 00:02:48.029
hoặc control-shift-I trên Windows. Thường thì một trong hai sẽ hoạt động.

00:02:48.029 --> 00:02:54.833
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

00:02:54.833 --> 00:03:00.255
ta đã hoàn thành bước 1. Ta đã tìm thấy phần tử và lưu trữ trong biến.

00:03:00.255 --> 00:03:06.359
Với bước 2, ta sẽ xử lý phần tử bằng phương thức đã biết,

00:03:06.359 --> 00:03:10.679
thay đổi innerHTML. Để xem nào, như vậy tức là ta sẽ nhập

00:03:10.679 --> 00:03:17.627
`headingEI.innerHTML =` -- dun-dun-dun, hãy nhìn xem—

00:03:17.627 --> 00:03:22.721
“All about cats”. Xong rồi đó.

00:03:22.721 --> 00:03:26.655
Triều đại mèo đã bắt đầu.

00:03:26.655 --> 00:00:00.000
Bây giờ hãy thử sức mình với thử thách nhé.