Hoy me topé con la posibilidad de acceder a un elemento DOM en Javascript simplemente por su id. Me gusta esto:

elementid.style.backgroundColor = "blue"

Probé con un fragmento muy corto si esto funciona en IE, Firefox y Chrome, y lo hace. Aquí está el fragmento que usé:

<html><head>
<script>
    function highlight() {
        content.style.backgroundColor = "blue";
        content.style.color = "white";
    }
</script>
</head>
<body>
    <div id="content">test content</div>
    <div onclick="highlight()">highlight content</div>
</body></html>

Así que me pregunté en qué casos debería usarse document.getElementById('elementid') (o reemplazos de marco similares como $ ()) y cuáles son los inconvenientes del acceso directo.

No pude encontrar ninguna documentación útil sobre esto. En todas partes se utilizan getElementById o métodos de marco.

3
Turismo 8 jul. 2009 a las 14:24

3 respuestas

La mejor respuesta

Es propiedad gubbins de Microsoft. No funciona en muchos navegadores, especialmente en el modo estándar (y quiere que el modo estándar evite inconsistencias del modo de peculiaridades como que IE se equivoque width).

7
Quentin 8 jul. 2009 a las 10:34

No es parte de ningún estándar. Además, se pueden sobrescribir variables simples. Var content podría volver a declararse en cualquier lugar de su secuencia de comandos, o biblioteca externa (y, sí, sé que las variables globales son malas, pero aún así las usa ...) y su secuencia de comandos se romperá.

Y, naturalmente, no puede usar ID como alert o document etc.

2
Maciej Łebkowski 8 jul. 2009 a las 10:44

También debe preocuparse por el espacio de nombres. En este momento lo estás tratando como si fuera una variable en el espacio de nombre global, y no tendrías que confiar en ti ni en ninguna de las bibliotecas que incluyas para declarar cualquier variable global con el mismo nombre que las ID de DOM. Lo mismo ocurre con su función de resaltado.

Además, aunque las identificaciones con guiones son perfectamente válidas, sería inaccesible a través de este método.

P.ej. <div id="container-wrapper"><div id="container"> ... </div></div>

Se convertiría en container-wrapper.style.color, que luego trataría de restar wrapper.style.color del contenedor.

4
Keith Bentrup 8 jul. 2009 a las 10:49