Zapytanie o dokument HTML DOMSelectorAll()
Przykład
Wybierz wszystkie elementy z class="przykład":
document.querySelectorAll(".example");
Więcej przykładów poniżej.
Definicja i użycie
Metoda querySelectorAll()zwraca wszystkie elementy, które pasują do selektora(ów) CSS.
Metoda querySelectorAll()zwraca NodeList .
Metoda querySelectorAll()zgłasza wyjątek SYNTAX_ERR, jeśli selektor(y) jest nieprawidłowy
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.querySelectorAll(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 elementami, które pasują do selektorów CSS. Jeśli nie zostaną znalezione żadne dopasowania, nullzwracana jest wartość. |
Więcej przykładów
Dodaj kolor tła do pierwszego elementu <p>:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
Dodaj kolor tła do pierwszego elementu <p> z class="przykład":
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
Liczba elementów z class="przykład":
let numb = document.querySelectorAll(".example").length;
Ustaw kolor tła wszystkich elementów za pomocą class="przykład":
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Ustaw kolor tła wszystkich <p> elementów:
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Ustaw granicę wszystkich elementów <a> z atrybutem „target”:
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
Ustaw kolor tła każdego elementu <p>, w którym rodzic jest elementem <div>:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Ustaw kolor tła wszystkich elementów <h3>, <div> i <span>:
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Obsługa przeglądarki
document.querySelectorAll() to funkcja DOM Level 3 (2004).
Jest w pełni obsługiwany we wszystkich przeglądarkach:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |