HTML DOM - Modifier le contenu HTML
Grâce au HTML DOM, JavaScript peut accéder à chaque élément du document HTML.
Modifier le contenu HTML
Le moyen le plus simple de modifier le contenu d'un élément est d'utiliser la propriété innerHTML.
L'exemple suivant modifie le contenu HTML de l'élément <p> :
Instance
<html><!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>Exécuter l'instance »
Cliquez sur le bouton "Exécuter l'exemple" pour voir l'exemple en ligne
Changer les styles HTML
Grâce au DOM HTML, vous pouvez accéder au style objet de l'objet HTML.
L'exemple suivant modifie le style HTML d'un paragraphe :
Exemple
<html><!DOCTYPE html>
<html>
<body>
<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
</body>
</html>Exécuter l'exemple»
Cliquez sur le bouton "Exécuter l'instance" pour afficher une instance en ligne
Utilisation d'événements
HTML DOM vous permet d'exécuter du code lorsque des événements se produisent.
Quand "quelque chose arrive" à un élément HTML, le navigateur génère un événement :
Cliquez sur l'élément
Charger la page
Modifier les champs de saisie
Vous pourrez en savoir plus sur les événements dans le chapitre suivant.
Les deux exemples suivants modifient la couleur d'arrière-plan de l'élément <body> lorsque vous cliquez sur le bouton :
Exemple
<html><!DOCTYPE html> <html> <body> <input type="button" onclick="document.body.style.backgroundColor='lavender';" value="Change background color"> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Dans cet exemple, le même code est exécuté par la fonction :
Instance
<html><!DOCTYPE html>
<html>
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()" value="Change background color" />
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
L'exemple suivant se produit lorsque l'on clique sur le bouton Lors de la modification du texte de l'élément <p> :
Instance
<html><!DOCTYPE html>
<html>
<body>
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="New text!";
}
</script>
<input type="button" onclick="ChangeText()" value="Change text" />
</body>
</html>Exécuter Instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher des exemples en ligne
