Changing attributes (Video Version)

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

và DOM api để biến nó thành một trang web hoàn toàn về mèo.

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

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

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.

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

`var imageEls = document.getElementsByTagName("img");`

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

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.

`var i = 0; i < imageEls.length; i++`

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

innerHTMl vì các tag image không có innerHTML. Chúng là tag đóng tự động.

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ó—

URL của hình ảnh, được chỉ định

bằng thuộc tính src trong mỗi tag.

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

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

và đặt tên thuộc tính HTML làm tên tính chất JavaScript—src—bằng

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.

Chú ý hình ảnh trở nên trắng trơn,

vì một chuỗi trống không hướng tới bất cứ một hình ảnh nào.

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

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

đó chính là URL ảnh mèo trên Học viện Khan.

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

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

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

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

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?

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

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

Hoặc tôi muốn làm màu,

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.

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 .

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

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

Sau đó tôi sẽ nhập `[href*=”Dog”]`.

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

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

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

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

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

`var linkEIs = document.querySelectorAll`, sau đó ta chỉ cần dán vào

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

đã 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.

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—

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

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

Tôi sẽ nhập `linkEIs[i].href`--

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

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,

vì tôi khá chắc chắn đây là URL của trang đó.

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

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