¿Qué es DOM?

DOM = Document Object Model o Modelo de documento objetos.

DOM → estándar creado por la W3C (World Wide Web Consortium) que nos permite acceder a los documentos desde JavaScript (u otros lenguajes).

DOM → Es la estructura jerárquica (similar a un árbol genealógico) que representa nuestro documento web en forma de esquema. Este esquema contiene todos los nodos (TAGs) que compone una página HTML.

¿Qué son los nodos?

Los nodos son cada uno de los elementos de nuestro documento. Por ejemplo, la etiqueta HTML es un nodo, la etiqueta HEAD o la etiqueta BODY también lo son. E incluso sus hijos, por ejemplo, dentro de BODY la etiqueta H1 o dentro de HEAD la etiqueta TITLE también son hijos.

¿Para qué se utiliza el DOM?

El DOM, se crea con la finalidad de poder identificar y permitirnos trabajar (modificando estilos, el contenido, añadiendo nodos hijos, etc) sobre todos los elementos (conocidos como nodos en DOM) de nuestro documento HTML.

Accediendo a Root Node

Si creamos un documento HTML con la estructura básica de HTML5:

Lo abrimos desde el navegador y vamos al inspector, podemos ver si escribimos document se nos subraya todo el documento HTML.

Esto es debido a que con DOCUMENT estamos seleccionando todo el documento web, es el primer nodo (elemento) de nuestro DOM, el Root Node (como una especie de dios, que engloba al resto y del que depende todos los elementos de nuestro documento).

De hecho, si ejecutamos document (pulsando enter) desde la consola de DevTools, podemos ver de document cae toda nuestra web, para ser más concretos, todo nuestro documento index.html.

Como ya hemos visto anteriormente desde la consola del navegador ejecutamos nuestro JavaScript, por lo que, podemos acceder al DOM, también desde JavaScript.

Para ello, asociamos un archivo de JS a nuestro documento HTML y trabajamos directamente con él:

Si ahora, hacemos un console.log de document, en nuestro archivo de JS:

Y recargamos nuestra web en el inspector del navegador, podemos ver que estamos en el mismo punto que antes:

DOM se crea para permitirnos trabajar sobre el documento HTML desde lenguajes de programación (en nuestro caso JavaScript) con el fin de editar estilos, cambiar el contenido de los nodos, etc.

Seleccionando un elemento con getElementsByTagName:

Si intentamos acceder al nodo BODY, realizando lo mismo que hemos hecho desde document anteriormente, podemos ver que nos arroja un error que nos indica que no está definido y, por tanto, no nos deja acceder a él:

¿Porque se produce esto? Debido a que para acceder a él tenemos que trabajar con nuestro document que es el nodo root (llamar a root node, a dios, el padre de todos los demás nodos).

¿Como lo vamos a hacer? Existen algunas maneras distintas que son totalemente válidas de acceder al body pero ninguna es consiste en escribirlo “a pelo”. En este caso, vamos a acceder al nodo BODY mediante a su nombre de Etiqueta <BODY> sin los <>.

Si ahora vamos al navegador, podemos ver que ahora sí que finalmente hemos accedido al elemento:

Seleccionando varios elementos de un mismo tipo con getElementsByTagName:

Si modificamos nuestro HTML y le añadimos otro título H1, nos encontramos que ahora tenemos dos títulos H1:

Vamos a seleccionarlos desde DOM, en este caso, utilizaremos otra vez con getElementsByTagName.

Tener dos títulos significa vez vamos a recibir varios nodos (elementos HTML).

Además de ver como se trabaja/selecciona varios nodos a la vez, vamos a ver otra manera de trabajar, guardando en variables el resultado que recibimos en la lista HTMLCollection.

Estos nodos se guardan en una lista HTMLCollection, (HTMLCollection = una node list o lista de nodos) y no un arrays, es importante no confundirlos. Por tanto, para recorrer varios elementos necesitamos transformar nuestro HTMLCollection en un Array para recorrerlo con un form Each:

Otra opción que nos aportará el mismo resultado si no queremos realizar la conversión de la lista HTMLCollection a un array podría ser:

El resultado de ambos será:

Seleccionando un elemento por ID getElementById

GetElementById si nos fijamos está escrito en singular, nos permite seleccionar solo un elemento. ¿Qué elemento? Pues el elemento sobre el que especifiquemos dicho Id.

Vamos a ver un ejemplo, si modificamos nuestro HTML y le añadimos un id a nuestro párrafo:

Hasta ahora, hemos mostrado nodos por consola. Pero con DOM, podemos hacer cosas más potentes. Vamos a seleccionar el p con id=”parrafo” y además de imprimir el nodo como hasta  ahora por consola, vamos a imprimir solamente le texto que contiene, luego modificaremos ese texto con (innerHTML) y finalmente, volveremos a imprimir ese texto. Podemos ver que, sin muchas complicaciones, podemos sacar el valor de un nodo con un id:

El resultado será:

Si nos fijamos acabamos de cambiar el contenido del nodo con id párrafo de nuestro documento HTML, desde JavaScript con DOM.

Seleccionando elementos con querySelectorAll y un elemento en particular con querySelector

Si añadimos varios hipervinculos:

Con querySelectorAll, podemos seleccionar todos los enlaces de un mismo tipo. Además de ello, vamos a modificar su estilo cambiando su color a rojo. Vamos a verlo:

Nos devuelve una NodeList similar al HTMLCollection con el que ya estamos acostumbrados a trabajar.

Si utilizamos querySelector, seleccionaremos únicamente el primer elemento que sea un enlace de nuestra página web. Y además de ello, también le cambiaremos el tamaño a dicho enlace para diferenciarlo del resto. Vamos a ver un ejemplo:

El resultado será:

Seleccionando elementos por su clase con getElementsByClassName

Sobre el mismo HTML anterior:

Vamos a ello:

Añadiendo un nodo (LI) a una lista (UL) con DOM

Si sobre el siguiente HTML:

Queremos añadir un LI hijo podemos hacer:

El resultado será:

Cambiando la clase de un nodo a otra de una hoja CSS (Toggle Class)

Hasta ahora, hemos trabajado hemos modificado nuestros estilos directamente con el DOM desde JS. Para acabar este artículo, vamos a ver la mejor manera más recomendada de realizar estas modificaciones de los estilos mediante a lo que se conoce como un toggle class (cambio de clase) para ello, vamos a crear una hoja de estilos CSS que contendrá dos estilos para nuestra lista.

De esta manera, separamos por capas como ya hacíamos con HTML, CSS y JS y cada una de las capas hace su función. También evitamos que se pisen los estilos entre el CSS y el que añadimos nosotros con DOM y JS. Y así, tan solo tenemos que cambiar la clase que tenemos asociada actualmente de archivo de CSS por la nueva sobre la que trabajamos el nodo mediante a DOM y JS.

Empezamos por el HTML:

El CSS contendrá:

Si cargamos la web podemos ver, que tenemos una lista que ordena los elementos numéricamente:

Vamos a añadirle a la lista UL la clase .liLowerAlpha y a remover la clase .liDecimal con el fin de que se vean los elementos de la lista ordenados alfabéticamente:

Espero que os guste el artículo y que DOM os haya quedado un poco más claro. Muchas gracias por la lectura. ¡Saludos, hasta pronto!