Ir directamente al contenido de esta página
getAttribute
y setAttribute
en Internet Explorer 6No 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.
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.
Seguidamente, me pregunté en qué se diferenciaba href
de style
, y pensé: «¿acaso no es href
obligatorio según la DTD que estoy empleando1?».
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.
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.
…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.
Atributo | Soporte IE6 | Soporte IE7 | Ejemplo |
---|---|---|---|
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 |
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 |
Atributo | Soporte IE6 | Soporte IE7 | Ejemplo |
---|---|---|---|
| |||
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 |
Atributo | Soporte IE6 | Soporte IE7 | Ejemplo |
---|---|---|---|
| |||
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 |
Atributo | Soporte IE6 | Soporte IE7 | Ejemplo |
---|---|---|---|
| |||
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 |
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 |
Atributo | Soporte IE6 | Soporte IE7 | Ejemplo |
---|---|---|---|
| |||
content | Sí | Sí | Ver el ejemplo |
http-equiv | Casi [1] | Casi [1] | Ver el ejemplo |
name | Sí | Sí | Ver el ejemplo |
Atributo | Soporte IE6 | Soporte IE7 | Ejemplo |
---|---|---|---|
| |||
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…