objetos - ¿Por qué no utilizamos identificadores de elemento como identificadores en JavaScript?

metodos en javascript

Question

Todos los navegadores con los que he trabajado permiten acceder a un elemento con id="myDiv" simplemente escribiendo:

myDiv

Vea aquí: http://jsfiddle.net/L91q54Lt/

De todos modos, este método parece estar bastante mal documentado, y de hecho, las fuentes que encuentro ni siquiera lo mencionan y en su lugar se supone que uno usaría

document.getElementById("myDiv")

o tal vez

document.querySelector("#myDiv")

para acceder a un elemento DOM incluso cuando su ID se conoce de antemano (es decir, no calculada en tiempo de ejecución). Puedo decir que estos últimos enfoques tienen la ventaja de mantener el código seguro si alguien, sin darse cuenta, intenta redefinir myDiv en un ámbito más amplio (aunque no es una idea tan brillante ...), lo sobreescribe con un valor diferente y continúa sin darse cuenta de la choque.

Pero otro que eso? ¿Existe alguna preocupación en el uso del formulario corto que no sea el diseño del código, o qué más me falta aquí?

Answer 1

De todos modos, este método parece estar bastante mal documentado, y de hecho, las fuentes que encuentro ni siquiera le dan una mención [...]

Dejando a un lado las variables globales implícitamente declaradas, la falta de documentación es una gran razón para no usarla.

La aparente promoción de los valores de id en variables globales no cumple con los estándares (la especificación de HTML5 para el atributo ID no lo menciona) y, por lo tanto, no debe suponer que futuros navegadores lo implementarán.

EDITAR: Resulta que este comportamiento cumple con los estándares: en HTML5, la window debe admitir el acceso de propiedad a "Elementos con nombre":

Los objetos nombrados con el nombre, a los efectos del algoritmo anterior, son los que son:

• contextos de exploración infantil del documento activo cuyo nombre es nombre ,
• a, applet, area, embed, form, frameset, img, o elementos de objeto que tienen un atributo de contenido de nombre cuyo valor es name , o
• Elementos HTML que tienen un atributo de contenido de identificación cuyo valor es nombre .

Fuente: especificación HTML 5, ''Acceso con nombre en el objeto ventana'' , énfasis mío .

En base a esto, el cumplimiento de los estándares no es una razón para evitar este patrón. Sin embargo, la especificación en sí misma desaconseja su uso:

Como regla general, confiar en esto conducirá a un código frágil. Los ID que terminan asignando a esta API pueden variar con el tiempo, a medida que se agregan nuevas características a la plataforma web, por ejemplo. En lugar de esto, use document.getElementById() o document.querySelector() .

Answer 2

Gran pregunta Como Einstein probablemente no dijo, las cosas deberían ser lo más simples posible, y no más simples.

estos últimos enfoques tienen la ventaja de mantener el código seguro si alguien, inadvertidamente, intenta redefinir myDiv en un ámbito más amplio (aunque no es una idea tan brillante ...), lo sobrescribe con un valor diferente y continúa sin darse cuenta del choque.

Esa es la razón principal por la cual esta es una mala idea, y es suficiente. No es seguro confiar en las variables globales. Se pueden sobrescribir en cualquier momento, mediante cualquier script que termine ejecutándose en la página.

Además de eso, solo escribir en myDiv no es una "forma abreviada" de document.getElementById() . Es una referencia a una variable global. document.getElementById() devolverá null si el elemento no existe, mientras intenta acceder a una variable global inexistente arrojará un error de referencia, por lo que tendría que ajustar sus referencias al global en un try / catch bloquear para estar seguro.

Esta es una de las razones por las cuales jQuery es tan popular: si haces $("#myDiv").remove() , y no hay ningún elemento con un id de myDiv , no se lanzará ningún error: el código simplemente no hará nada en silencio. que a menudo es exactamente lo que quieres cuando realizas la manipulación DOM.

Answer 3

Hay unas pocas razones:

No desea que su código y su marcado combinen.

Al usar una llamada específica para acceder a un div, no tiene que preocuparse porque el espacio global esté dañado. Agregue una biblioteca que declara myDiv en el espacio global y se encuentra en un mundo de dolor que será difícil de solucionar.

Puede acceder a los elementos, por ID, que no son parte del DOM

Pueden estar en un fragmento, un marco o un elemento que se ha separado y aún no se ha vuelto a conectar al DOM.

EDITAR: Ejemplo de acceso a elementos no conectados por ID

var frag = document.createDocumentFragment();
var span = document.createElement("span");
span.id = "span-test";
frag.appendChild(span);
var span2 = frag.getElementById("span-test");
alert(span === span2);