Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Document : La méthode getElementById()
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La méthodegetElementById() de l'interfaceDocument renvoie un objetElement 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 utiliserquerySelector() pour trouver l'élément en utilisant unsélecteur.
Note :Les identifiants doivent être uniques à l'intérieur d'un document. Si deux éléments ou plus — d'un document — ont le même ID, cette méthode renvoie le premier élément trouvé.
Syntaxe
getElementById(id)Note :La capitalisation de"Id" dans le nom de cette méthodedoit être correcte pour que le code fonctionne ;getElementByID() n'estpas valide et ne fonctionnera pas, aussi naturel que cela puisse paraître.
Paramètres
idL'identifiant (ID) 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 objetElement décrivant l'objet élément du DOM correspondant à l'identifiant (ID) spécifié ounull si aucun n'a été trouvé dans le document.
Exemples
HTML
<html lang="fr"> <head> <title>exemple de getElementById</title> </head> <body> <p>Un peu de texte ici</p> <button>bleu</button> <button>rouge</button> </body></html>JavaScript
function changerCouleur(nouvelleCouleur) { const paragraphe = document.getElementById("para"); paragraphe.style.color = nouvelleCouleur;}Résultat
Notes d'utilisation
Contrairement à d'autres méthodes de recherche d'éléments, commeDocument.querySelector() etDocument.querySelectorAll(),getElementById est uniquement disponible comme méthode de l'objet globaldocument etn'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 a pas besoin d'avoir une version « locale » de la fonction.
Exemple
<!doctype html><html lang="fr"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div> <p>bonjour tout le monde1</p> <p>bonjour tout le monde2</p> <p>bonjour tout le monde3</p> <p>bonjour tout le monde4</p> </div> <script> const parentDOM = document.getElementById("parent-id"); const 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'identifiant (id) fourni, cette fonction retournenull. À noter que le paramètreid est sensible à la casse, ainsidocument.getElementById("Main") retourneranull au lieu de l'élément<div> étant donné que « M » et « m » sont différents pour cette méthode.
Les éléments absents du document ne sont pas cherchés pargetElementById(). Quand vous créez un élément et y assignez un ID, vous devez insérer l'élément dans l'arbre du document avecNode.insertBefore() ou une méthode similaire avant de pouvoir y accéder avecgetElementById() :
const element = document.createElement("div");element.id = "testqq";const el = document.getElementById("testqq"); // el vaudra null !Dans des 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'attributid est défini comme étant de type ID dans les langages courants commeXHTML, XUL, et d'autres. Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyernull.
Spécifications
| Specification |
|---|
| DOM # ref-for-dom-nonelementparentnode-getelementbyid② |
Compatibilité des navigateurs
Voir aussi
- L'interface
Documentré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. - La méthode
Document.querySelector()pour utiliser des sélecteurs avec des requêtes comme'div.myclass'. - La méthode
Document.evaluate()qui dispose d'une méthode utilitaire pour sélectionner parxml:iddans les documentsXHTML.