Vlastnosti navigace DOM jsou skvělé, když jsou prvky blízko u sebe. Co když nejsou? Jak získat libovolný prvek stránky?
Existují další způsoby vyhledávání.
document.getElementById nebo jen id
Pokud má prvek id s atributem můžeme prvek získat pomocí metody document.getElementById(id) bez ohledu na to, kde se nachází.
Například :
Existuje také globální proměnná pojmenovaná id, která odkazuje na prvek:
… To je, pokud deklarujeme proměnnou JavaScriptu s stejný název, pak má přednost:
Toto chování je popsáno v specifikace, takže je to trochu standard. Je ale podporován hlavně kvůli kompatibilitě.
Prohlížeč se nám snaží pomoci smícháním jmenných prostorů JS a DOM. To je dobré pro jednoduché skripty vložené do HTML, ale obecně to není dobrá věc. Mohou nastat konflikty názvů. Když také čtete kód JS a nemáte v zobrazení HTML, není zřejmé, odkud proměnná pochází.
Tady v tutoriálu používáme id přímý odkaz na prvek pro stručnost, když je zřejmé, odkud prvek pochází.
Ve skutečném životě je upřednostňovanou metodou document.getElementById.
id musí být jedinečný id musí být jedinečné. V dokumentu může být pouze jeden prvek s daným id.
Pokud existuje více prvků se stejným id, pak je chování metod, které ji používají, nepředvídatelné, např document.getElementById může libovolný z těchto prvků náhodně vrátit. Držte se tedy pravidla a zachovávejte id jedinečnost.
document.getElementById, ne anyElem.getElementById Metodu getElementById lze volat pouze na document objekt. Hledá dané id v celém dokumentu.
querySelectorAll
Zdaleka nejvíce univerzální metoda elem.querySelectorAll(css) vrátí všechny prvky uvnitř elem odpovídající danému selektoru CSS.
Zde hledáme všechny <li> prvky, které jsou posledními podřízenými:
Tato metoda je skutečně účinná, protože lze použít jakýkoli selektor CSS.
Pseudotřídy ve voliči CSS jako :hover a :active jsou také podporováno. Například document.querySelectorAll(":hover") vrátí kolekci s prvky, které nyní ukazatel skončil (v pořadí vnoření: od nejvzdálenějšího <html> po nejvíce vnořený).
querySelector
Volání elem.querySelector(css) vrací první prvek pro daný CSS selector.
Jinými slovy, výsledek je stejný jako elem.querySelectorAll(css), ale ten hledá všechny prvky a vybírá jeden, zatímco elem.querySelector jen jednu hledá. Psaní je tedy rychlejší a kratší.
odpovídá
Předchozí metody prohledávaly DOM.
Elem.matches (css) nic nehledá , pouze zkontroluje, zda elem odpovídá danému selektoru CSS. Vrátí true nebo false.
Metoda se hodí, když iterujeme prvky (jako v an pole nebo něco) a snaží se odfiltrovat ty, které nás zajímají.
Například:
nejblíže
Předci prvku jsou: rodič, rodič rodič, jeho rodič atd. Předci společně tvoří řetězec rodičů od prvku nahoru.
Metoda elem.closest(css) hledá nejbližšího předka, který odpovídá selektoru CSS. Samotný elem je také zahrnut do vyhledávání.
Jinými slovy, metoda closest jde nahoru z prvek a zkontroluje každého z rodičů. Pokud se shoduje selektorem, hledání se zastaví a vrátí se předek.
Například:
getElementsBy *
Existují i jiné způsoby, jak hledat pro uzly podle tagu, třídy atd.
Dnes jsou většinou historií, protože querySelector je výkonnější a kratší na psaní.
Takže zde je pokryjeme hlavně pro úplnost, zatímco je stále najdete ve starých skriptech.
-
elem.getElementsByTagName(tag)hledá prvky s daným tag a vrátí jejich sbírku. Parametrtagmůže být také hvězdičkou"*"pro „jakékoli značky“. -
elem.getElementsByClassName(className)vrací prvky, které mají danou třídu CSS. -
document.getElementsByName(name)vrací prvky s daný atributnamev celém dokumentu. Používá se velmi zřídka.
Například:
Najdeme všechny input tagy uvnitř tabulky:
"s" dopis! Začínající vývojáři někdy zapomenou na písmeno "s". To znamená, že se snaží volat getElementByTagName místo getElementsByTagName.
"s" písmeno v getElementById chybí, protože vrací jeden prvek. getElementsByTagName ale vrací kolekci prvků, takže uvnitř je "s".
Další rozšířenou chybou začínajícího hráče je psaní:
To nebude fungovat, protože to vyžaduje kolekci vstupů a přiřazuje jim hodnotu spíše než prvkům v ní.
Měli bychom buď iterovat nad kolekcí, nebo získat prvek podle jeho indexu, a poté přiřadit takto:
Hledáme .article prvky:
Živé sbírky
Všechny metody "getElementsBy*" vrátí živou sbírku. Takové sbírky vždy odrážejí aktuální stav dokumentu a při jeho změně se „automaticky aktualizují“.
V níže uvedeném příkladu existují dva skripty.
- První vytvoří odkaz na kolekci
<div>. Od této chvíle je její délka1. - Druhý skript běží poté, co prohlížeč splní ještě jednu
<div>, takže její délka je2.
Naproti tomu , querySelectorAll vrací statickou kolekci. Je to jako pevné pole prvků.
Pokud ji použijeme místo toho, výstup obou skriptů 1:
Nyní můžeme snadno vidět rozdíl. Statická kolekce se po objevení nového div v dokumentu nezvýšila.
Shrnutí
Existuje 6 hlavních metod pro vyhledávání uzlů v DOM:
| Metoda | Hledání podle … | Může cal Jsem na prvku? | Živě? |
querySelector |
CSS-selector | ✔ | – |
querySelectorAll |
výběr CSS | ✔ | – |
getElementById |
id |
– | – |
getElementsByName |
name |
– | ✔ |
getElementsByTagName |
značka nebo "*" |
✔ | ✔ |
getElementsByClassName |
třída | ✔ | ✔ |
Zdaleka nejpoužívanější jsou querySelector a querySelectorAll, ale getElement(s)By* mohou být sporadicky užitečné nebo nalezené ve starých skriptech.
Kromě toho:
- Existuje
elem.matches(css)zkontrolovat, zdaelemodpovídá danému selektoru CSS. - Existuje
elem.closest(css)hledat nejbližšího předka, který odpovídá daný selektor CSS. Rovněž je zkontrolována samotnáelem.
A uveďme ještě jednu metodu pro kontrolu vztahu dítě-rodič, protože je to někdy užitečné:
-
elemA.contains(elemB)vrátí hodnotu true, pokud jeelemBuvnitřelemA(potomekelemA) nebo kdyželemA==elemB.