5.1 documento.getElementById()
Como sabe, JavaScript se creó para agregar algo de animación a las páginas HTML. Hasta ahora, no hemos dicho mucho al respecto. ¿Cómo agregar esta misma animación? ¿Cómo, por ejemplo, cambiar el color de un elemento?
Para cambiar el color de un elemento, primero debe encontrar este elemento. Para hacer esto, hay una función document.getElementById();que escribe en su HTML iden el elemento deseado y luego accede desde JavaScript. Ejemplo:
<head>
<script>
function changeImage()
{
var image = document.getElementById("image123");
image.src = "new-image.png";
}
</script>
</head>
<body>
<img id="image123" scr="big-image.png" onclick="changeImage()">
</body>Después de que el usuario hace clic en la imagen, se llama a la función changeImge(). Dentro de él, obtenemos el elemento imagepor su ID, y luego cambiamos el valor de su atributo src a uno nuevo. Lo que hará que el elemento imgcargue una nueva imagen.
5.2 documento.createElement()
Además de obtener un elemento, también podemos crear nuevos elementos y eliminar los existentes.
Crear elementos es muy fácil. Para hacer esto, debe hacer dos cosas: a) crear un elemento , b) agregarlo en el lugar correcto del documento. Por lo general, se ve así:
<head>
<script>
window.onload = function () {
var image = document.createElement("IMG");
var image.src = "big-image.png";
document.body.addAfter(image);
}
</script>
</head>
<body>
</body>5.3 método ventana.navegar()
Otro método muy útil es el window.navigate(). Con él, puede obligar al navegador a cargar una nueva página en lugar de la actual. Simplemente páselo URLa este método y llámelo. Ejemplo:
<body>
<img scr="big-image.png" onclick="window.navigate('https://google.com');">
</body>En el ejemplo anterior, después de que el usuario haga clic en la imagen, la página google.com se cargará en la pestaña actual.
5.4 URL actual
Y una cosa más útil. A veces, un script necesita saber la URL de la página actual. Por ejemplo, el mismo script se puede agregar a diferentes páginas. ¿Cómo hacerlo?
Hay una propiedad especial para esto.document.location.href
var currentURL = document.location.href;