AndreaTento článek navazuje na procházení DOMu a rozebírá všechny možnosti jak se také dostat k nejbližím prvkům od určitého zadaného elementu, s využitím querySelektorů. QuerySelektor je mocná funkcionalita, díky které se knihovna jQuery stala jednou z nejpopulárnějších a byla v minulých dekádách používána na mnoha webových stránkách. Práce, kterou je jQuery známé je konkrétně založená na selektoru Sizzle. V dnešní době však prohlížeče podporují QuerySelektory nativně a tak se potřeba používat jQuery snížila a ani mi zde jQuery nepotřebujeme. Pokud je však někdo zvyklí, tak přechod na čistý JavaScript by měl být jednoduchý a intuitivní.
Procházení potomků
Využití child selektoru > (child selector, direct descendant combinator) v dotazu.
Tento kombinátor očekává dva operandy, první je výchozí rodičovský element a druhý potomek.
document.querySelector('#content > *');
Symbol * nám vybere všechny přímé potomky, ale někdy chceme výběr zúžit třeba na konkrétní tagy nebo třídy.
Výběr všech potomků samozřejmě může být proveden pomocí klasické vlastnosti element.children a tento přístup by měl být i rychlejší.
Místo parsování vašeho dotazu prohlížeč okamžitě vrátí, co chcete, nicméně v některých situacích je rozdíl v rychlosti zanedbatelný v závislosti na prohlížeči a na tom, co se pokoušíte vybrat.
Použití children je zvláště vhodné, když pracujete s elementy jako objekty uloženými pod proměnnými.
Na druhou stranu, pokud nevybíráme všechny potomky, ale jen některé konkrétní, tak potřebujeme navíc ještě vyfiltrovat NodeList.
QuerySelectory podporují i pseudotřídy, takže můžeme vybírat potomky následovně
- :first-child vybere prvního potomka
- :last-child vybere posledního potomka
- :first-of-type vybere prvního potomka daného typu (např. první div v rodičovském elementu)
- :last-of-type vybere posledního potomka daného typu (např. poslední div v rodičovském elementu)
Procházení sourozenců
Pokud chcete vybrat sousedící/sourozence určitého elementu, můžete použít selector + (adjacent sibling).
Podobně jako u > očekává tento kombinátor na každé straně výrazu operand.
Operand vpravo je element a výraz vlevo je sourozenec, kterého chcete najít.
