- JavaScript manejo del DOM
- Manejar el DOM en JavaScript
- Cambiar color usando el DOM en JavaScript
- JavaScript manejando el DOM por sus etiquetas
- JavaScript manejando el DOM con las clases
- JavaScript manejando el DOM
<p>
párrafos, <div>
cajas, <h1>
etiquetas de texto, <span>
contenedor en línea, ...Veamos un ejemplo inicial donde vamos a trabajar leyendo, modificando y alterando propiedades de un elemento
<div>
identificado por su id.En el documento HTML es importante poner la llamada al script al final del body par que de tiempo a que se escriba la página web tal y como se ha definido en el documento html y que luego el código JS pueda leer y alterar lo escrito. Si ponemos los script arriba en el body o incluso en el head podremos comprobar que nuestro código no es capaz de leer o modificar lo escrito, ya que aún no se ha escrito por parte del código HTML.
https://repl.it/@valoro/JS-DOM1
HTML
Observe que llamamos al código JavaScript con una línea antes de que finalice elbody
. Lo aconsejable es llamar al script dentro del head
. De este tema se habla en la siguiente entrada del blog: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>modifica el DOM</title>
</head>
<body>
<div id="micaja">Texto inicial del cuerpo</div>
<!--Scripts -->
<script src="dom1.js"></script>
</body>
</html>
JavaScript
'use strict'
//DOM = Document Object Model
//Veo el contenido del ID completo (como objeto)
var caja=document.getElementById("micaja");
console.log(caja);
//Veo el texto del ID
caja=document.getElementById("micaja").innerHTML;
console.log(caja);
//Puedo modificar el texto desde JS
caja=document.getElementById("micaja");
caja.innerHTML="Nuevo texto escrito desde JS";
console.log(caja.innerHTML);
//Cambio el style de la caja
caja.style.color="red";
caja.style.backgroundColor="yellow";
caja.style.padding="20px";
//Usando la función cambiaColor
cambiaColor("beige");
function cambiaColor(color){
caja.style.background=color;
}
En la línea 5 del código anterior podemos leer:
var caja=document.getElementById("micaja");
Esta expresión puede ser sustituida por la siguiente obteniendo el mismo resultado.
var caja=document.querySelector("#micaja");
Con este segundo método estamos usando un
querySelector
y estamos haciendo referencia a "#micaja"
de forma similar a como lo haríamos en CSS con el uso de #
y el id.
Seguidamente se muestran los textos que se ven en pantalla a medida que el código va actuando.
No hay comentarios:
Publicar un comentario