Finding elements by Id (Video version)

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

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

và tôi muốn biến trang web này thành “All about cats”.

Tôi sẽ sử dụng Javascript thay vì chỉ chỉnh sửa HTML này,

và cuối cùng, có thể tôi sẽ biến được nó thành

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

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

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

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

sử dụng 2 bước ta đã học.

Bước đầu tiên là tìm nốt DOM chứa tiêu đề.

Trước đây ta chỉ tìm nốt DOM bằng document.body,

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.

h1 này có ID,

Điều đó có nghĩa đây sẽ là tag duy nhất có ID đó trên trang,

và ta có một cách rất đơn giản giúp tìm các nốt DOM có ID,

một thủ tục trên đối tượng document được gọi là getElementById.

Ta sẽ áp dụng nó trong tag ở dưới này,

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

tôi muốn kết thúc tên biến bằng E1 hoặc Node,

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

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,

như vậy ta nhập `document`, rồi chấm, rồi `getElementById`,

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

vì nó không biết phải tìm ID nào.

Ta phải đưa ID cần tìm vào trong dấu ngoặc

dưới dạng chuỗi đặt trong ngoặc kép. Như vậy ta có “heading”.

Làm cách nào ta có thể biết trước khi xử lý

đã tìm thấy phần tử hay chưa?

Có một cách là sử dụng hàm console.log.

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

Hãy thử phím tắt command-option-I trên Mac,

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

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

ta đã hoàn thành bước 1. Ta đã tìm thấy phần tử và lưu trữ trong biến.

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

thay đổi innerHTML. Để xem nào, như vậy tức là ta sẽ nhập

`headingEI.innerHTML =` -- dun-dun-dun, hãy nhìn xem—

“All about cats”. Xong rồi đó.

Triều đại mèo đã bắt đầu.

Bây giờ hãy thử sức mình với thử thách nhé.