Una nota sobre el soporte de getAttribute y setAttribute en Internet Explorer 6

Tabla de contenidos

1. Introducción
2. Hipótesis número 1: La presencia del atributo
3. Hipótesis número 2: El atributo obligatorio
4. Hipótesis número 3: El atributo obligatorio y el Core
5. Mira, mejor hago una tabla…

Introducción

No me canso de repetir para quien quiera escucharme —y a veces también para quien no quiere— que Internet Explorer 6 no soporta los métodos getAttribute y setAttribute, por lo que en muchos casos nos vemos obligados a programar dos ramas cuando queremos modificar atributos de elementos de un documento. Sin embargo, he de confesar que mi afirmación no es del todo exacta.

No es que IE6 no soporte getAttribute ni setAttribute, sino que su soporte es… ¿cómo decirlo?, ¿desconcertante?, ¿caótico?

El caso es que como material de apoyo para un curso sobre estándares y accesibilidad, programé para mis alumnos un ejemplo en JavaScript de un selector de estilos. Para alternar entre dos archivos .css distintos, modificaba el atributo href del link con el que vinculaba la hoja de estilo a la página. Tengo la buena costumbre de programar sobre un navegador respetuoso con los estándares, y luego añadir —en los casos necesarios— los parches para Explorer. Pero he aquí que cuando probé la página en este navegador, el selector de estilos, en el que aplicaba getAttribute y setAttribute funcionaba, ¡y en la versión 6! [Ver el ejemplo con href]

En el ejemplo, al pulsar el botón de obtener el href del encabezado, IE6 correctamente devuelve estilo.css. Al modificar el atributo de link, el encabezado cambia de color, y si volvemos a pulsar el primer botón, en la alerta leemos estilo_2.css. Todo correcto.

Ligeramente desconcertado, me pregunté por qué, entonces, en tantos otros scripts no había obtenido el resultado esperado.

Hipótesis número 1: La presencia del atributo

Revisando scripts anteriores, me fijé en que href era un atributo ya presente en el código de la página. Así, me dije que la explicación podría ser que getAttribute y setAttribute no funcionan en caso de que el atributo al que apuntan no exista de antemano.

Como prueba, creé una página con dos capas y un encabezado en cada una, el primero de ellos sin style y el segundo con. [Ver el ejemplo con style]

En Firefox, al hacer clic para obtener el valor de style para el primer encabezado, la primera vez obtenemos null; después de asignar un estilo en línea, obtenemos color: rgb(0,0,153);font-weight:normal;font-style:italic;, y el color del encabezado, el peso de la fuente y su estilo cambian. En IE6, en repitiendo el proceso obtenemos sendos [object], y el encabezado no varía.

Para el encabezado de la derecha, que cuenta con el atributo style, los resultados en Firefox son color: rgb(153,0,0) y de nuevo color: rgb(0,0,153);font-weight:normal;font-style:italic;. En IE6, de nuevo se repiten el par de [object], pero el encabezado no varía; presupongo, por tanto, que no funciona.

No, no parece que la presencia del atributo sea relevante.

Hipótesis número 2: El atributo obligatorio

Seguidamente, me pregunté en qué se diferenciaba href de style, y pensé: «¿acaso no es href obligatorio según la DTD que estoy empleando¹?».

Para comprobarlo, creé un script que obtiene de una imagen su alt —que es un atributo obligatorio— y su title —que es opcional—. Después, ambos se pueden modificar. [Ver el ejemplo con alt y title]

En Firefox, los valores correctos se obtienen y se aplican para los dos atributos, aunque el alt que se ve en el ejemplo no se refresca; en IE6, el funcionamieno es también correcto, y además el alt se actualiza inmediatamente.

No, tampoco influye que el atributo sea obligatorio o no.

Hipótesis número 3: El atributo obligatorio y el Core

