Dokument HTML DOM querySelector()
Příklady
Získejte první prvek <p>:
document.querySelector("p");
Získejte první prvek s class="example":
document.querySelector(".example");
Další příklady níže.
Definice a použití
Metoda querySelector()vrací první prvek, který odpovídá selektoru CSS.
Chcete-li vrátit všechny shody (nejen první), použijte querySelectorAll()místo toho.
Oba querySelector()a querySelectorAll()vrátit NodeList .
Obojí querySelector()a 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.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"). |
Návratová hodnota
| Typ | Popis |
| Objekt | NodeList s prvním prvkem, který odpovídá selektoru(ům) CSS. Pokud nejsou nalezeny žádné shody, nullvrátí se. |
Další příklady
Získejte první prvek <p> pomocí class="example":
document.querySelector("p.example");
Změňte text prvku pomocí id="demo":
document.querySelector("#demo").innerHTML = "Hello World!";
Vyberte první prvek <p> s nadřazeným prvkem <div>.
document.querySelector("div > p");
Vyberte první prvek <a>, který má atribut „target“:
document.querySelector("a[target]");
Vyberte první <h3> nebo první <h4>:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
Vyberte první <h3> nebo první <h4>:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
Podpora prohlížeče
document.querySelector()je funkce DOM úrovně 1 (1998).
Je plně podporován ve všech prohlížečích:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |