0:00:00.000,0:00:06.440
Tôi đã trở lại với trang web về chó, và nhất định tôi sẽ sử dụng JavaScript

0:00:06.440,0:00:11.888
và DOM api để biến nó thành một trang web hoàn toàn về mèo.

0:00:11.888,0:00:17.464
Vẫn còn một điều nữa mà tôi chưa nhắc tới. Thực ra

0:00:17.464,0:00:23.671
vẫn còn một chú chó; hai chú chó thì đúng hơn—là những hình ảnh này. Tôi không thể để ảnh

0:00:23.671,0:00:29.478
những chú chó đáng yêu này trên trang web về mèo được. Tôi phải đổi ảnh thôi.

0:00:29.487,0:00:36.342
Ta sẽ bắt đầu với tìm kiếm ảnh, sử dụng getElementsByTagName.

0:00:36.342,0:00:47.869
`var imageEls = document.getElementsByTagName("img");`

0:00:47.869,0:00:50.668
Bây giờ, vì dòng mã đó sẽ trả về nhiều phần tử,

0:00:50.668,0:00:54.725
ta cần phải sử dụng một vòng lặp for để lặp, nên tôi sẽ tạo luôn.

0:00:54.725,0:01:04.427
`var i = 0; i < imageEls.length; i++`

0:01:04.427,0:01:11.456
Nhưng tôi sẽ phải đưa gì vào trong vòng lặp? Tôi không thể thay đổi các phần tử ảnh với

0:01:11.456,0:01:18.755
innerHTMl vì các tag image không có innerHTML. Chúng là tag đóng tự động.

0:01:18.755,0:01:23.796
Thay vào đó, tôi cần phải thay đổi một thứ để khiến chúng trông như những chú chó—

0:01:23.796,0:01:27.176
URL của hình ảnh, được chỉ định

0:01:27.176,0:01:30.721
bằng thuộc tính src trong mỗi tag.

0:01:30.721,0:01:36.461
Ta có thể thay đổi thuộc tính của phần tử bằng ký hiệu chấm. Để tôi cho các bạn xem nhé.

0:01:36.461,0:01:43.179
Trước hết ta truy cập phần tử hiện tại với ký hiệu ngoặc, sau đó chấm

0:01:43.179,0:01:50.653
và đặt tên thuộc tính HTML làm tên tính chất JavaScript—src—bằng

0:01:50.653,0:01:54.841
sau đó ta đặt nó bằng một giá trị mới; tôi sẽ chỉ đặt vào một chuỗi trống thôi.

0:01:54.841,0:01:57.298
Chú ý hình ảnh trở nên trắng trơn,

0:01:57.298,0:02:01.672
vì một chuỗi trống không hướng tới bất cứ một hình ảnh nào.

0:02:01.672,0:02:07.664
Để biết URL mới này là gì, tôi sẽ dán vào URL cũ

0:02:07.664,0:02:13.022
và đổi tên file thành cat, vì tình cờ tôi biết được

0:02:13.022,0:02:16.842
đó chính là URL ảnh mèo trên Học viện Khan.

0:02:16.842,0:02:23.404
Yay. Giờ chó đã biến thành mèo rồi, triều đại mèo sắp hoàn tất rồi.

0:02:23.404,0:02:30.897
Các bạn có thấy ta cần phải làm gì với những chú chó nữa không? Khá là khó nhận ra, nhưng

0:02:30.897,0:02:36.827
vẫn còn một điều nữa—đường link tới Wikipedia. Đó sẽ là một trang web về chó

0:02:36.827,0:02:41.448
và nếu bạn đọc ấn vào, họ sẽ nhận ra mánh khóe của tôi.

0:02:41.448,0:02:47.347
Thay vào đó tôi sẽ dẫn họ tới trang web về mèo. Làm thế nào tôi có thể tìm thấy link đó trong JavaScript?

0:02:47.347,0:02:51.828
Tôi có thể tạo cho đường link này một ID và sử dụng getElementById.

0:02:51.828,0:02:57.096
Hoặc tôi có thể sử dụng getElementsByTagName và thay đổi toàn bộ link trên trang web.

0:02:57.096,0:02:59.414
Hoặc tôi muốn làm màu,

0:02:59.414,0:03:06.657
và chỉ tìm những link đi tới các trang web về chó, sử dụng một bộ chọn query CSS.

0:03:06.657,0:03:11.822
Trước hết để tôi cho các bạn xem query CSS mà tôi muốn thực hiện trong tag .

0:03:11.822,0:03:15.946
Như vậy query CSS này sẽ tìm tất cả những link có liên quan đến chó.

0:03:15.946,0:03:19.325
Đầu tiên tôi sẽ nhập `a`, vì tôi chỉ tìm link thôi.

0:03:19.325,0:03:26.041
Sau đó tôi sẽ nhập `[href*=”Dog”]`.

0:03:26.041,0:03:31.950
Dòng mã này sẽ lệnh cho CSS tìm tất cả những link có từ “Dog”.

0:03:31.950,0:03:38.166
Tiếp theo ta sẽ chuyển thành màu tím. Tada, xong rồi.

0:03:38.166,0:03:43.566
Như này là khá gọn gàng rồi, đây là một bộ chọn thuộc tính, và có rất nhiều cách

0:03:43.566,0:03:49.467
sử dụng bộ chọn thuộc tính hiệu quả để đào sâu vào tài liệu.

0:03:49.467,0:03:58.041
Bây giờ để tìm trong JavaScript, ta có thể sử dụng document.querySelectorAll, vì vậy tôi sẽ nhập

0:03:58.041,0:04:07.992
`var linkEIs = document.querySelectorAll`, sau đó ta chỉ cần dán vào

0:04:07.992,0:04:12.580
bộ chọn vừa tạo, mặc dù ta phải đảm bảo

0:04:12.580,0:04:22.695
đã thoát dấu ngoặc kép. Được rồi đó. Bây giờ trông nó giống một chuỗi rồi.

0:04:22.695,0:04:27.558
Và tôi cần phải lặp qua tất cả, nên tôi sẽ tạo một vòng lặp for nữa—

0:04:27.558,0:04:34.645
các bạn nên sử dụng thật thành thục vòng lặp for đi—và với mỗi lần lặp

0:04:34.645,0:04:41.642
tôi sẽ thay đổi đường link thành trang web về mèo trên Wikipedia.

0:04:41.642,0:04:45.501
Tôi sẽ nhập `linkEIs[i].href`--

0:04:45.501,0:04:50.681
vì đó là tên thuộc tính ta đang thay đổi—sau đó =,

0:04:50.681,0:05:00.113
tiếp theo tôi sẽ tìm URL này và dán vào đây để chuyển thành trang web về mèo,

0:05:00.113,0:05:04.305
vì tôi khá chắc chắn đây là URL của trang đó.

0:05:04.305,0:05:10.532
Tada, mèo đã xâm chiếm xong thế giới. Nhưng các bạn vẫn chưa

0:05:10.532,0:00:00.000
biết hết về xử lý trang web với JavaScript đâu, vậy nên đừng đi đâu nhé!