Reconozco que esta hipótesis empezaba a ser un poco enrevesada, a un paso casi de la teoría de la conspiración de turno («el tipo de Microsoft que me espía con los prismáticos desde el edificio de enfrente activa y desactiva el soporte de los atributos a capricho para torturarme»). La idea era que en la DTD que empleo hay una colección de atributos que se denominan Core (inglés), núcleo, y que son xml:space, class, id y title. ¿Podría ser que funcionase, además de con los atributos obligatorios, con los del núcelo?

Primero probé con id, y sí, funcionaba. Pero probé con class, y el resultado ya me sumió en ese estado de estupor que a veces asalta a los programadores en mi situación, una experiencia muy cercana al vacío de la mente del zen.

El caso de class es peculiar. Veamos primero el ejemplo en Firefox.

Tenemos dos encabezados, el primero sin, y el segundo con, atributo class. Del primero obtenemos el valor de su atributo class original; como es lógico, la alerta nos devuelve null. Aplicamos una clase, y se vuelve azul; además, si volvemos a obtener su valor, la alerta muestra clase_alternativa. El resultado con el segundo encabezado es el mismo, sólo que el primer resultado de todos es clase_original.

En IE6, la primera vez que obtenemos los valores de class para ambos encabezados obtenemos el mismo resultado: null. Sin embargo, al aplicar a ambos la nueva clase por medio de setAttribute, si repetimos el proceso obtenemos, correctamente y para los dos, clase_alternativa. Pero el color no cambia.

Vaya, se me acaban las ideas.

Mira, mejor hago una tabla…

…que es lo que solemos hacer cuando no podemos elaborar una teoría: acumular datos.

En vista del éxito, lo único que me quedaba por hacer para obtener algún resultado útil era elaborar una tabla con los atributos de XHTML 1.1 con los que sí funcionan tanto getAttribute como setAttribute.

La lista no es exhaustiva con respecto a las posibles combinaciones de elemento/atributos —sería una labor extensísima—, pero al menos creo que cubre los casos comunes en los que he necesitado emplear estos dos métodos. Si alguien tras consultarla encuentra algún patrón, por favor que me lo comunique.

La lista

Tabla 1: Core + I18N + Style (inglés)

Atributo	Soporte IE6	Soporte IE7	Ejemplo
Ver arriba el comportamiento con class.
class	Casi [1]	Casi [1]	Ver el ejemplo
id	Sí	Sí	Ver el ejemplo
style	No	No	Ver el ejemplo
title	Sí	Sí	Ver el ejemplo
xml:lang	Sí	Sí	Ver el ejemplo

Tabla 2: Atributos de los elementos de vinculación

Atributo	Soporte IE6	Soporte IE7	Ejemplo
accesskey	No	No	Ver el ejemplo
href (elemento a)	Sí	Sí	Ver el ejemplo
href (elemento link)	Sí	Sí	Ver el ejemplo
hreflang	Sí	Sí	Ver el ejemplo
media	Sí	Sí	Ver el ejemplo
rel (elemento a)	Sí	Sí	Ver el ejemplo
rel (elemento link)	Sí	Sí	Ver el ejemplo

Tabla 3: Atributos de object y param

Atributo	Soporte IE6	Soporte IE7	Ejemplo
Como se ve en el ejemplo, el atributo data se obtiene y se actualiza correctamente, pero el .swf que se muestra sigue siendo el mismo, porque en IE la película mostrada se especifica con <param name="movie" value="" />. En este caso ocurre como con el ejemplo de class que comento arriba: el script obtiene y actualiza correctamente el valor, pero no refresca el contenido del documento.
data	Sí [1]	Sí [1]	Ver el ejemplo
name	Sí	Sí	Ver el ejemplo
type	Sí	Sí	Ver el ejemplo
value	Casi [2]	Casi [2]	Ver el ejemplo

Tabla 4: Atributos de los elementos de formulario

