HTML DOM Document querySelector ()
Các ví dụ
Nhận phần tử <p> đầu tiên:
document.querySelector("p");
Lấy phần tử đầu tiên với class = "example":
document.querySelector(".example");
Thêm ví dụ bên dưới.
Định nghĩa và Cách sử dụng
Phương querySelector()thức trả về phần tử đầu tiên phù hợp với bộ chọn CSS.
Để trả về tất cả các kết quả phù hợp (không chỉ kết quả đầu tiên), hãy sử dụng querySelectorAll()thay thế.
Cả hai querySelector()và querySelectorAll()trả về một NodeList .
Cả hai querySelector()và querySelectorAll()ném một ngoại lệ SYNTAX_ERR nếu (các) bộ chọn không hợp lệ.
Hướng dẫn:
Hướng dẫn Danh sách Nút JavaScript
Phương thức QuerySelector:
Phương thức Element querySelector ()
Phương thức Element querySelectorAll ()
Phương thức truy vấn tài liệuSelector ()
Phương thức Document querySelectorAll ()
Phương thức GetElement:
Phương thức Tài liệu getElementById ()
HTML DOM NodeList / HTMLCollection
Sự khác biệt giữa HTMLCollection và NodeList
NodeList và HTMLCollection đều là bộ sưu tập giống mảng (danh sách) 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 đối tượng đều có thuộc tính length trả về số phần tử trong danh sách.
Bộ sưu tập HTMLC là một tập hợp trực tiếp : Nếu bạn thêm phần tử <li> vào danh sách trong DOM, danh sách trong Bộ sưu tập HTMLC cũng sẽ thay đổi.
NodeList là một tập hợp tĩnh : 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 getElementsByClassName()và getElementsByTagName()
phương thức trả về một bộ sưu tập HTMLC.
Các phương thức querySelector()và querySelectorAll()
trả về một NodeList.
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ả lại
| Loại | Sự miêu tả |
| Sự vật | Một NodeList với phần tử đầu tiên phù hợp với (các) bộ chọn CSS. Nếu không tìm thấy kết quả phù hợp, nullsẽ được trả về. |
Các ví dụ khác
Nhận phần tử <p> đầu tiên với class = "example":
document.querySelector("p.example");
Thay đổi văn bản của phần tử với id = "demo":
document.querySelector("#demo").innerHTML = "Hello World!";
Chọn phần tử <p> đầu tiên có phần tử mẹ là phần tử <div>.
document.querySelector("div > p");
Chọn phần tử <a> đầu tiên có thuộc tính "target":
document.querySelector("a[target]");
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";
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ỗ trợ trình duyệt
document.querySelector()là một tính năng DOM Level 1 (1998).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |