La méthode getElementById() de Document renvoie un objet  Element représentant l'élément dont la propriété  id correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique.

Si vous avez besoin d'accéder à un élément qui n'a pas d'ID, vous pouvez utiliser querySelector() pour trouver l'élément en utilisant un sélecteur.

Syntaxe

var element = document.getElementById(id); 

Paramètres

id
L'ID (identifiant) de l'élément à localiser. Il est une chaîne de caractères sensible à la casse qui est unique ; un seul élément peut avoir un ID donné.

Valeur de retour

Un objet Element décrivant l'objet élément du DOM correspondant à l'ID spécifié ou null si aucun n'a été trouvé dans le document.

Exemple

Contenu HTML

<html>
<head>
  <title>getElementById example</title>
</head>
<body>
  <p id="para">Some text here</p>
  <button onclick="changeColor('blue');">blue</button>
  <button onclick="changeColor('red');">red</button>
</body>
</html>

Contenu JavaScript

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

Résultat

Notes d'utilisation

L'écriture de la lettre capitale de « Id » dans le nom de cette méthode doit être respectée pour que le code fonctionne ; getElementByID() n'est pas valide et ne fonctionnera pas, même si elle semble naturelle.

Contrairement à d'autres méthodes de recherche d'éléments, comme  Document.querySelector() et Document.querySelectorAll(), getElementById est uniquement disponible comme méthode de l'objet global document et n'est pas disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction.

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');
        //erreur de lancement 
        //TypeError inattendu : parentDOM.getElementById n'est pas une fonction 
    </script>
</body>
</html>

S'il n'y a pas d'élément avec l'id fourni, 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 !

Les documents non-HTML. 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.

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

Traduction en français (non normative) : getElementById

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

  
Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Oui) 1.0 (1.7 ou moins) 5.5 7.0 1.0
  
Fonctionnalité Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 (Oui) 1.0 (1.0) 6.0 6.0 1.0

Voir aussi

  • 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 : loella16, db0sch, genstor, fscholz, teoli, khalid32, BenoitL, Mgjbot, Takenbot
Dernière mise à jour par : loella16,