Prototype: elementen selecteren op id of name in Internet Explorer

Joor Loohuis, 21 april 2009, 3124 views.

Het selecteren van HTML elementen op id met Prototype blijkt een eigenaardigheidje te hebben in Internet Explorer 7 en ouder. Het geselecteerde element kan in plaats van in het id attribuut ook in het name attribuut staan.

Tags: Internet Explorer, JavaScript, Prototype, web, webdevelopment

Tijdens het ontwikkelen van wat DHTML acties op basis van Prototype ben ik tegen een storend probleem aamgelopen, dat mogelijk lastig te detecteren is. Het blijkt dat bij het selecteren van een element op basis van de id Internet Explorer niet noodzakelijk hetzelfde element terug geeft als andere browsers.

Voorbeeld code

Beschouw het volgende stukje HTML:

<p><a name="news">start of news</a></p>
<div id="news">
Actual news...
</div>

Als we daarop JavaScript code loslaten als:

var elm = $('news');

krijgen we de div met id 'news' terug in alle browsers die W3C specificaties volgen. In Internet Explorer 7 en ouder krijgen we echter het anchor element met name 'news' terug, wat hoogst waarschijnlijk tot ongewenste resultaten leidt.

Oorzaak

Microsoft geeft zelf in de documentatie voor de getElementById methode aan:

"In IE7 mode and previous modes, this method performs a case-insensitive match on both the ID and NAME attributes, which might produce unexpected results."

Ik beschouw dit een bug een Internet Explorer, omdat de naam van de method duidelijk suggereert dat alleen naar id attributen wordt gekeken. Hoewel het mogelijk zal zijn om hier in Prototype omheen te werken, zal dit zeker bugs introduceren in toepassingen die van deze feature gebruik maken.

Remedie

De oplossing voor conflicten tussen identieke name en id attributen in Internet Explorer is om name attributen in HTML gelijk te stellen aan id attributen, en ervoor te zorgen dat ze ook unieke waarden hebben. Alleen onderscheid maken op hoofd- en kleine letters is niet voldoende.Strict genomen delen name en id attributen dezelfde name space, en zouden dus niet meer dan eens mogen voorkomen in een document. Het bovenstaande code voorbeeld valideert in een HTML 4.01 Strict document.

NB: Deze bug is gerepareerd in Internet Explorer 8, met uitzondering van de 'backward compatibility modes'.