Dokument HTML DOM querySelectorAll()
Příklad
Vyberte všechny prvky s class="example":
document.querySelectorAll(".example");
Další příklady níže.
Definice a použití
Metoda querySelectorAll()vrací všechny prvky, které odpovídají selektoru(ům) CSS.
Metoda querySelectorAll()vrací NodeList .
Metoda querySelectorAll()vyvolá výjimku SYNTAX_ERR, pokud je selektor(y) neplatný
Návody:
Referenční příručka selektorů CSS
Výukový program Seznam uzlů JavaScriptu
Metody QuerySelector:
Metoda Element querySelector().
Metoda Element querySelectorAll().
Metoda Document querySelector()
Metoda Document querySelectorAll().
Metody GetElement:
Metoda Document getElementById().
HTML DOM NodeList / HTMLCollection
Rozdíly mezi HTMLCollection a NodeList
NodeList a HTMLCollection jsou kolekce podobné poli (seznamy) uzlů (prvků) extrahovaných z dokumentu . K uzlům lze přistupovat pomocí indexových čísel. Index začíná na 0.
Oba objekty mají vlastnost length , která vrací počet prvků v seznamu.
HTMLCollection je živá kolekce : Pokud do seznamu v DOM přidáte prvek <li>, změní se také seznam v HTMLCollection.
NodeList je statická kolekce : Pokud přidáte prvek <li> do seznamu v DOM, seznam v NodeList se nezmění.
Metody getElementsByClassName()a getElementsByTagName()
vracejí HTMLCollection.
Metody querySelector()a querySelectorAll()
vracejí NodeList.
Syntax
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"). |
Návratová hodnota
| Typ | Popis |
| Objekt | NodeList s prvky, které odpovídají selektoru(ům) CSS. Pokud nejsou nalezeny žádné shody, nullvrátí se. |
Další příklady
Přidejte barvu pozadí k prvnímu prvku <p>:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
Přidejte barvu pozadí k prvnímu prvku <p> pomocí class="example":
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
Počet prvků s class="example":
let numb = document.querySelectorAll(".example").length;
Nastavte barvu pozadí všech prvků pomocí class="example":
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Nastavte barvu pozadí všech prvků <p>:
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Nastavte ohraničení všech prvků <a> pomocí atributu „target“:
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
Nastavte barvu pozadí každého prvku <p>, kde je rodič prvkem <div>:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Nastavte barvu pozadí všech prvků <h3>, <div> a <span>:
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Podpora prohlížeče
document.querySelectorAll() je funkce DOM úrovně 3 (2004).
Je plně podporován ve všech prohlížečích:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |