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

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

3
00:00:12,583 --> 00:00:17,178
và tôi muốn biến trang web này thành “All about cats”.

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

5
00:00:23,267 --> 00:00:26,431
và cuối cùng, có thể tôi sẽ biến được nó thành

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

7
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?

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

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

10
00:00:50,340 --> 00:00:53,909
sử dụng 2 bước ta đã học.

11
00:00:53,909 --> 00:00:59,268
Bước đầu tiên là tìm nốt DOM chứa tiêu đề.

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

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

14
00:01:12,492 --> 00:01:14,700
h1 này có ID,

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

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

17
00:01:24,980 --> 00:01:30,342
một thủ tục trên đối tượng document được gọi là getElementById.

18
00:01:30,342 --> 00:01:33,198
Ta sẽ áp dụng nó trong tag  ở dưới này,

19
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` --

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

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

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

23
00:01:52,743 --> 00:01:58,964
như vậy ta nhập `document`, rồi chấm, rồi `getElementById`,

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

25
00:02:04,753 --> 00:02:07,733
vì nó không biết phải tìm ID nào.

26
00:02:07,733 --> 00:02:12,011
Ta phải đưa ID cần tìm vào trong dấu ngoặc

27
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”.

28
00:02:21,354 --> 00:02:24,098
Làm cách nào ta có thể biết trước khi xử lý

29
00:02:24,098 --> 00:02:26,537
đã tìm thấy phần tử hay chưa?

30
00:02:26,537 --> 00:02:31,770
Có một cách là sử dụng hàm console.log.

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

32
00:02:36,202 --> 00:02:40,896
Hãy thử phím tắt command-option-I trên Mac,

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

34
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

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

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

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

38
00:03:10,679 --> 00:03:17,627
`headingEI.innerHTML =` -- dun-dun-dun, hãy nhìn xem—

39
00:03:17,627 --> 00:03:22,721
“All about cats”. Xong rồi đó.

40
00:03:22,721 --> 00:03:26,655
Triều đại mèo đã bắt đầu.

41
00:03:26,655 --> 00:00:00,000
Bây giờ hãy thử sức mình với thử thách nhé.