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

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

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ář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

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

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
reklama
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.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

@maxiorel na Twitteru

Maxiorel na Twitteru