Chọn DOM bằng JavaScript / jQuery

jQuery vs JavaScript

jQuery được John Resig tạo ra vào năm 2006. Nó được thiết kế để xử lý không tương thích của trình duyệt và đơn giản hóa các thao tác HTML DOM, xử lý sự kiện, hoạt hình và Ajax.

Trong hơn một thập kỷ, jQuery đã là thư viện JavaScript phổ biến nhất trên thế giới.

Nhưng, từ phiên bản JavaScript Version 5 (2009) trở đi, hầu hết các tiện ích jQuery đều có thể được giải quyết bằng cách sử dụng một số dòng JavaScript tiêu chuẩn:

Tìm kiếm các yếu tố HTML thông qua id

Trả về yếu tố có id="intro":

jQuery

var myElement = $("#id01");

Thử ngay

JavaScript

var myElement = document.getElementById("id01");

Thử ngay

Tìm kiếm các yếu tố HTML thông qua tên thẻ

Trả về tất cả các yếu tố <p>:

jQuery

var myElements = $("p");

Thử ngay

Ví dụ

var myElements = document.getElementsByTagName("p");

Thử ngay

Tìm kiếm phần tử HTML thông qua tên lớp

Trả về tất cả các phần tử có class="intro".

jQuery

var myElements = $(".intro");

Thử ngay

JavaScript

var myElements = document.getElementsByClassName("intro");

Thử ngay

Phương pháp này không hoạt động trong Internet Explorer 8 và các phiên bản trước.

Tìm kiếm phần tử HTML thông qua bộ lọc CSS

Trả về danh sách các phần tử <p> có class="intro".

jQuery

var myElements = $("p.intro");

Thử ngay

JavaScript

var myElements = document.querySelectorAll("p.intro");

Thử ngay

querySelectorAll() Phương pháp không hoạt động trong Internet Explorer 8 và các phiên bản trước.