Jak pracovat s DOM v JavaScriptu bez jQuery? Zkuste HTML5 Selectors API

Když se ohlédnu zpátky, nechápu, proč jsem se o jQuery nezačal zajímat mnohem dříve. Některé své starší weby v Drupalu bych pak řešil mnohem lépe a elegantněji, bez hromady neproduktivně vytvořeného vlastního kódu v JavaScriptu. Pokud jQuery ještě neznáte, určitě se nebojte začít.

jQuery vám usnadní práci s manipulací a výběrem objektů v DOM struktuře webové stránky tím, že označení prvků specifikujete velice podobně, jako v CSS. Na druhou stranu je to přeci jenom externí knihovna, kterou musíte do své webové aplikace přidat.

Ne vždy je možné jQuery v projektu využít. Někdy to nechce zákazník, jindy je to dáno typem projektu, někdy zase nebudete moci mít celý projekt pod svou kontrolou a v řadě případů je použití jQuery zbytečné. Pokud vám totiž stačí jen jednoduché označování prvků v DOM způsobem podobným jako v CSS, můžete se spolehnout na HTML5 Selectors API, které dnes bez čehokoli dalšího podporují všechny moderní webové prohlížeče (Internet Explorer od osmičky).

Začínáme s HTML5 selektory

Použití HTML5 Selectors API je opravdu tak snadné, jako zápis CSS. S malou omáčkou okolo:

1. document.querySelector('selektor') vrátí první prvek, který vyhovuje selektoru zadanému stejně, jako v CSS. Například tedy document.querySelector('body table') vrátí první tabulku na webové stránce, případně null, pokud na stránce žádná není.
2. Prohledávat lze samozřejmě i konkrétní prvek na stránce. Takže prvek.querySelector('p.perex') vrátí první odstavec s třídou perex nacházející se uvnitř elementu prvek.
3. Potřebujete-li vrátit seznam všech prvků vyhovujících zadanému selektoru, použijte volání document.querySelectorAll('selektor'). Takže document.querySelectorAll('table') vám vrátí seznam všech tabulek na webové stránce. Podobně lze volání querySelectorAll() použít pro konkrétní element v DOM.

Seznam není pole

Dlužno říci, že volání querySelectorAll() nevrací klasické pole, ale seznam NodeList. Jeho jednotlivé položky lze procházet pomocí jejich indexu, k dispozici je vlastnost length udávající počet položek v seznamu, ale další funkce pro práci s poli nelze na NodeList použít.

Ukázka na videu

Způsob použití HTML5 Selectors API můžete vidět i na následujícím videu od compuworldvideos.

Zdroje: DOM Selection Without jQuery, Selectors API Level 1