HTML DOM Document querySelector()
Przykłady
Pobierz pierwszy element <p>:
document.querySelector("p");
Pobierz pierwszy element z class="przykład":
document.querySelector(".example");
Więcej przykładów poniżej.
Definicja i użycie
Metoda querySelector()
zwraca pierwszy element, który pasuje do selektora CSS.
Aby zwrócić wszystkie dopasowania (nie tylko pierwsze), użyj querySelectorAll()
zamiast tego.
Oba querySelector()
i querySelectorAll()
zwracają NodeList .
Oba querySelector()
i querySelectorAll()
wyrzuć wyjątek SYNTAX_ERR, jeśli selektory są nieprawidłowe.
Poradniki:
Samouczek dotyczący selektorów CSS
Samouczek dotyczący listy węzłów JavaScript
Metody QuerySelector:
Metoda querySelector() elementu
Metoda querySelectorAll() elementu
Metoda querySelector() dokumentu
Metody GetElement:
Metoda dokumentu getElementById()
HTML DOM NodeList / HTMLCollection
Różnice między HTMLCollection a NodeList
NodeList i HTMLCollection są podobnymi do tablicy kolekcjami (listami) węzłów (elementów) wyodrębnionymi z dokumentu . Dostęp do węzłów można uzyskać za pomocą numerów indeksów. Indeks zaczyna się od 0.
Oba obiekty mają właściwość length , która zwraca liczbę elementów na liście.
HTMLCollection jest kolekcją na żywo : jeśli dodasz element <li> do listy w DOM, lista w HTMLCollection również ulegnie zmianie.
NodeList jest statyczną kolekcją : jeśli dodasz element <li> do listy w DOM, lista w NodeList nie zmieni się.
Metody getElementsByClassName()
i getElementsByTagName()
zwracają HTMLCollection.
Metody querySelector()
i querySelectorAll()
zwracają NodeList.
Składnia
document.querySelector(CSS selectors)
Parametry
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"). |
Wartość zwrotu
Rodzaj | Opis |
Obiekt | NodeList z pierwszym elementem, który pasuje do selektorów CSS. Jeśli nie zostaną znalezione żadne dopasowania, null zwracana jest wartość. |
Więcej przykładów
Pobierz pierwszy element <p> z class="przykład":
document.querySelector("p.example");
Zmień tekst elementu z id="demo":
document.querySelector("#demo").innerHTML = "Hello World!";
Wybierz pierwszy element <p>, którego rodzic jest elementem <div>.
document.querySelector("div > p");
Wybierz pierwszy element <a> z atrybutem „target”:
document.querySelector("a[target]");
Wybierz pierwsze <h3> lub pierwsze <h4>:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
Wybierz pierwsze <h3> lub pierwsze <h4>:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
Obsługa przeglądarki
document.querySelector()
to funkcja DOM Level 1 (1998).
Jest w pełni obsługiwany we wszystkich przeglądarkach:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |