contenu HTML DOM Modifier le code HTML
A travers le DOM HTML, JavaScript peut accéder au document HTML pour chaque élément.
Modifier le contenu HTML
La meilleure façon de modifier le contenu de l'élément est d'utiliser la propriété innerHTML.
L'exemple suivant modifie <p> dans le contenu HTML:
Exemples
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
Essayez »
styles Changement HTML
A travers le DOM HTML, vous pouvez accéder à l'objet de style HTML de l'objet.
L'exemple suivant modifie les styles de paragraphe HTML:
Exemples
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Essayez »
Utiliser l'événement
DOM HTML vous permet d'exécuter du code lorsqu'un événement se produit.
Lorsque l'élément HTML "quelque chose se passe", le navigateur génère un événement:
- Cliquez sur un élément
- Chargement de la page
- Modifiez le champ d'entrée
Vous pouvez en apprendre plus sur l'événement dans le chapitre suivant.
Voici deux exemples pour changer la couleur de fond élément <body> dans le bouton est cliqué:
Exemples
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
Essayez »
Dans ce cas, la fonction effectue le même code:
Exemples
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
Essayez »
L'exemple suivant modifie l'élément texte <p> dans le bouton est cliqué:
Exemples
<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>
Essayez »