2011-10-19 12 views
22

Duplicar posible:
IE/Chrome: are DOM tree elements global variables here?
why window[id] === document.getElementById(id)referencia directamente a los elementos HTML

yo sólo he encontrado algo en html/javascript que me ha sorprendido un poco. Al obtener una referencia a un elemento html, utilizando javascript, siempre he usado previamente jQuery o document.getElementById. También parece que puede acceder directamente a un elemento simplemente usando su id. ¿Alguien puede explicar los matices de esto? He buscado en Google pero no puedo encontrar ninguna referencia a esta capacidad, cada sitio habla de getElementById.

El siguiente fragmento de página lo ilustra.

<html> 
<head> 
</head> 
<body> 
    <input type="button" value="getElement" onclick="document.getElementById('blah').innerText = 'getElementById'" /> 
    <input type="button" value="direct" onclick="blah.innerText = 'direct';" /> 
    <div id="blah"></div> 
</body> 

Muchas gracias de antemano.

+0

+1 No he encontrado esto antes, pero definitivamente funciona: http: // jsfiddle.net/qdrAr/ – Clive

+0

¿Qué navegadores ¿ha comprobado esto en? No se puede usar comúnmente porque puede no funcionar en todos los navegadores. –

+0

Esto no es un navegador cruzado. Algunos navegadores pueden haber comenzado a admitirlo, pero no todos, no las versiones anteriores de todos modos. – Nikoloff

Respuesta

14

Poder seleccionar elementos en la página según su [id] es una "característica" de JavaScript inicial (DOM lvl 0 o 1 methinks, parece que no puede encontrar la fuente).

Desafortunadamente es una característica temperamental. ¿Qué pasaría si tuviera:

<div id="window"></div> 

o

<div id="document"></div> 

Mejor aún, ¿qué pasa aquí?

<div id="foo"></div> 
<div id="bar"></div> 
<script>var foo = document.getElementById('bar');</script> 

Así los matices a llamar a un elemento basado en Es [id] es simplemente esto:

No usarlo.

No es consistente, y no se garantiza que recibirá soporte en el futuro.

Personalmente, me gustaría ver que esta "característica" siga el camino de document.all. Solo causa más problemas de los que resuelve, y document.getElementById, aunque es ciertamente prolijo, es significativo y comprensible.

+0

estoy de acuerdo con *** "No lo utilice" ***, pero por desgracia, ha desparasitados su camino en el [proyecto de trabajo HTML 5] (http://www.w3.org/TR/html5/browsers. html # named-access-on-the-window-object). Hay una [debate en curso] (http://www.w3.org/Bugs/Public/show_bug.cgi?id=11960) sobre él, donde, como era previsible, Microsoft está empujando para la normalización y Mozilla están presionando para limitar la "característica "solo para caprichos". Por lo que puedo ver, Microsoft afirma que cambiar el comportamiento de IE rompería una serie de sitios. –

+1

@AndyE, cambiando * * nada se romperá un número de sitios. Es porque el rango de sitios de trabajo a roto es continuo, no discreto. Hay * muchos * sitios que ya están rotos. – zzzzBov

2

El uso de getElementById es más flexible y legible. Por ejemplo, esto no funcionará:

<input type="button" value="direct" onclick="document.innerText = 'direct';" /> 
<div id="document"></div> 

por razones obvias, pero esta voluntad:

<input type="button" value="getElement" onclick="document.getElementById('document').innerText = 'getElementById'" /> 
<div id="document"></div> 

y es más claro para otros desarrolladores de lo que realmente está pasando.

0

No creo que sea una característica documentada, y no parece funcionar en Firefox (6), pero parece funcionar en la última versión de Chrome, así como en IE 6-9.

No confío en él, y lo consideraría una de las rarezas de las características de los navegadores.

Cuestiones relacionadas