WEBVTT 00:00:00.000 --> 00: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 00:00:06.440 --> 00:00:11.888 và DOM api để biến nó thành một trang web hoàn toàn về mèo. 00:00:11.888 --> 00: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 00:00:17.464 --> 00: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 00:00:23.671 --> 00: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. 00:00:29.487 --> 00:00:36.342 Ta sẽ bắt đầu với tìm kiếm ảnh, sử dụng getElementsByTagName. 00:00:36.342 --> 00:00:47.869 `var imageEls = document.getElementsByTagName("img");` 00:00:47.869 --> 00:00:50.668 Bây giờ, vì dòng mã đó sẽ trả về nhiều phần tử, 00:00:50.668 --> 00: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. 00:00:54.725 --> 00:01:04.427 `var i = 0; i < imageEls.length; i++` 00:01:04.427 --> 00: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 00:01:11.456 --> 00:01:18.755 innerHTMl vì các tag image không có innerHTML. Chúng là tag đóng tự động. 00:01:18.755 --> 00: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ó— 00:01:23.796 --> 00:01:27.176 URL của hình ảnh, được chỉ định 00:01:27.176 --> 00:01:30.721 bằng thuộc tính src trong mỗi tag. 00:01:30.721 --> 00: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é. 00:01:36.461 --> 00: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 00:01:43.179 --> 00:01:50.653 và đặt tên thuộc tính HTML làm tên tính chất JavaScript—src—bằng 00:01:50.653 --> 00: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. 00:01:54.841 --> 00:01:57.298 Chú ý hình ảnh trở nên trắng trơn, 00:01:57.298 --> 00: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. 00:02:01.672 --> 00:02:07.664 Để biết URL mới này là gì, tôi sẽ dán vào URL cũ 00:02:07.664 --> 00:02:13.022 và đổi tên file thành cat, vì tình cờ tôi biết được 00:02:13.022 --> 00:02:16.842 đó chính là URL ảnh mèo trên Học viện Khan. 00:02:16.842 --> 00: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. 00:02:23.404 --> 00: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 00:02:30.897 --> 00: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ó 00:02:36.827 --> 00: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. 00:02:41.448 --> 00: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? 00:02:47.347 --> 00:02:51.828 Tôi có thể tạo cho đường link này một ID và sử dụng getElementById. 00:02:51.828 --> 00:02:57.096 Hoặc tôi có thể sử dụng getElementsByTagName và thay đổi toàn bộ link trên trang web. 00:02:57.096 --> 00:02:59.414 Hoặc tôi muốn làm màu, 00:02:59.414 --> 00: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. 00:03:06.657 --> 00: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 . 00:03:11.822 --> 00: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ó. 00:03:15.946 --> 00:03:19.325 Đầu tiên tôi sẽ nhập `a`, vì tôi chỉ tìm link thôi. 00:03:19.325 --> 00:03:26.041 Sau đó tôi sẽ nhập `[href*=”Dog”]`. 00:03:26.041 --> 00:03:31.950 Dòng mã này sẽ lệnh cho CSS tìm tất cả những link có từ “Dog”. 00:03:31.950 --> 00:03:38.166 Tiếp theo ta sẽ chuyển thành màu tím. Tada, xong rồi. 00:03:38.166 --> 00: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 00:03:43.566 --> 00: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. 00:03:49.467 --> 00: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 00:03:58.041 --> 00:04:07.992 `var linkEIs = document.querySelectorAll`, sau đó ta chỉ cần dán vào 00:04:07.992 --> 00:04:12.580 bộ chọn vừa tạo, mặc dù ta phải đảm bảo 00:04:12.580 --> 00: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. 00:04:22.695 --> 00: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— 00:04:27.558 --> 00: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 00:04:34.645 --> 00:04:41.642 tôi sẽ thay đổi đường link thành trang web về mèo trên Wikipedia. 00:04:41.642 --> 00:04:45.501 Tôi sẽ nhập `linkEIs[i].href`-- 00:04:45.501 --> 00:04:50.681 vì đó là tên thuộc tính ta đang thay đổi—sau đó =, 00:04:50.681 --> 00: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, 00:05:00.113 --> 00:05:04.305 vì tôi khá chắc chắn đây là URL của trang đó. 00:05:04.305 --> 00:05:10.532 Tada, mèo đã xâm chiếm xong thế giới. Nhưng các bạn vẫn chưa 00:05:10.532 --> 00:00:00.000 biết hết về xử lý trang web với JavaScript đâu, vậy nên đừng đi đâu nhé!