getElementById() en JavaScript : retrouver un élément par son identifiant

C'est la plus ancienne façon de mettre la main sur un élément, et elle a survécu à tout le reste. Un identifiant, un appel, un élément.

Sa longévité tient à sa simplicité : aucun sélecteur à analyser, un index interne tenu par le navigateur, et une intention lisible d'un coup d'œil.

Définition

getElementById reçoit la valeur d'un attribut id et rend l'élément qui la porte, ou null si aucun élément ne la porte. Le nom se passe seul, sans le dièse des sélecteurs CSS.

const bouton = document.getElementById("valider");
const rate = document.getElementById("#valider");

console.log(bouton.textContent);
console.log(rate);   // null : le dièse n'a rien à faire ici

La méthode n'existe que sur document. Un élément ne la possède pas, ce qui est logique : un identifiant est censé être unique dans toute la page, la recherche n'a donc pas de raison d'être limitée à une branche.

Un identifiant, un seul élément

Le HTML impose qu'un même id n'apparaisse qu'une fois par document. Quand la règle est enfreinte, rien ne signale l'erreur : la méthode rend le premier élément rencontré dans l'ordre du document, et les suivants deviennent inatteignables.

• Une classe se répète librement, c'est son rôle. Un identifiant désigne un exemplaire unique.
• La casse compte : panier et Panier sont deux identifiants distincts.
• Les espaces sont interdits dans la valeur d'un id, contrairement à un attribut class.

Le piège des variables globales

Les navigateurs exposent chaque élément portant un identifiant comme une propriété de window. Le code suivant fonctionne donc, alors même qu'aucune variable n'a été déclarée.

// <div id="panier"></div>
console.log(panier);   // l'élément, sans aucune recherche

const panierSur = document.getElementById("panier");

Cette facilité est un piège. Une déclaration let portant le même nom, un identifiant renommé dans le HTML, et le code casse sans explication. Passez toujours par une recherche explicite rangée dans une const.

Questions fréquentes

Le résultat est identique lorsque l'identifiant est unique. querySelector() doit analyser un sélecteur avant de chercher, là où getElementById interroge directement un index. L'écart de vitesse est négligeable sur un appel isolé, et le choix relève surtout de la cohérence du fichier.

C'est justement là que cette méthode reprend l'avantage. Un identifiant commençant par un chiffre ou contenant un point casse un sélecteur CSS, qui exige alors un échappement par CSS.escape. getElementById compare des chaînes et ne s'en préoccupe pas.

Presque toujours parce que le script s'exécute avant que le navigateur ait analysé cette partie du HTML. Ajouter defer à la balise de script règle le cas le plus fréquent. Vérifiez ensuite l'orthographe exacte de l'identifiant, casse comprise.