¿ Qué es el DOM ?

DOM son las siglas de Document Object Model o Modelo de Objetos del Documento. Es un conjunto de objetos que modelizan cada uno de los elementos que aparecen en el documento HTML visible, es decir, en la página web que el navegador está mostrando en este momento.

Por medio del DOM podremos controlar el documento de manera global y a los distintos elementos que se encuentran en la página, para hacer todo tipo de efectos y dinamismos, responder a las acciones del usuario de manera visual y en general cualquier modificación del documento actual en el navegador.

Cuando se carga una página, el navegador crea una jerarquía de objetos en memoria que sirven para controlar los distintos elementos de dicha página. Con Javascript y la nomenclatura de objetos que hemos aprendido, podemos trabajar con esa jerarquía de objetos, acceder a sus propiedades e invocar sus métodos.

¿Para qué sirve el DOM?

Usamos el DOM para controlar programáticamente los elementos que hay en la página. Con ello conseguimos hacer todo tipo de comportamientos que puedan ser necesarios para implementar las funcionalidades que requieran las aplicaciones.

Cualquier cosa que necesites hacer sobre una página web la tienes que hacer mediante el acceso y manipulación del DOM. Por ejemplo crear e insertar nuevos elementos en la página dinámicamente, hacer que ciertos elementos se reaccionen cuando el usuario interaccione con ellos, etc.

Cualquier elemento de la página se puede controlar de una manera u otra mediante Javascript accediendo al objeto correspondiente, el que modeliza aquel elemento que deseas transformar. Además, dependiendo del elemento que tengas que alterar puede tener unas propiedades y métodos distintos. Por ejemplo, no es lo mismo una división div que un campo de texto input. Es crucial conocer bien el modelo de objetos del documento para poder controlar perfectamente las páginas web con Javascript.

Ejemplo de control del documento

Antes de empezar a ver rigurosamente el DOM, vamos a ver el ejemplo típico de acceso a una propiedad del objeto documento que nos sirve para cambiar el aspecto dinámicamente mediante el cambio del color de fondo de la página.

La propiedad que almacena el color de fondo de la página web se llama bgColor y pertenece al objeto document. A esa propiedad podemos asignarle cualquier color y cambiará el fondo con ese color. Se accede al objeto documento mediante el objeto window y luego document, para llegar finalmente a la propiedad bgColor.

<script>
// Función para generar un color aleatorio
function generarColorAleatorio() 
{
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    return `rgb(${r}, ${g}, ${b})`;
}
window.document.bgColor = generarColorAleatorio(); 
</script>  
    

El objeto window no hace falta referenciarlo, ya que todos los objetos del navegador dependen de window y se permite simplemente obviarlo. Por tanto, esta línea sería equivalente:

<script>
document.bgColor = "red"
</script>  
    

Si ejecutamos esta sentencia en cualquier momento cambiamos el color de fondo de la página a rojo.

Hay que fijarse en que la propiedad bgColor tiene la "C" en mayúscula. Es un error típico equivocarse con las mayúsculas y minúsculas en Javascript, que es un lenguaje donde sí importa el tamaño de la caja. Si no lo escribimos bien no funcionará y en algunos casos equivocarnos entre mayúsculas y minúsculas ni siquiera arrojará un mensaje de error, con lo que el problema puede ser difícil de detectar.

Acceso a los objetos que forman parte del DOM

Acabamos de ver un ejemplo de acceso a un elemento del DOM como es el documento. A este elemento accedemos siempre a través del objeto window, que como es global nos permiten simplemente no mencionarlo. Por tanto, a simple vista, el objeto document también es global y lo tenemos ahí disponible con solo nombrarlo en el código Javascript.

Sin embargo, todos los elementos de la página tienen su correspondiente objeto en el DOM, al que podemos acceder para realizar cualquier cosa con un elemento en particular, como mostrarlo, ocultarlo, cambiar su contenido, insertar otros elementos en él y cualquier cosa que nos podamos imaginar.

Existen diversos mecanismos de acceso al DOM que queremos mostrar de manera individual.

Acceso a los elementos por su identificador

Todos los elementos del HTML pueden tener un identificador definido por su atributo id. Ese identificador debería ser único y nos sirve entre otras cosas para referirnos de manera inequívoca al objeto del DOM que modeliza ese elemento.

Veamos un elemento HTML con su identificador.

<p id="miParrafo">Este es un párrafo.</p>
  

Para acceder a el elemento mediante el identificador usamos el método getElementById() que tiene el objeto document. Veamos el siguiente código Javascript.

let parrafo = document.getElementById("miParrafo");
  

Esto ha creado un variable llamada parrafo que tiene una referencia al objeto del DOM que modeliza la etiqueta p anterior. Ahora podríamos acceder a las propiedades o métodos de ese párrafo para hacer cosas con él.

parrafo.textContent = 'Cambio el texto del párrafo con Javascript.';
  

Con la línea anterior estamos cambiando el texto que hay dentro del párrafo.

Acceso a los elementos por su selector

Ahora vamos a conocer el método querySelector() del objeto document, que nos permite acceder a los elementos a partir de un selector.

