Vyhledávání podle CSS selectorů ve WebKitu

V posledních nočních buildech WebKitu (prohlížeč Safari) najdete nativní implementaci funkcí querySelector() a querySelectorAll().

Obě funkce jsou součástí specifikace Selectors API, o jejíž přípravě jsem se zmiňoval loni v létě, a umožňují snadné vyhledávání elementů pomocí syntaxe známé z CSS. Například document.querySelectorAll("#menu :visited"); vrátí všechny odkazy z menu, které již uživatel navštívíl.

Podobný přístup se dnes používá v řadě knihoven (jQuery, Prototype a další). Cílem specifikace Selectors API je používané přístupy sjednotit. Nativní implementace v prohlížečích bude navíc oproti javascriptovým knihovnám rychlejší, o čemž se můžete přesvědčit na testovací stránce. Na mém počítači běží nativní implementace (poslední sloupec tabulky) více jak o jeden řád rychleji, posuďte sami:

Webkit je první jádro, které zmíněné funkce implementovalo, proto zatím asi nikdo nebude obě volání používat přímo. Je více než pravděpodobné, že nové verze javascriptových knihoven budou rozpoznávat prohlížeče s nativní implementací a sami vyberou rychlejší variantu. Kód tak bude fungovat všude, ale v některých prohlížečích mnohem rychleji.

Selector API - překonat omezení DOM

Document Object Model (DOM) je sada specifikací pro přístup k elementům a atributům HTML a XML dokumentů. Jedná se o celkem důležité specifikace, které vnesly řád tam, kde dříve panoval chaos.

Přesto je DOM v některých ohledech ne zcela vyhovující. Z pohledu programátorů se s ním někdy obtížně pracuje, a proto se jeho používání místy obchází např. pomocí vlastnosti innerHTML (innerHTML bude v HTML5 konečně standadizován!).

Často potřebujeme vybrat elementy splňující nějakou konkrétní podmínku, ideálně jedním příkazem. DOM nefinuje NodeIterator a TreeWalker, u kterých ale není splněna právě ona podmínka "ideálně jedním příkazem". Proto se poslední dobou rozmohlo používání JavaScriptových knihoven, které jednoduchý výběr elementů umožňují.

Například s knihovnou jQuery stačí zavolat funkci $("#prehled td.cena"), která v souladu se selektorovou syntaxí CSS vybere všechny buňky tabulky "prehled" se třídou "cena". Nevýhodou je nutnost includovat 20kB knihovnu do svého projektu.

Pravidlo jakmile začnou vývojáři obcházet API, je třeba API upravit, platí, a proto mě potěšilo, že W3C připravuje specifikaci Selectors API, která zmíněný problém řeší. Přidává možnost vyhledávání elementů právě pomocí CSS selektorů podobě, jako to dělá například jQuery.

Ve skupině WebAPI, která specifikaci připravuje, panovala dlouho neshoda co se týče názvu metod. Podrobněji o tom píše Lachlan Hunt v Selectors API Naming Debate.

Tento týden bylo rozhodnuto a připravovaná specifikace již obsahuje metody selectElement() a selectAllElements(), příklad jejich použití: document.selectAllElements("#prehled td.cena");.

Stránky w3.org právě nejedou a nepodařilo se mi zjistit, kdy je plánována finální verze specifikace, rád bych ji tu měl co nejdříve. Protože používat CSS selektory umí prakticky každý webový vývojář, myslím, že se připravované API rychle ujme.

O navigaci pomocí selektorů CSS psal loni i Petr Cimprich v seriálu Akta X.