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.

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

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Marketing Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

návštěvník

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!

Profile picture for user Jan Polzer

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.

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru