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

Knihovny jQuery jsem se ještě před pár lety bál. Pak jsem zjistil, jaký je to neocenitelný pomocník při práci s JavaScriptem a manipulací s prvky v HTML dokumentu. Ne vždy je ale možné nebo potřeba ji použít. Co se výběru prvků v DOM týče, snadno si poradíte i s využitím HTML5 Selectors API.

Reklama

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:

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

Reklama

Komentáře

Pokud nechci celé jquery a chci jen velmi pohodlné selectory, stačí použít třeba Sizzle - selector framework

Práce bude mnohem pohodlnější, než s čistým html5 a ještě nemusím sám řešit, co s obskurnímy browsery. A jen za 4kB!

Pěkné, neznal jsem, díky za tip. Každopádně je to řešení, když “nechci celé jQuery”, ale ne když tam nemůžu nic přidat. Pak člověk rád sáhne po HTML5 Selectors.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

Přidat komentář