Existe-t-il une spécification selon laquelle l'identité des éléments devrait être une variable globale?

Cela dépend de la spécification que vous lisez. 🙂

Ce comportement n'est pas décrit par la spécification HTML4 (cf, http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#adef-id et http: //www.w3. Org / TR / 1999 / REC-html401-19991224 / types.html # type-name ). Cependant, il a été introduit par Internet Explorer puis copié dans d'autres navigateurs principaux pour la compatibilité. FireFox affiche également ce comportement, mais seulement dans le mode de quirks (et même si sa mise en œuvre semble buggy).

La spécification HTML WHATWG nécessite actuellement ce comportement, mais il existe un bogue ouvert demandant qu'il soit supprimé.

Indépendamment de la conformité aux spécifications, l'utilisation de l'espace de noms global (c.-à-d. window ) pour le code d'application est généralement considérée comme un mauvais comportement. Envisager de référencer les ID d'élément à l'aide de document.getElementById() ou des méthodes de commodité jQuery (p. Ex., $("#a") ) et d'utiliser des variables de domaine fonctionnel pour éviter d'introduire de nouvelles variables dans l'espace de noms global.

Il y a une discussion plus longue sur ce comportement sur la liste de diffusion WHATWG .

Depuis très tôt, IE a créé des variables globales qui font référence aux éléments par leur nom ou leur valeur d'attribut id. Ce n'était jamais une bonne idée, mais a été copié par d'autres navigateurs afin d'être compatible avec les sites créés pour IE.

C'est une mauvaise idée et ne doit pas être copié ou utilisé.

modifier

Pour répondre à vos questions supplémentaires:

… comment Chrome résoudra-t-il l'ambiguïté si j'ai une div avec id a mais j'ai une variable globale aussi appelée dans mon script.

Dans IE (qui a introduit ce comportement) si une variable globale est déclarée avec le même nom qu'un identifiant ou un nom d'élément, il prend la présidence. Cependant, les globaux non déclarés ne fonctionnent pas de cette façon. Il ne faudra pas beaucoup pour tester cela dans Chrome (mais je ne vais pas vous donner la réponse).

Et comment un élément avec id composé de tirets ("-"), de deux-points (":") et de périodes (".") Soit traduit (ok je sais qu'ils peuvent y accéder avec document.getElementById mais comment le traducteur va-t-il traduire Dans la variable globale qui les représentait)

Exactement le même que n'importe quel nom de propriété d'objet qui n'est pas un identifiant valide – notation de parenthèse (c.-à-d. Window ['name-or-id']).

Techniquement, cette question est une opinion, mais c'est une bonne question.

IE fait cela aussi et il a causé des maux de tête pour certains.

Les règles de nomination des variables en JavaScript et ID en HTML sont différentes. Je ne vois pas comment c'est une bonne chose.

Par exemple, sur cette page, il y a un élément avec un identifiant de "notification-conteneur". Ce n'est pas un nom JavaScript valide du tout.

Aussi, quand ces noms sont-ils liés? Si un script en ligne déclare une variable et que l'élément apparaît plus tard, qui a préséance?

Il ne peut pas être cohérent.

Je pense que document.getElementById est pris en charge par la plupart des navigateurs jusqu'à présent. C'est mieux et plus sûr en utilisant celui-ci.

La pire chose à propos de l'utilisation d'éléments de cette façon, c'est qu'ils pourraient se briser à tout moment si une nouvelle API est introduite qui a le même nom dans la portée globale.

Par exemple, si vous aviez ceci avant l'ajout de l'API de performance

 <p id="performance"></p> <script> performance.innerHTML = "You're doing great" </script> 

Ensuite, ce code aurait cessé de fonctionner maintenant dans les navigateurs récents qui ont implémenté l'API Performance, car un objet de performance globale a été ajouté.