Finding elements by CSS selector (Video Version)

Giờ đây các bạn đã có rất nhiều công cụ tìm kiếm phần tử trong hộp dụng cụ của mình.

Và những công cụ đó phần lớn tgian đều rất hiệu quả.

Nhưng vẫn còn một công cụ nữa quyền lực nhất trong số đó:

khả năng tìm phần tử dựa trên bất kỳ bộ chọn nào của CSS.

Các bạn có nhớ bộ chọn CSS không?

Những bộ chọn cơ bản sẽ tìm tên tag,

hoặc ID

hoặc class.

Nhưng có nhiều bộ chọn cao cấp hơn thế:

bộ chọn hậu duệ, bộ chọn thuộc tính, bộ chọn kết hợp class và phần tử--

đây sẽ là lúc thích hợp để ta ôn tập lại bộ chọn CSS

nếu các bạn có lỡ quên sạch.

Ví dụ, nếu tôi chỉ muốn thiết kế riêng những phần tử

với tên class “animal” trong một đoạn văn thì sao?

Ta sẽ gắn một tag `` để thực hiện.

Như vậy trước hết tôi sẽ nhập `p`,

sau đó dấu cách, thể hiện rằng tôi đang xem xét bên trong các ``,

rồi .animal để biểu thị tôi đang tìm mọi phần tử

có tên class “animal”.

Và tôi sẽ tô màu đỏ.

Đẹp rồi.

Bây giờ, tôi có thể sử dụng cùng bộ chọn CSS để tìm những phần tử đó trong Javascript,

với thủ tục `document.querySelectorAll()`.

Tôi sẽ thay đổi dòng này.

Và tôi cần phải đưa vào bộ chọn CSS dưới dạng đối số,

một chuỗi trong dấu ngoặc kép.

Đó, đoạn văn lại nói về mèo rồi.

Các bạn có thể đưa vào hàm đó bất kỳ bộ chọn CSS hợp lệ nào,

và nó sẽ trả về một tâp hợp phần tử

để sau đó ta có thể tạo vòng lặp.

Các bạn còn nhớ lần trước ta nói rằng

`getElementsByTagName()` trả về tập hợp HTML

trông rất giống một mảng không?

Thủ tục này sẽ trả về một `NodeList`, trông cũng rất giống một mảng,

trong đó ta có thể sử dụng dấu ngoặc, ta có thể kiểm tra độ dài, đại loại thế.

Và các bạn sẽ không thấy bất kỳ sự khác biệt nào giữa

NodeList và HTMLCollection khi sử dụng những thủ tục này đâu.

Nhưng các bạn cứ thoải mái tham khảo nếu muốn tìm hiểu về chúng.

OK, bây giờ, ta còn một thủ tục nữa cũng tham khảo bộ chọn CSS,

và chỉ trả về một phần tử, nếu ta biết bộ chọn CSS

chỉ chọn một thứ.

Trên thực tế, nó không hữu ích đến thế đâu,

vì thông thường trong trường hợp đó ta sẽ có một ID khả dụng.

Nhưng tôi vẫn sẽ giới thiệu cho các bạn, để phòng xa thôi.

Như vậy ở đây, thay vì `getElementById`, ta có thể nhập:

`document.querySelector("`

Sau đó, với query thực, để biến nó thành một ID, ta chỉ cần thêm dấu #.

Ta-da.

Như các bạn thấy, nó rất giống với `querySelectorAll()`,

trừ việc ta chỉ chọn một, nên nó chỉ là `querySelector()`,

và ta chỉ cần đưa vào bộ chọn CSS bất kỳ để thu về một phần tử.

Vậy khi nào ta nên sử dụng những công cụ này?

Những công cụ đầu tiên mà tôi đã chỉ cho các bạn thường có hiệu quả cao hơn.

Vì vậy tôi gợi ý nên sử dụng chúng bất cứ khi nào có thể.

Nhưng trong trường hợp phải sử dụng một bộ chọn CSS phức tạp,

và không thể sử dụng những công cụ trên, thì `querySelectorAll()` sẽ là cứu tinh đấy.

Hãy thử áp dụng trong thử thách tiếp theo nhé,

và chuẩn bị tinh thần để tiếp thu thêm nhiều phương pháp nữa giúp ta xử lý trang web này.