getElementById
Leçon 3 sur 13 du cours Méthodes DOM en JavaScript de Coddy.
La fonction getElementById() récupère le premier élément avec un attribut id correspondant, par exemple :
const element = document.getElementById("elementId"); Ce qui précède récupère l'élément avec un identifiant elementId et l'enregistre dans une variable nommée element.
Notez le préfixe
document, il s'agit du DOM du fichier HTML.
Après avoir récupéré un élément, vous pouvez le manipuler en utilisant JavaScript !
La première propriété que nous allons apprendre est textContent qui contient le contenu textuel de l'élément. Vous pouvez modifier le texte comme ceci :
const element = document.getElementById("elementId");
element.textContent = "some text";Après ce code, le texte de #elementId sera some text
Défi
FacileOn vous donne un code HTML qui contient un titre avec un ID.
En utilisant uniquement JavaScript, modifiez le texte de cet élément en “Hello!” :
- Récupérez l'élément en utilisant la fonction
getElementById. - Modifiez le texte de l'élément en utilisant la propriété
textContent.
Essayez vous-même
<!DOCTYPE html>
<html>
<body>
<h1 id="heading">Welcome!</h1>
<script src="script.js"></script>
</body>
</html>Toutes les leçons de Méthodes DOM en JavaScript
2Méthodes du DOM I
getElementByIdModifier le style d'un élémentgetElementsByClassNameParcourir et manipulergetElementsByTagNamequerySelector