Pourquoi n'utilisons-nous pas simplement les identifiants d'éléments comme identifiants dans JavaScript?

Question

Tous les navigateurs que j'ai été amené à travailler avec permettre d'accéder à un élément avec l' id="myDiv" simplement écrit:

myDiv

Voir ici: http://jsfiddle.net/L91q54Lt/

De toute façon, cette méthode semble être assez mal documenté, et en fait, les sources que j'ai trouver ne lui donne même pas une mention et, au lieu de supposer que l'on pourrait utiliser

document.getElementById("myDiv")

ou peut-être

document.querySelector("#myDiv")

pour accéder à un élément du DOM, même lorsque son ID est connu à l'avance (c'est à dire pas calculé au moment de l'exécution). Je peux dire que la dernière approches ont l'avantage de garder le code de sécurité si quelqu'un inadvertedly tente de redéfinir myDiv dans un champ plus large (pas une brillante idée, bien que...), écrase avec quelques différentes de la valeur et s'en va sans s'en apercevoir le choc.

Mais d'autres que ça? Existe-il des préoccupations en utilisant le formulaire court ci-dessus autres que le code de la conception, ou quoi d'autre qui me manque ici?

Answer 1

De toute façon, cette méthode semble être assez mal documenté, et En fait, les sources que j'ai trouver ne lui donne même pas une mention [...]

La dépendance sur implicitement-déclaration de variables globales de côté, le manque de documentation est une bonne raison de ne pas l'utiliser.

L'apparente promotion de l' id des valeurs dans des variables globales n'est pas conforme aux normes (la spec HTML5 pour l'attribut ID ne pas le mentionner) et, par conséquent, vous ne devriez pas supposer l'avenir des navigateurs de la mettre en œuvre.

EDIT: Il s'avère que ce comportement est conforme aux standards HTML5, window devrait soutenir l'accès à la propriété pour "le nom des Éléments":

Les objets nommés avec le nom de nom, pour l'application de l'algorithme ci-dessus, sont ceux qui sont soit:

• enfant de navigation contextes du document actif dont le nom est nom,
• a, applet, région, intégrer, former, frameset, img, ou l'objet des éléments qui ont un nom contenu de l'attribut dont la valeur est le nom, ou
• Les éléments HTML qui ont un id de contenu de l'attribut dont la valeur est le nom.

Source: HTML 5 spec, Nommé d'accès sur la fenêtre de l'objet", l'accent de la mine.

Sur cette base, le respect des normes n'est pas une raison pour éviter de ce modèle. Toutefois, la spécification elle-même déconseille son utilisation:

En règle générale, en s'appuyant sur cela conduira à une fragilité de code. Qui Id en fin de cartographie de cette API peut varier au fil du temps, que de nouvelles fonctionnalités sont ajouté à la plate-forme Web, par exemple. Au lieu de cela, utilisez document.getElementById() ou document.querySelector().

Answer 2

Grande question. Ce qu'Einstein n'a probablement pas dire, que les choses devraient être aussi simples que possible, et pas plus.

le dernier approches ont l'avantage de garder le code de sécurité si quelqu'un inadvertedly tente de redéfinir myDiv dans un champ plus large (pas une brillante idée, bien que...), écrase avec quelques différentes de la valeur et s'en va sans s'en apercevoir le choc

C'est la raison principale pourquoi c'est une mauvaise idée, et c'est assez. Les variables globales ne sont pas sûrs de s'appuyer sur. Ils peuvent être remplacés à tout moment, par n'importe quel script qui se termine en cours d'exécution sur la page.

En plus de cela, juste en tapant dans myDiv n'est pas une "forme courte" de document.getElementById(). C'est une référence à une variable globale.document.getElementById() sera heureux de revenir null si l'élément n'existe pas, tout en essayant d'accéder à un inexistante variable globale jeter une erreur de référence, de sorte que vous aurez besoin pour emballer vos références pour le mondial dans un bloc try/catch pour être sûr.

C'est une des raisons pourquoi jQuery est si populaire: si vous n' $("#myDiv").remove(), et il n'y a pas d'élément avec l'id myDiv, aucune erreur ne sera générée - le code juste en silence de ne rien faire, ce qui est souvent exactement ce que vous voulez quand vous faites de manipulation du DOM.

Answer 3

Il ya quelques raisons:

Vous ne voulez pas que votre code et votre balisage qui couplé.

À l'aide d'un appel spécifique à l'accès à une div, vous n'avez pas à vous soucier de l'espace mondial étant endommagé. Ajouter une bibliothèque qui déclare myDiv dans l'espace global et vous êtes dans un monde de douleur qui va être difficile à corriger.

Vous pouvez accéder à des éléments, par ID, qui ne font pas partie du DOM

Ils peuvent être dans un fragment, une image ou un élément qui a été détaché et non ré-attaché à la DOM encore.

EDIT: Exemple d'accès à une non-attaché éléments en 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);