El contenido HTML DOM Edición de HTML
A través del DOM HTML, JavaScript puede acceder al documento HTML para cada elemento.
Cambiar el contenido HTML
La forma más fácil de cambiar el contenido del elemento es el uso de la propiedad innerHTML.
En el siguiente ejemplo se cambia el elemento <p> en el contenido HTML:
Ejemplos
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
Trate »
Cambiar los estilos HTML
A través del DOM HTML, se puede acceder al objeto de estilo HTML objeto.
El ejemplo siguiente cambia los estilos de párrafo HTML:
Ejemplos
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Trate »
uso de eventos
HTML DOM permite ejecutar código cuando se produce un evento.
Cuando el elemento HTML "algo está pasando", el navegador generará un evento:
- Haga clic en un elemento
- Cargando la página
- Cambie el campo de entrada
Usted puede aprender más sobre el evento en el siguiente capítulo.
La siguiente dos ejemplos para cambiar el color de fondo <body> en el botón se hace clic en:
Ejemplos
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
Trate »
En este caso, la función realiza el mismo código:
Ejemplos
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
Trate »
En el siguiente ejemplo se cambia se hace clic en el elemento de texto <p> en el botón:
Ejemplos
<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>
Trate »