Truy vấn tài liệu HTML DOMSelector()
Ví dụ
Lấy phần tử <p> đầu tiên:
document.querySelector("p");
Hãy tự mình thử »Lấy phần tử đầu tiên với class="example":
document.querySelector(".example");
Hãy tự mình thử »Thêm ví dụ dưới đây.
Sự miêu tả
Phương thức querySelector()
trả về phần tử đầu tiên khớp với bộ chọn CSS.
Để trả về tất cả các kết quả khớp (không chỉ kết quả đầu tiên), thay vào đó hãy sử dụng querySelectorAll()
.
Cả querySelector()
và querySelectorAll()
đều đưa ra ngoại lệ SYNTAX_ERR nếu (các) bộ chọn không hợp lệ.
Hướng dẫn:
Tham chiếu danh sách nút DOM HTML
Phương thức QuerySelector:
Phương thức querySelectorAll()
Phương thức GetElement:
Sự khác biệt giữa HTMLCollection và NodeList
NodeList và HTMLcollection rất giống nhau.
Cả hai đều là các bộ sưu tập (danh sách) dạng mảng gồm các nút (phần tử) được trích xuất từ một tài liệu. Các nút có thể được truy cập bằng số chỉ mục. Chỉ số bắt đầu từ 0.
Cả hai đều có thuộc tính độ dài trả về số phần tử trong danh sách (bộ sưu tập).
HTMLCollection là tập hợp các phần tử tài liệu .
NodeList là một tập hợp các nút tài liệu (nút phần tử, nút thuộc tính và nút văn bản).
Các mục HTMLCollection có thể được truy cập bằng tên, id hoặc số chỉ mục của chúng.
Các mục NodeList chỉ có thể được truy cập bằng số chỉ mục của chúng.
HTMLCollection luôn là một bộ sưu tập trực tiếp . Ví dụ: Nếu bạn thêm phần tử <li> vào danh sách trong DOM, danh sách trong HTMLCollection cũng sẽ thay đổi.
NodeList thường là một bộ sưu tập tĩnh . Ví dụ: Nếu bạn thêm phần tử <li> vào danh sách trong DOM, danh sách trong NodeList sẽ không thay đổi.
Các phương thức getElementsByClassName()
và getElementsByTagName()
trả về một HTMLCollection trực tiếp.
Phương thức querySelectorAll()
trả về một NodeList tĩnh.
Thuộc tính childNodes
trả về một NodeList trực tiếp.
Cú pháp
document.querySelector( CSS selectors )
Thông số
Parameter | Description |
CSS selectors |
Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference . For multiple selectors, separate each selector with a comma (See "More Examples"). |
Giá trị trả về
Kiểu | Sự miêu tả |
Sự vật | Một NodeList có phần tử đầu tiên khớp với (các) bộ chọn CSS. Nếu không tìm thấy kết quả phù hợp, null sẽ được trả về. |
Thêm ví dụ
Lấy phần tử <p> đầu tiên bằng class="example":
document.querySelector("p.example");
Hãy tự mình thử »Thay đổi văn bản của phần tử bằng id="demo":
document.querySelector("#demo").innerHTML = "Hello World!";
Hãy tự mình thử »Chọn phần tử <p> đầu tiên có phần tử gốc là phần tử <div>.
document.querySelector("div > p");
Hãy tự mình thử »Chọn phần tử <a> đầu tiên có thuộc tính "target":
document.querySelector("a[target]");
Hãy tự mình thử »Chọn <h3> đầu tiên hoặc <h4> đầu tiên:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
Hãy tự mình thử »Chọn <h3> đầu tiên hoặc <h4> đầu tiên:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
Hãy tự mình thử »Hỗ trợ trình duyệt
document.querySelector()
là tính năng DOM Cấp 1 (1998).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 9-11 |