Atributo	Soporte IE6	Soporte IE7	Ejemplo
En el caso de accept-charset getAttribute no funciona hasta que no se ha asignado el atributo a través de setAttribute. Aunque se puede establecer disabled="disabled" para select, no funciona así para optgroup ni option. Comportamiento peculiar: cuando aún no se ha establecido size alguno, getAttribute devuelve el valor por defecto para input y 0 para select (aunque en este caso técnicamente es 1). Otro comportamiento peculiar: en el caso de button, cuando se aplica value, su valor aparece en el texto del botón (aunque éste sería un nodo de texto hijo de button, no su value).
accesskey	No	No	Ver el ejemplo
accept	Sí	Sí	Ver el ejemplo
accept-charset	Casi [1]	Casi [1]	Ver el ejemplo
action	Sí	Sí	Ver el ejemplo
checked	Sí	Sí	Ver el ejemplo
cols	Sí	Sí	Ver el ejemplo
disabled	Casi [2]	Casi [2]	Ver el ejemplo
label	Sí	Sí	Ver el ejemplo
maxlength	No	No	Ver el ejemplo
method	Sí	Sí	Ver el ejemplo
multiple	Sí	Sí	Ver el ejemplo
name	Sí	Sí	Ver el ejemplo
readonly	No	No	Ver el ejemplo
rows	Sí	Sí	Ver el ejemplo
selected	Sí	Sí	Ver el ejemplo
size	Sí [3]	Sí [3]	Ver el ejemplo
value	Sí [4]	Sí [4]	Ver el ejemplo

Tabla 5: Atributos de los elementos de tabla

Atributo	Soporte IE6	Soporte IE7	Ejemplo
En el caso de colspan y rowspan, getAttribute devuelve siempre 1, incluso cuando inicialmente las celdas no cuentan con estos atributos; setAttribute no parece funcionar.
abbr	Sí	Sí	Ver el ejemplo
align	Sí	Sí	Ver el ejemplo
colspan	No [1]	No [1]	Ver el ejemplo
headers	Sí	Sí	Ver el ejemplo
rowspan	No [1]	No [1]	Ver el ejemplo
scope	Sí	Sí	Ver el ejemplo
summary	Sí	Sí	Ver el ejemplo
valign	No	No	Ver el ejemplo

Tabla 6: Atributos de img

Atributo	Soporte IE6	Soporte IE7	Ejemplo
alt	Sí	Sí	Ver el ejemplo
height	Sí	Sí	Ver el ejemplo
longdesc	No	No	Ver el ejemplo
src	Sí	Sí	Ver el ejemplo
width	Sí	Sí	Ver el ejemplo

Tabla 7: Atributos de meta

Atributo	Soporte IE6	Soporte IE7	Ejemplo
En el caso de http-equiv, getAttribute no obtiene el valor hasta que no se ha asignado el atributo a través de setAttribute.
content	Sí	Sí	Ver el ejemplo
http-equiv	Casi [1]	Casi [1]	Ver el ejemplo
name	Sí	Sí	Ver el ejemplo

Tabla 8: Atributos de script

Atributo	Soporte IE6	Soporte IE7	Ejemplo
Soportarlo, lo soporta, pero al cargar el nuevo .js mantiene el funcionamiento de la función alerta tanto de script_26a.js como de script_26b.js, y al hacer clic en el botón lanza los dos comportamientos de manera consecutiva.
src	Sí [1]	Sí [1]	Ver el ejemplo

La comprobación de los resultados para IE7 —versión 7.0.5730.11IC— en realidad no era necesaria, puesto que si revisamos el documento Technology Overview: Microsoft Windows Internet Explorer 7 (inglés), la única mejora referida a JavaScript afecta a XMLHttpRequest, que en IE7 es un objeto nativo. En fin, habrá que esperar para que el soporte de Explorer al DOM mejore…

Notas

1. Para los ejemplos, salvo contadas excepciones, empleo la misma que para esta página, la DTD de XHTML 1.1 (inglés).