neděle 24. června 2007

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.

14 komentářů:

  1. Ja bych ocenil xpath:)

    OdpovědětVymazat
  2. Presne... ako som to cital, tak ma napadlo, ze preco na to nedaju XPath... ten by bol super

    OdpovědětVymazat
  3. Odhadoval bych, že to jsou hlavně implementační důvody. CSS selektory již prohlížeče implementovány mají, webdevelopeři je znají a jedná se o jejich další zajímavé použití. Když by Selector API používal XPath, byl by to de facto požadavek, aby každý webový prohlížeč implementoval kompletní XPath.

    Jednou k tomu možná dojde, ale nemyslím, že nejbližší roky jsou ta správná doba.

    OdpovědětVymazat
  4. Ale preci v DOM 3 je modul ohledne XPath. Jinak IE, FF umi XPath (osobne testovano - jen kazdy ma jine rozhrani). A Opera 9 osazen DOM 3 XPath modul. A Safari taky myslim. Aspon nejake soubory ve zdrojaku Webkitu se nektere soubory tak jmenovali.

    Takze nevidim az moc velky problem ohledne XPath. Jen by stacilo nejake shodne rozhrani pro prohlize. Treba jak je to v DOM 3 XPath.

    OdpovědětVymazat
  5. Ten DOM 3 s Xpath mi nějak unikl díky.

    Jen by stacilo nejake shodne rozhrani pro prohlize. Treba jak je to v DOM 3 XPath.

    Tak s tím bude třeba počkat na implementaci DOM3. DOM tolik nesleduji a nevím, jak jsou na tom prohlížeče s DOM3 dnes.

    Uvidíme, zda prohlížeče implementují dřív Selector API nebo DOM3, nikde jsem nenašel žádné časové odhady.

    OdpovědětVymazat
  6. Napsal jsem na téma překrývajících se technologií příspěvek na svém druhém blogu Budovat web jako ekosystém.

    OdpovědětVymazat
  7. Ja nemuzu jinak a musim se pridat k tem, kterym se v souvislosti s timhle zastesklo po XPath. Je to mocna vec a je skoda, ze se vymysli neco jineho misto toho, aby se zatlacilo na implementatory a sjednotilo se API. Vzdyt XSLT umi dnes v podstate vsechny mainstreamove prohlizece, tak by to takovy problem nebyl.

    A nebo je to soucast boje WHATWG proti XML stylem "a my vam ukazem, ze taky mame neco v rukavu"? ;-)

    OdpovědětVymazat
  8. Daniel: já shledávám obě technologie jako užitečné. XPath i CSS selectory. Speciálně pro tebe i ostatní jsem napsal Budovat web jako ekosystém. Konkurenčních technologií tu máme daleko víc a je to IMHO jen dobře.

    OdpovědětVymazat
  9. Martin Hassman: Zajimavy blogpost, ale stejne jako vam tam nekdo pravem vytknul, ze porovnavate neporovnatelne (XSLT -- temer aplikacni logika a CSS -- vzhled), dalo by se to z urciteho pohledu vytknout i zde. XPath je totiz nesrovnatelne schopnejsi "chapadlo" na tahani objektu z dokumentu nez CSS selektory a pozornost jemu venovana rozhodne neodpovida jeho potencialu. CSS selektory ano, proc ne, ale ne za cenu takove ignorace XPath.

    OdpovědětVymazat
  10. daniel: Vím co srovnávám a proč to takhle srovnávám, to že to jeden komentující pod článkem nepochopil a nesouhlasí, mě až tak nevadí 8-)

    Např. v případě definování vzhledu značkovacího jazyka jsou CSS a XSLT regulérními konkurenty (není divu, že o tom panují už dlouho spory viz Hakon a Walsch). To, že XSLT má mocné použití i na dalším poli neznamená, že pro tento konkrétní účel to nejsou konkurenti. Jsou 8-)

    Přeci jen to, že má jedna technologie mnohem širší použití nemusí nutně znamenat, že je lepší než druhá, která je specializovaná.

    A konkrétně v případu CSS selektory vs. XPath pro práci s DOM mají společný průnik, který lze vyjádřit v obou případech podobně složitě a zároveň každý z nich obsahuje případy, které se v tom druhém vyjádřit nedají.

    CSS na rozdíl od XPath nedokáže vyjádřit např. vazbu potomek -> rodič (např. "vyber odstavec, který obsahuje obrázky"), XPath si zase pokud vím neporadí s na webu běžně používanými konstrukcemi :first-line, :visited, :active

    Nástroj, který by zvládl obojí tu prostě není. Máme tu ekosystém, jeden se má co učit od druhého.

    Tvrdit "zastavte technologii A, protože by mohla ohrozit rozšíření technologie B" (a to zrovna děláš teď ty, ne?) je IMHO špatně.

    OdpovědětVymazat
  11. Martin Hassman: Tak podruhe :) Nepozaduju zastaveni nejake technologie, jen to, aby se na standardizaci XPath API v browserech pracovalo minimalne stejne vyrazne jako na CSS selektorech (mimochodem, vami popisovane priklady by se teoreticky daly vyresit definovanim novych XPath funkci).

    OdpovědětVymazat
  12. A DOM3 XPath, které zmínil někdo v komentářích výše není snad přesně tou standardizací API, o které píšeš?

    OdpovědětVymazat
  13. No to ano, ale pokud vim, tak Explorer se s tim bohuzel jeste moc nekamaradi. A taky uz se nam rodi XPath 2.0...

    OdpovědětVymazat
  14. Nové a nové verze specifikací tu budou pořád - součást evoluce v ekosystému. Na IE se zkus zeptat Chrise nebo někoho z týmu.

    OdpovědětVymazat

Poznámka: Komentáře mohou přidávat pouze členové tohoto blogu.