Por ejemplo, tenemos la siguiente división:

<div id="interfaz">Esto es otro elemento con ID</div>
  

Ahora podemos acceder mediante querySelector() a ese elemento, con este código Javascript.

    let division = document.querySelector('#interfaz');
  

Y una vez que tenemos esa referencia al objeto del DOM podemos lanzar métodos sobre él o cambiar sus propiedades.

division.innerHTML = 'Hola a <b>todos</b>';
  

Con el código anterior cambiamos la propiedad innerHTML que sirve para actualizar el contenido del elemento con una cadena que puede tener etiquetas HTML.

Ahora bien, puede que uses selectores que encajasen con más de un elemento. Por ejemplo tenemos este elemento HTML de lista:

<ul>
  <li class="item">item 1</li>
  <li class="item">item 2</li>
  <li class="item">item 3</li>
</ul>
  

Podría usar este código para acceder a un elemento de la lista y modificar su color del texto:

let item = document.querySelector('.item');
item.style.color = 'orange';
  

Podríamos pensar que con el identificador '.item' se seleccionarían los tres ítem de esa lista. Sin embargo eso no funciona así con el método querySelector(), que te entrega siempre el primer elemento seleccionado con ese selector. Por tanto, en el ejemplo anterior solamente cambiaríamos el color del texto del primer elemento de la lista.

Acceder a un conjunto de elementos con su selector

Si lo que queremos es acceder a todos los elementos que encajen con un selector, entonces usamos el método querySelectorAll() del objeto document.

Veamos un ejemplo que nos permitiría acceder a todos los párrafos de la página web

let parrafos = document.querySelectorAll('p');
  

Al seleccionar elementos con querySelectorAll() no obtenemos un objeto del DOM sino una colección de objetos. Incluso, aunque esa colección solamente tenga un elemento, o ninguno, seguiría siendo una colección. Por ello, para poder hacer cosas con los elementos seleccionados debemos realizar un bucle. Podríamos iterar fácilmente por esa lista de párrafos seleccionados con una función forEach de los arrays e iterables de Javascript.

parrafos.forEach(function(parrafo) 
{
  console.log(parrafo.innerText);
});
  

Con eso conseguimos que se muestren todos los contenidos textuales de los párrafos en la consola del navegador.

Por ejemplo, si los elementos de lista actual, que tenían la clase '.item' quisiéramos cambiarles el color de fondo por amarillo, podríamos usar este código.

document.querySelectorAll('li.item').forEach(function(elemento) 
{
  elemento.style['background-color'] = 'yellow';
});
  

Acceso a elementos por su clase CSS

También se puede el método getElementsByClassName() del objeto document para acceder a los elementos que tienen una clase CSS en particular.

Supongamos que tenemos los siguientes elementos en nuestro HTML:

    <p class="claseEjemplo">Hola!</p>
    <p class="claseEjemplo">Adios!</p>
  

Podríamos acceder a ellos mediante Javascript con un código como este:

    let parrafosDeClase = document.getElementsByClassName("claseEjemplo");
  

Luego podríamos recorrelos con un forEach() como hemos visto antes, pero también mediante un bucle for normal:

for (let i = 0; i < parrafosDeClase.length; i++) 
{
  parrafosDeClase[i].textContent = `Soy el párrafo número ${i + 1}`;
}
  

El código anterior cambiará los textos de los párrafos, indicando el número del párrafo de cada uno de ellos.

Jerarquía de objetos del documento

Es importante entender también que los objetos del documento forman una jerarquía, igual que el propio código HTML. Como sabes, en el HTML tenemos una estructura de etiquetas en forma de árbol. Sin embargo, la jerarquía de objetos que modelizan los elementos de la página en Javascript es un poco distinta.

En realidad lo que tenemos en Javascript es un objeto document, del que cuelgan propiedades simples como la que hemos visto bgColor, métodos como write() y algunos arrays de elementos, como los enlaces de la página, enlaces y formularios. A su vez, de los formularios cuelga un array con los elementos que tenemos.

>Para ilustrar esta organización de los elementos del DOM podemos ver la siguiente imagen.

No debes entender esta imagen como una especificación formal, ni mucho menos, sino como un esquema de la estructura jerárquica de objetos del documento. Hemos querido ilustrar que document es un objeto, que tiene propiedades y métodos y algunos arrays con conjuntos de otros objetos como las imágenes o los enlaces.

Las propiedades de un objeto pueden ser a su vez otros objetos

Muchas de las propiedades del objeto document son a su vez otros objetos. Por ejemplo, el array de formularios (forms) contiene cada uno de los objetos formulario que encontramos en el código HTML de la página.

Cada uno de esos elementos del array forms es un objeto de formulario, que tiene sus propiedades como action o method y métodos como submit(). Incluso los formularios tienen un array de elementos de formulario, el array elements, que contiene nuevos objetos que modelizan cada uno de los campos que tiene ese formulario, como cajas de texto, elementos de selección, cajas de verificación o lo que sea que se haya colocado en el formulario.