Alto Código: JavaScript manejo del DOM

Este artículo forma parte de una serie que trata sobre el DOM (Document Object Model) y su manejo desde JavaScript.

El DOM contiene, en forma de arbol, todos los elementos que podemos manejar de una página web entendida como documento. Podemos manejar todas aquellas etiquetas que utilizamos: <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 el body. Lo aconsejable es llamar al script dentro del head. De este tema se habla en la siguiente entrada del blog:

Comenzar la ejecución de un programa en Javascript al ir a una página

 <!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.