contenuto HTML DOM Modifica HTML
Attraverso il DOM HTML, JavaScript può accedere al documento HTML per ogni elemento.
Modificare il contenuto HTML
Il modo più semplice per modificare il contenuto dell'elemento è quello di utilizzare la proprietà innerHTML.
L'esempio seguente modifica <p> elemento nel contenuto HTML:
Esempi
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
Prova »
Cambiare gli stili HTML
Attraverso il DOM HTML, è possibile accedere all'oggetto oggetto stile HTML.
L'esempio seguente modifica gli stili di paragrafo HTML:
Esempi
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Prova »
Utilizzare eventi
HTML DOM consente di eseguire il codice quando si verifica un evento.
Quando l'elemento HTML "sta succedendo qualcosa", il browser genera un evento:
- Fare clic su un elemento
- caricamento della pagina
- Modificare il campo di input
Si può imparare di più sull'evento nel prossimo capitolo.
Di seguito due esempi per cambiare il colore di sfondo elemento <body> in fa clic sul pulsante:
Esempi
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
Prova »
In questo caso, la funzione esegue lo stesso codice:
Esempi
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
Prova »
L'esempio seguente modifica l'elemento di testo <p> in fa clic sul pulsante:
Esempi
<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>
Prova »