Przykład
Uzyskaj pierwszy element w dokumencie z class = „przykład”:
document.querySelector(".example"); Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
querySelector() metoda zwraca pierwszy element, który odpowiada określonej CSS selector(s) w dokumencie.
Uwaga: querySelector() metoda zwraca tylko pierwszy element, który pasuje do wskazanej selektorów. Aby przywrócić wszystkie mecze, użyj querySelectorAll() metodę zamiast.
Jeśli selektor pasuje do identyfikatora w dokumencie, który jest używany kilka razy (Zauważ, że "id" powinna być unikalna w obrębie strony i nie należy stosować więcej niż jeden raz), zwraca pierwszy element pasujący.
Aby uzyskać więcej informacji na temat CSS selektorów, odwiedź naszą CSS Selectors samouczek i nasze CSS Selectors Reference .
Wsparcie przeglądarka
Liczby w tabeli określa pierwszą wersję przeglądarki, która w pełni obsługuje metodę.
| metoda | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10,0 |
Składnia
document.querySelector( CSS selectors )wartości parametrów
| Parametr | Rodzaj | Opis |
|---|---|---|
| CSS selectors | String | Wymagany. Określa jeden lub więcej selektorów CSS dopasować element. Są one wykorzystywane, aby wybrać elementy HTML na podstawie dowodu osobistego, klas, typów atrybutów, wartości atrybutów, etc. Dla wielu selektorów, selektor oddzielić przecinkami. Zwracany elementu zależy od elementu, który jest najpierw znaleźć w dokumencie (See "More Examples") . Wskazówka: Aby uzyskać listę wszystkich selektorów CSS, spojrzeć na nasz CSS selektory Reference . |
Szczegóły techniczne
| DOM wersja: | Poziom selektory 1 Document Object |
|---|---|
| Zwracana wartość: | Obiekt NodeList, co stanowi pierwszy element, który odpowiada określonej CSS selector(s) . Jeżeli nie znaleziono dopasowania, zwracana jest wartość null. Zgłasza wyjątek SYNTAX_ERR jeśli określony selector(s) jest nieprawidłowe. |
Więcej przykładów
Przykład
Zdobyć pierwszy <p> element w dokumencie z class = „przykład”:
document.querySelector("p.example"); Spróbuj sam " Przykład
Zmienić tekst elementu o id = „demo”:
document.querySelector("#demo").innerHTML = "Hello World!";
Spróbuj sam " Przykład
Zdobyć pierwszy <p> element w dokumencie, w którym jednostka dominująca jest <div> elementu.
document.querySelector("div > p"); Spróbuj sam " Przykład
Zdobyć pierwszy <a> element w dokumencie, który ma "target" atrybut:
document.querySelector("a[target]"); Spróbuj sam " Przykład
Ten przykład pokazuje, jak wiele pracy selektorów.
Załóżmy, że masz dwóch elementów: <h2> i <h3> element.
Poniższy kod doda koloru tła na pierwszy <h2> elementu w dokumencie:
<h2>A h2 element</h2>
<h3>A h3 element</h3>
document.querySelector("h2,
h3").style.backgroundColor = "red"; Spróbuj sam " Jednakże, jeżeli <h3> element został umieszczony przed <h2> elementu w dokumencie. <h3> elementem jest jedno z nich dostanie czerwony kolor tła.
<h3>A h3 element</h3>
<h2>A h2 element</h2>
document.querySelector("h2,
h3").style.backgroundColor = "red"; Spróbuj sam " Podobne strony
CSS: CSS selektory
CSS: CSS selektory referencyjny
JavaScript Tutorial: Lista JavaScript HTML DOM Node
JavaScript referencyjny: pierwiastek. querySelector()
HTML DOM: dokument. querySelectorAll()
JavaScript referencyjny: pierwiastek. querySelectorAll()