conteúdo HTML DOM Editar HTML
Através do DOM HTML, JavaScript pode acessar o documento HTML para cada elemento.
Alterar o conteúdo HTML
A maneira mais fácil para alterar o conteúdo do elemento é usar a propriedade innerHTML.
O exemplo a seguir altera elemento <p> no conteúdo HTML:
Exemplos
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
tente »
Alterar os estilos de HTML
Através do DOM HTML, você pode acessar o objeto objeto de estilo HTML.
O exemplo a seguir altera os estilos de parágrafo HTML:
Exemplos
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
tente »
Use Evento
HTML DOM permite que você execute código quando ocorre um evento.
Quando o elemento HTML "algo está acontecendo", o navegador irá gerar um evento:
- Clique em um elemento
- Carregando página
- Alterar o campo de entrada
Você pode aprender mais sobre o evento no próximo capítulo.
A seguir, dois exemplos de mudar a cor de fundo <body> no botão é clicado:
Exemplos
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
tente »
Neste caso, a função executa o mesmo código:
Exemplos
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
tente »
O exemplo a seguir altera o elemento de texto <p> no botão é clicado:
Exemplos
<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>
tente »