O DOM HTML permite JavaScript para alterar o conteúdo de elementos HTML.
Alterando o fluxo de saída HTML
JavaScript pode criar conteúdo HTML dinâmico:
Encontro:Sun 06 de novembro de 2016 19:23:35 GMT + 0800 (中国标准时间)
Em JavaScript, document.write() pode ser usado para escrever directamente para o fluxo de saída HTML:
Exemplo
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Tente você mesmo " Nunca use document.write() depois que o documento é carregado. Ele irá substituir o documento.
Alterar conteúdo HTML
A maneira mais fácil de modificar o conteúdo de um elemento HTML é usando o innerHTML propriedade.
Para alterar o conteúdo de um elemento HTML, use esta sintaxe:
document.getElementById(id).innerHTML = new HTML
Este exemplo altera o conteúdo de um <p> elemento:
Exemplo
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Tente você mesmo " Este exemplo altera o conteúdo de um <h1> elemento:
Exemplo
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>
Tente você mesmo " Exemplo explicou:
- O documento HTML acima contém um <h1> elemento com id="header"
- Nós usamos o HTML DOM para obter o elemento com id="header"
- A JavaScript altera o conteúdo (innerHTML) desse elemento
Alterar o valor de um atributo
Para alterar o valor de um atributo HTML, use esta sintaxe:
document.getElementById(id).attribute=new value
Este exemplo altera o valor do atributo src de uma <img> elemento:
Exemplo
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Tente você mesmo " Exemplo explicou:
- O documento HTML acima contém um <img> elemento com id="myImage"
- Nós usamos o HTML DOM para obter o elemento com id="myImage"
- A JavaScript altera o src atributo desse elemento de "smiley.gif" para "landscape.jpg"
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »