0:00:02.084,0:00:06.101
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.

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

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

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

0:00:18.070,0:00:20.384
Các bạn có nhớ bộ chọn CSS không?

0:00:20.384,0:00:24.562
Những bộ chọn cơ bản sẽ tìm tên tag,

0:00:24.562,0:00:26.170
hoặc ID

0:00:26.170,0:00:27.518
hoặc class.

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

0:00:30.027,0:00:35.333
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ử--

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

0:00:38.547,0:00:40.643
nếu các bạn có lỡ quên sạch.

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

0:00:45.642,0:00:50.765
với tên class “animal” trong một đoạn văn thì sao?

0:00:50.765,0:00:54.606
Ta sẽ gắn một tag `` để thực hiện.

0:00:54.606,0:00:57.124
Như vậy trước hết tôi sẽ nhập `p`,

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

0:01:01.532,0:01:06.492
rồi .animal để biểu thị tôi đang tìm mọi phần tử

0:01:06.492,0:01:09.603
có tên class “animal”.

0:01:09.603,0:01:12.671
Và tôi sẽ tô màu đỏ.

0:01:12.671,0:01:14.130
Đẹp rồi.

0:01:14.130,0:01:19.665
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,

0:01:19.665,0:01:24.944
với thủ tục `document.querySelectorAll()`.

0:01:24.944,0:01:30.323
Tôi sẽ thay đổi dòng này.

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

0:01:35.377,0:01:38.392
một chuỗi trong dấu ngoặc kép.

0:01:38.392,0:01:42.486
Đó, đoạn văn lại nói về mèo rồi.

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

0:01:45.823,0:01:48.414
và nó sẽ trả về một tâp hợp phần tử

0:01:48.414,0:01:50.883
để sau đó ta có thể tạo vòng lặp.

0:01:50.883,0:01:53.507
Các bạn còn nhớ lần trước ta nói rằng

0:01:53.507,0:01:57.617
`getElementsByTagName()` trả về tập hợp HTML

0:01:57.617,0:01:59.998
trông rất giống một mảng không?

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

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

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

0:02:16.282,0:02:20.029
NodeList và HTMLCollection khi sử dụng những thủ tục này đâu.

0:02:20.029,0:02:24.375
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.

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

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

0:02:32.782,0:02:35.061
chỉ chọn một thứ.

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

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

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

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

0:02:46.310,0:02:48.577
`document.querySelector("`

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

0:02:53.565,0:02:54.520
Ta-da.

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

0:02:57.917,0:03:01.547
trừ việc ta chỉ chọn một, nên nó chỉ là `querySelector()`,

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

0:03:06.510,0:03:10.434
Vậy khi nào ta nên sử dụng những công cụ này?

0:03:10.434,0:03:13.702
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.

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

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

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

0:03:24.053,0:03:26.109
Hãy thử áp dụng trong thử thách tiếp theo nhé,

0:03:26.109,0:00:00.000
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.