Hướng dẫn Tìm hiểu Selector API của HTML 5

[PVS]

Tìm hiểu Selector API của HTML 5

Trước khi vào các API khá chất như: Geo, DnD, Media,… Thì các bạn cần phải nắm vững 1 API rất đơn giản nhưng lại cực kỳ quan trọng trong HTML 5. Vâng, đó là Selector API một API nên biết, cần biết và phải nắm vững.

#Giới thiệu chung về CSS và Jquery Selector
Selectors là một khái niệm hết sức quan trọng trong CSS và Javascript. Những property của CSS nếu bạn có quên hoặc không biết thì có thể google là ra. Nhưng nếu bạn không nắm rõ khái niệm về CSS, Javascript Selectors thì giống như bạn đi đường mà không biết đường vậy. Nếu không biết đường rất có thể bạn quẹo nhầm đường, đi sai địa chỉ hoặc thậm chí còn không tới đích.
Do đó, bạn nên tìm hiểu “CSS Selector” và “Jquery Selector“. Để rõ hơn về css selector và Javacsript selector.

#HTML 5 Selector API
Thông thường, trong javascript đã có sẵn các selector, giúp lập trình viên xác định đối tượng để áp đặt các sự kiện, hiệu ứng vào đối tượng. Tuy nhiên, các selector của javascript rất dài dòng, đồng thời cũng rất khó nhớ. Nắm bắt nhược điểm này của javascript, các thư viên jQuery và Prototype ra đời. Chúng rất thành công trong việc giúp cho lập trình viên bớt đau khổ khi dùng đến selector bằng cách áp dụng cách select theo dạng cây của CSS.

Ví dụ về selector của Jquery:

$("#header");
jQuery("p.green");

Ví dụ về selector trong javascript thuần:

document.getElementById("myHeader");
document.getElementsByTagName("li");
document.getElementsByName("x");

Dựa vào 2 cách viết trên các bạn có thể thấy javascript rất dài dòng và hoàn toàn không hề linh động, nó rất cụ thể quá mức, dẫn đến làm khó người lập trình phải tốn thêm dung lượng của bộ nhớ não.

Chính vì thế, khi phát triển thì W3C cũng ngầm hiểu và phát triển Selector API của HTML 5 đưa ra hai phương thức: querySelector và querySelectorAll, và hai phương thức này đã giúp cho lập trình viên đỡ khổ hơn rất nhiều.

QuerySelector
QuerySelector trả về đối tượng đầu tiên trong danh sách các đối tượng được tham chiếu.
Ví dụ, mình có đoạn code html sau với tất cả có 3 thẻ p:

<p>Nunc. A, etiam lundium magna pellentesque, pulvinar, egestas turpis sed magna eros in egestas, non integer!</p>
<p>Pulvinar pulvinar elementum facilisis, mid scelerisque placerat dictumst, pulvinar pellentesque mus pulvinar, integer habitasse.</p>
<p>Aliquam. Proin, sed a sagittis augue dictumst cum parturient elementum in urna nascetur pulvinar nisi dolor.</p>

Nếu chúng ta dùng querySelector để lựa chọn thẻ <p> và thêm thuộc tính màu xanh cho đoạn paragraph bên trong nó.

window.onload = function() {
var para = document.querySelector("p");
console.log(para); /* Hiển thị kết quả trong bảng console */
para.style.color = "green";
};

Tuy nhiên, chỉ có đoạn paragraph đầu tiên bị tác động. Do querySelector chỉ lựa chọn thẻ <p> đầu tiên trong 3 thẻ <p> được tham chiếu.

Thẻ p đầu tiên bị tô đỏ
​

Tất nhiên, chúng ta cũng có thể dễ dàng áp dụng các cách select của CSS vào:

/* lựa chọn thẻ p đầu tiên */
document.querySelector("p:first-child");
/* lựa chọn thẻ p thứ hai */
document.querySelector("p:nth-child(2)");
/* lựa chọn thẻ p cuối cùng */
document.querySelector("p:last-child");
/* lựa chọn thẻ p có giá trị của class là blue */
document.querySelector("p.blue");

Lưu ý: Nếu không biết css selector là gì, bạn nên tìm hiểu “CSS Selector” và “Jquery Selector”

querySelectorAll
querySelectorAll: sẽ lựa chọn tất cả các đối tượng được tham chiếu đến, tuy nhiên, nó lại trả về giá trị ở dạng NodeList (dạng mảng trong javascript), bạn phải sử dụng hàm for để thao tác đến các đối tượng được tham chiếu đến.
Ví dụ, cũng cùng đoạn code html như trên, mình sẽ dùng querySelectorAll để tô màu đỏ cho chữ trong tất cả các thẻ <p>.

window.onload = function() {
var para = document.querySelectorAll("p");
console.log(para); /* Hiển thị kết quả para trong bản console */
for (var i = 0; i < 3; i++) {
para[i].style.color = "red";
};
};

Bây giờ mình sẽ debug để bạn có thể dễ hiểu hơn.

Tất cả các thẻ p đều bị tô đỏ, giá trị trả về là 1 node list
​

#Tóm lại
Thay vì trước kia cực khổ dùng document.getElementById(), document.getElementsByTagName(), document.getElementsByName(),… không linh động và không theo kịp thời đại.

Bây giờ, chúng ta chỉ cần dùng

• document.querySelector(); để trả về đối tượng đầu tiên trong danh sách các đối tượng được tham chiếu.
• document.querySelectorAll(); để lựa chọn tất cả các đối tượng được tham chiếu đến.

Đồng thời kết hợp với selector trong css thì ta hoàn toàn có thể linh động trong việc tham chiếu đến bất kỳ đối tượng nào.

Tuy rằng, việc W3C bổ sung vào API Selector là một việc tất yếu và đã giúp cho lập trình viên giảm bớt nhiều thao tác rắc rối và phức tạp khi sử dụng. Nhưng việc áp dụng các thuộc tính vào đối tượng vẫn còn phụ thuộc nhiều vào javascript thuần. Do đó, mình khuyên bạn hãy tìm hiểu về jQuery, đây được xem như là một thư viện javascript phổ biến nhất. Nó hỗ trợ cho lập trình viên một cách tối đa, bằng cách rút ngắn rất nhiều bước và thao tác khi lập trình javascript, giúp cho code của bạn gọn nhẹ và dễ kiểm soát hơn.

Chúc các bạn thành công.

Nguồn: izwebz.com​