[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:02.08,0:00:06.10,Default,,0000,0000,0000,,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.
Dialogue: 0,0:00:06.10,0:00:08.64,Default,,0000,0000,0000,,Và những công cụ đó phần lớn tgian đều rất hiệu quả.
Dialogue: 0,0:00:08.64,0:00:12.49,Default,,0000,0000,0000,,Nhưng vẫn còn một công cụ nữa quyền lực nhất trong số đó:
Dialogue: 0,0:00:12.49,0:00:18.07,Default,,0000,0000,0000,,khả năng tìm phần tử dựa trên bất kỳ bộ chọn nào của CSS.
Dialogue: 0,0:00:18.07,0:00:20.38,Default,,0000,0000,0000,,Các bạn có nhớ bộ chọn CSS không?
Dialogue: 0,0:00:20.38,0:00:24.56,Default,,0000,0000,0000,,Những bộ chọn cơ bản sẽ tìm tên tag,
Dialogue: 0,0:00:24.56,0:00:26.17,Default,,0000,0000,0000,,hoặc ID
Dialogue: 0,0:00:26.17,0:00:27.52,Default,,0000,0000,0000,,hoặc class.
Dialogue: 0,0:00:27.52,0:00:30.03,Default,,0000,0000,0000,,Nhưng có nhiều bộ chọn cao cấp hơn thế:
Dialogue: 0,0:00:30.03,0:00:35.33,Default,,0000,0000,0000,,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ử--
Dialogue: 0,0:00:35.33,0:00:38.55,Default,,0000,0000,0000,,đây sẽ là lúc thích hợp để ta ôn tập lại bộ chọn CSS
Dialogue: 0,0:00:38.55,0:00:40.64,Default,,0000,0000,0000,,nếu các bạn có lỡ quên sạch.
Dialogue: 0,0:00:40.64,0:00:45.64,Default,,0000,0000,0000,,Ví dụ, nếu tôi chỉ muốn thiết kế riêng những phần tử
Dialogue: 0,0:00:45.64,0:00:50.76,Default,,0000,0000,0000,,với tên class “animal” trong một đoạn văn thì sao?
Dialogue: 0,0:00:50.76,0:00:54.61,Default,,0000,0000,0000,,Ta sẽ gắn một tag `` để thực hiện.
Dialogue: 0,0:00:54.61,0:00:57.12,Default,,0000,0000,0000,,Như vậy trước hết tôi sẽ nhập `p`,
Dialogue: 0,0:00:57.12,0:01:01.53,Default,,0000,0000,0000,,sau đó dấu cách, thể hiện rằng tôi đang xem xét bên trong các ``,
Dialogue: 0,0:01:01.53,0:01:06.49,Default,,0000,0000,0000,,rồi .animal để biểu thị tôi đang tìm mọi phần tử
Dialogue: 0,0:01:06.49,0:01:09.60,Default,,0000,0000,0000,,có tên class “animal”.
Dialogue: 0,0:01:09.60,0:01:12.67,Default,,0000,0000,0000,,Và tôi sẽ tô màu đỏ.
Dialogue: 0,0:01:12.67,0:01:14.13,Default,,0000,0000,0000,,Đẹp rồi.
Dialogue: 0,0:01:14.13,0:01:19.66,Default,,0000,0000,0000,,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,
Dialogue: 0,0:01:19.66,0:01:24.94,Default,,0000,0000,0000,,với thủ tục `document.querySelectorAll()`.
Dialogue: 0,0:01:24.94,0:01:30.32,Default,,0000,0000,0000,,Tôi sẽ thay đổi dòng này.
Dialogue: 0,0:01:30.32,0:01:35.38,Default,,0000,0000,0000,,Và tôi cần phải đưa vào bộ chọn CSS dưới dạng đối số,
Dialogue: 0,0:01:35.38,0:01:38.39,Default,,0000,0000,0000,,một chuỗi trong dấu ngoặc kép.
Dialogue: 0,0:01:38.39,0:01:42.49,Default,,0000,0000,0000,,Đó, đoạn văn lại nói về mèo rồi.
Dialogue: 0,0:01:42.49,0:01:45.82,Default,,0000,0000,0000,,Các bạn có thể đưa vào hàm đó bất kỳ bộ chọn CSS hợp lệ nào,
Dialogue: 0,0:01:45.82,0:01:48.41,Default,,0000,0000,0000,,và nó sẽ trả về một tâp hợp phần tử
Dialogue: 0,0:01:48.41,0:01:50.88,Default,,0000,0000,0000,,để sau đó ta có thể tạo vòng lặp.
Dialogue: 0,0:01:50.88,0:01:53.51,Default,,0000,0000,0000,,Các bạn còn nhớ lần trước ta nói rằng
Dialogue: 0,0:01:53.51,0:01:57.62,Default,,0000,0000,0000,,`getElementsByTagName()` trả về tập hợp HTML
Dialogue: 0,0:01:57.62,0:01:59.100,Default,,0000,0000,0000,,trông rất giống một mảng không?
Dialogue: 0,0:01:59.100,0:02:06.71,Default,,0000,0000,0000,,Thủ tục này sẽ trả về một `NodeList`, trông cũng rất giống một mảng,
Dialogue: 0,0:02:06.71,0:02:12.53,Default,,0000,0000,0000,,trong đó ta có thể sử dụng dấu ngoặc, ta có thể kiểm tra độ dài, đại loại thế.
Dialogue: 0,0:02:12.53,0:02:16.28,Default,,0000,0000,0000,,Và các bạn sẽ không thấy bất kỳ sự khác biệt nào giữa
Dialogue: 0,0:02:16.28,0:02:20.03,Default,,0000,0000,0000,,NodeList và HTMLCollection khi sử dụng những thủ tục này đâu.
Dialogue: 0,0:02:20.03,0:02:24.38,Default,,0000,0000,0000,,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.
Dialogue: 0,0:02:24.38,0:02:28.92,Default,,0000,0000,0000,,OK, bây giờ, ta còn một thủ tục nữa cũng tham khảo bộ chọn CSS,
Dialogue: 0,0:02:28.92,0:02:32.78,Default,,0000,0000,0000,,và chỉ trả về một phần tử, nếu ta biết bộ chọn CSS
Dialogue: 0,0:02:32.78,0:02:35.06,Default,,0000,0000,0000,,chỉ chọn một thứ.
Dialogue: 0,0:02:35.06,0:02:37.41,Default,,0000,0000,0000,,Trên thực tế, nó không hữu ích đến thế đâu,
Dialogue: 0,0:02:37.41,0:02:40.46,Default,,0000,0000,0000,,vì thông thường trong trường hợp đó ta sẽ có một ID khả dụng.
Dialogue: 0,0:02:40.46,0:02:43.08,Default,,0000,0000,0000,,Nhưng tôi vẫn sẽ giới thiệu cho các bạn, để phòng xa thôi.
Dialogue: 0,0:02:43.08,0:02:46.31,Default,,0000,0000,0000,,Như vậy ở đây, thay vì `getElementById`, ta có thể nhập:
Dialogue: 0,0:02:46.31,0:02:48.58,Default,,0000,0000,0000,,`document.querySelector("`
Dialogue: 0,0:02:48.58,0:02:53.56,Default,,0000,0000,0000,,Sau đó, với query thực, để biến nó thành một ID, ta chỉ cần thêm dấu #.
Dialogue: 0,0:02:53.56,0:02:54.52,Default,,0000,0000,0000,,Ta-da.
Dialogue: 0,0:02:54.52,0:02:57.92,Default,,0000,0000,0000,,Như các bạn thấy, nó rất giống với `querySelectorAll()`,
Dialogue: 0,0:02:57.92,0:03:01.55,Default,,0000,0000,0000,,trừ việc ta chỉ chọn một, nên nó chỉ là `querySelector()`,
Dialogue: 0,0:03:01.55,0:03:06.51,Default,,0000,0000,0000,,và ta chỉ cần đưa vào bộ chọn CSS bất kỳ để thu về một phần tử.
Dialogue: 0,0:03:06.51,0:03:10.43,Default,,0000,0000,0000,,Vậy khi nào ta nên sử dụng những công cụ này?
Dialogue: 0,0:03:10.43,0:03:13.70,Default,,0000,0000,0000,,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.
Dialogue: 0,0:03:13.70,0:03:15.73,Default,,0000,0000,0000,,Vì vậy tôi gợi ý nên sử dụng chúng bất cứ khi nào có thể.
Dialogue: 0,0:03:15.73,0:03:19.59,Default,,0000,0000,0000,,Nhưng trong trường hợp phải sử dụng một bộ chọn CSS phức tạp,
Dialogue: 0,0:03:19.59,0:03:24.05,Default,,0000,0000,0000,,và không thể sử dụng những công cụ trên, thì `querySelectorAll()` sẽ là cứu tinh đấy.
Dialogue: 0,0:03:24.05,0:03:26.11,Default,,0000,0000,0000,,Hãy thử áp dụng trong thử thách tiếp theo nhé,
Dialogue: 0,0:03:26.11,0:00:00.00,Default,,0000,0000,0000,,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.