document.
Renvoie l’élément portant l’identifiant donné (l’attribut id), ou null s’il n’existe pas.
- Renvoie
- L’élément portant l’
iddonné, ounull.
Exemple
#const title = document.getElementById('title')
console.log(title)
console.log(title.textContent)
console.log(document.getElementById('#title'))
console.log(document.getElementById('Title'))Définition et utilisation
#La méthode getElementById() renvoie l’élément dont l’attribut id est égal à la chaîne donnée. Vous indiquez seulement le nom, sans le caractère #, car ce n’est pas un sélecteur CSS. La casse compte.
Un identifiant doit être unique dans tout le document. Si, par erreur, plusieurs éléments partagent le même id, la méthode renvoie le premier. Quand l’élément n’existe pas, le résultat est null.
C’est la façon la plus ancienne et la plus simple de récupérer un élément. Elle ne fonctionne que sur l’objet document, pas sur un élément en particulier. Dans du code plus récent, vous verrez tout aussi souvent document.querySelector("#id"), qui donne le même résultat mais accepte n’importe quel sélecteur.
Syntaxe
#document.getElementById(id)Paramètres
#id
chaîne
La valeur de l’attributidde l’élément recherché, sans le caractère#.
Plus d’exemples
#const points = document.getElementById('points')
points.textContent = Number(points.textContent) + 30
console.log(points.textContent)const byId = document.getElementById('start-btn')
const bySelector = document.querySelector('#start-btn')
console.log(byId === bySelector)Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- N’ajoutez pas de
#devant le nom.getElementById("#menu")cherche un élément avecid="#menu"et renverranull. - Veillez à l’unicité des
id. Des identifiants dupliqués cassent aussi les étiquettes de formulaire et les liens vers des sections de la page. - Ne comptez pas sur le fait que le navigateur crée des variables globales nommées d’après vos identifiants. Récupérez toujours les éléments explicitement.
Entrées associées
#- querySelector() vs getElementById()querySelector() accepte tout sélecteur CSS et renvoie le premier élément correspondant ; getElementById() cherche seulement par l’attribut id, mais est plus simple.
- document.querySelector()Renvoie le premier élément qui correspond à un sélecteur CSS, ou null si rien ne correspond.
- document.querySelectorAll()Renvoie une liste statique (NodeList) de tous les éléments qui correspondent à un sélecteur CSS.
- Node.textContentLit ou définit tout le texte d’un élément, sans les balises HTML.
- EventTarget.addEventListener()Enregistre une fonction appelée à chaque fois qu’un événement se produit sur un élément, par ex. un clic.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.