document.getElementById

« Référence du DOM

Résumé

Renvoie l'élément dont l'ID est celui spécifié.

Syntaxe

element = document.getElementById(id); 

  • element est un objet de type element.
  • id est 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

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).

Étiquettes et contributeurs liés au document

Étiquettes :
Contributeurs ayant participé à cette page : BenoitL, Takenbot, Mgjbot
Dernière mise à jour par : BenoitL,