MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

Renvoie une référence de l'élément correspondant à l'ID ; l'ID est une chaîne de caractères utilisée pour identifier de manière unique l'élément, il est trouvé dans l'attribut HTML id.

Syntaxe

element = document.getElementById(id); 

Paramètres

id
est une chaîne de caractère sensible à la casse représentant l'ID the l'élément recherché.

Valeur de retour

 

element
est une référence à un objet Element, ou null si aucun élément avec l'ID spécifié n'existe dans le document.

Exemple

Contenu HTML

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

Contenu JavaScript

function changeColor(newColor) {
  var elem = document.getElementById('para');
  elem.style.color = newColor;
}

Notes

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.

Contrairement à d'autres méthodes similaires, getElementById est uniquement disponible comme méthode de l'objet global document, et n'est pas disponible sur tous les objets du DOM. Un ID devant être unique par rapport à l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la function.

Exemple

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="parent-id">
        <p>hello word1</p>
        <p id="test1">hello word2</p>
        <p>hello word3</p>
        <p>hello word4</p>
    </div>
    <script>
        var parentDOM = document.getElementById('parent-id');
        var test1=parentDOM.getElementById('test1');
        //throw error
        //Uncaught TypeError: parentDOM.getElementById is not a function
    </script>
</body>
</html>

S'il n'y a pas d'élément avec l'id fournit, cette fonction retourne null. A noter que le paramètre id est sensible à la casse, ainsi document.getElementById("Main") retournera null au lieu de l'élément <div id="main"> étant donné que "M" et "m" sont différents pour cette méthode.

Les éléments absents du document ne sont pas cherchés par getElementById(). Quand vous créez un élément et y assignez un ID, vous devez insérer l'élément dans l'arbre du document avec Node.insertBefore() ou une méthode similaire avant de pouvoir y accéder avec getElementById() :

var element = document.createElement('div');
element.id = 'testqq';
var el = document.getElementById('testqq'); // el vaudra null !

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

getElementById a été introduit dans le DOM Level 2.

Spécification

Spécification Statut Commentaire
Document Object Model (DOM) Level 1 Specification
La définition de 'getElementById' dans cette spécification.
Obsolete Définition initiale de l'interface
Document Object Model (DOM) Level 2 Core Specification
La définition de 'getElementById' dans cette spécification.
Obsolete Remplace DOM 1
Document Object Model (DOM) Level 3 Core Specification
La définition de 'getElementById' dans cette spécification.
Obsolete Remplace DOM 2
DOM
La définition de 'getElementById' dans cette spécification.
Standard évolutif Remplacera DOM 3

Voir également

  • Document référence pour d'autres méthodes et propriétés que vous pouvez utiliser pour obtenir la référence vers des éléments du document.
  • Document.querySelector() pour utiliser des sélecteurs avec des requêtes comme 'div.myclass'
  • 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

 Contributeurs à cette page : genstor, fscholz, teoli, khalid32, BenoitL, Mgjbot, Takenbot
 Dernière mise à jour par : genstor,