Résumé
Renvoie l'élément dont l'ID est celui spécifié.
Syntaxe
element = document.getElementById(id);
où
elementest un objet de type element.idest une chaîne représentant l'identifant unique de l'élément voulu.
Exemple
<html>
<head>
<title>Exemple d'utilisation de getElementById</title>
<script type="text/javascript">
function changeCouleur(nouvelleCouleur) {
elem = document.getElementById("para1");
elem.style.color = nouvelleCouleur;
}
</script>
</head>
<body>
<p id="para1">Un peu de texte.</p>
<button onclick="changeCouleur('blue');">bleu</button>
<button onclick="changeCouleur('red');">rouge</button>
</body>
</html>
Notes
S'il n'existe pas d'élément avec l'ID donné, cette fonction renvoie null. Remarquons aussi que les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut id est défini comme étant de type ID dans les langages courants comme XHTML ou XUL. Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer null.
Il ne suffit pas de créer un élément et de lui assigner un ID pour le rendre accessible par getElementById. Pour cela, il est nécessaire d'insérer l'élément dans l'arbre du document avec insertBefore ou une méthode similaire, par exemple dans un élément DIV invisible.
var element = document.createElement("div");
element.id = 'testqq';
var el = document.getElementById('testqq'); // el vaudra null !
Il est à noter que la casse de la partie « Id » doit être respectée pour que le code fonctionne. L'orthographe « getElementByID » ne fonctionnera pas, même si elle peut avoir l'air naturelle.
getElementById a été introduit dans le DOM Level 2.
Spécification
- Spécification DOM Level 2 Core : getElementById
- Traduction en français (non normative) : getElementById
Voir également
- xml:id dispose d'une méthode utilitaire permettant à getElementById d'obtenir les valeur 'xml:id' dans les documents XML (comme ceux qui pourraient être renvoyés par des appels Ajax).