dagblog.
← Archiv

“Hackujeme” getElementById korektně!


Ne a ne a ne, chystám se vykřičet a omílat dokola. Občas se
 stane, že někdo vymyslí zlepšní(hack), které nám poskytné jednoduší život.
 Mezi ty nejznámější patří tzv. Tantek Celikuv CSS “hack” sloužící k nastavení 
 šířky elementu(nebudu dále rozebírat) a “hack”(autor nenalezen), který slouží k “implementaci”
 metody document.getElementById(String idname) přes document.all v
 prohlížečích, kde není implementována např. Internet Explorer 4.01.

Nahrazení má takovouto formu document.getElementById = document.all;. 
 Zdá se Vám něco divného? Největší problém nastává v rozdílném chování 
 obou metod na specifickém případě, jako je vrácení prvku s duplicitní 
 hodnotou atributu id. 
 Podle specifikace DOM by 
 tato metoda měla vracet v případě, že se nachází v dokumentu více
 elementů se stejným atributem id hodnotu null
 nebo první prvek z této kolekce(tak se chová většina prohlížečů).

Naopak document.all se chová jinak. V případě, že 
 atribut id je jedinečný vrací opravdu jeden objekt,
 ovšem v případě duplicity vrací pole a to už je problém.

Očekáváme li někde ve skriptu objekt a pracujeme s ním tak a vzápětí
 dostaneme pole(specifický objekt Array) musíme se připravit na chybu
 a v horším případě na nefunkčnost skriptu .
 Samozřejmě tento případ se týká těch kdo nepíší stránky validní.

Opravdu korektní náhrada, není nijak těžká

document.getElementById = new Function("idname","kp=document.all(idname);if (kp==null) return null;if (kp.length)return document.all(idname)[0];return document.all(idname);");

V podstatě stačí přidat test jestli document.all vrátilo pole nebo objekt a v případě
 pole vrátit jeho první člen. Možná se ten problém nejeví akutní a možná opravdu není podstatný, ale pouhé přiřazení není korektním řešením.

Verze na Medium

Související články

Související epizody CZ Podcastu