JavaScript: phương thức querySelector

JavaScript: phương thức querySelector

Phương thức querySelector() trả về phần tử đầu tiên là phần tử con của phần tử mà nó được gọi ra khớp với nhóm bộ chọn được chỉ định.

Lưu ý: Phương thức querySelector() chỉ trả về phần tử đầu tiên khớp với các bộ chọn được chỉ định. Để trả về tất cả các kết quả phù hợp, sử dụng phương thức querySelectorAll() để thay thế.

Nếu bộ chọn khớp với ID trong tài liệu được sử dụng nhiều lần (Lưu ý rằng “id” phải là duy nhất trong một trang và không nên được sử dụng nhiều lần), nó sẽ trả về phần tử khớp đầu tiên.

Cú pháp

element = document.querySelector(CSS selectors)

hoặc

element = baseElement.querySelector(CSS selectors);

Giá trị tham số

CSS selectors:

String.

Chỉ định một hoặc nhiều bộ chọn CSS để khớp với phần tử. Chúng được sử dụng để chọn các phần tử HTML dựa trên id, lớp, loại, thuộc tính, giá trị của thuộc tính, v.v.

Đối với nhiều bộ chọn, hãy tách riêng từng bộ chọn bằng dấu phẩy. Phần tử trả về phụ thuộc vào phần tử nào được tìm thấy đầu tiên trong tài liệu.

Giá trị trả về:

Một đối tượng NodeList, biểu diễn phần tử đầu tiên khớp với (các) bộ chọn CSS được chỉ định. Nếu không tìm thấy kết quả phù hợp, null sẽ được trả về. Ném ngoại lệ SYNTAX_ERR nếu bộ chọn được chỉ định không hợp lệ.

Ví dụ

Lấy phần tử <p> đầu tiên trong tài liệu:

var el = document.querySelector("p");

Thay đổi văn bản của phần tử có id="demo":

document.querySelector("#demo").innerHTML = "Hello World!";

Lấy phần tử <p> đầu tiên là con của một phần tử <div>.

var el = document.querySelector("div > p");

Tìm phần tử đầu tiên khớp với một lớp

var el = document.querySelector(".myclass");

Một bộ chọn phức tạp hơn

var el = document.querySelector("div.user-panel.main input[name='login']");

Ví dụ này minh họa cách nhiều bộ chọn hoạt động.

Giả sử rằng bạn có hai phần tử: một phần tử <h2><h3>.

Đoạn mã sau sẽ thêm màu nền vào phần tử <h2> đầu tiên trong tài liệu:

<h2>A h2 element</h2>
<h3>A h3 element</h3>
<script>
	document.querySelector("h2, h3").style.backgroundColor = "red";
</script>

Tuy nhiên, nếu phần tử <h3> được đặt trước phần tử <h2> trong tài liệu. Thì phần tử <h3> sẽ là phần tử sẽ có màu nền đỏ.

<h3>A h3 element</h3>
<h2>A h2 element</h2>
<script>
	document.querySelector("h2, h3").style.backgroundColor = "red";
</script>

Tính tương thích của trình duyệt web

Phương thức querySelector trên đối tượng document

Trình duyệt trên máy tính

Trình duyệt Phiên bản tương thích
Chrome 1
Edge
FireFox 3.5
Internet Eplorer 8
Opera 10
Safari 3.2

Trình duyệt trên thiết bị di động

Trình duyệt Phiên bản tương thích
Android Webview
Chrome for Android
Edge Mobile
FireFox for Android
Opera 10
iOS Safari 3.2
Samsung Internet ?

Phương thức querySelector trên đối tượng Node

Trình duyệt trên máy tính

Trình duyệt Phiên bản tương thích
Chrome 1
Edge 12
FireFox (Gecko) 3.5 (1.9.1)
Internet Eplorer 9 (IE8 chỉ hỗ trợ CSS 2.1 selectors)
Opera
Safari

Tham khảo:

Các tính năng mặc định của trang web

Các trang web được Đại Phố thiết kế luôn mặc định các tính năng sau:

  • Mã nguồn được tối ưu với các công cụ tìm kiếm.
  • Trang web hỗ trợ thiết bị di động, tương thích với mọi thiết bị: điện thoại, máy tính bảng, máy tính và laptop. Sử dụng công nghệ HTML5, CSS3 Mobile Responsive.
  • Dễ dàng thay đổi theo phong cách riêng của bạn.
  • Dễ dàng thêm bớt số lượng các trang, và chỉnh sửa nội hiển thị trên website tùy ý
  • Phần quản trị rõ ràng, trực quan, dễ sử dụng với cả những người không chuyên về IT.

Quản lí nội dung: có thể dễ dàng thêm, xóa, sửa các thông tin trên website

  • Thông tin sản phẩm và dịch vụ của công ty
  • Thông tin dự án, đối tác Giới thiệu – Liên hệ
  • Thông tin giới thiệu, thông tin liên hệ
  • Tin tức
  • Hình ảnh trên website, sửa các tag alt, descriotion, caption
  • Hình ảnh và caption trên Slideshow
Xin vui lòng liên hệ với chúng tôi nếu cần thêm thông tin