Que es DOM: Document Object Model

¡Más allá de la consola!

A nadie le gustan las aplicaciones basadas en la consola... ¿Te imaginas usar Uber desde la línea de comando?

1$ "uber" request-trip --from home-- to work --pool

¡Gracias a Dios que tenemos los navegadores! Nos permiten renderizar nuestra aplicación en una interfaz visual que llamamos sitio web.

El DOM de tu Sitio Web

Como ya sabes, la responsabilidad del navegador es transformar el código HTML/CSS en elementos visuales. Esos elementos se asignan a una jerarquía que se almacena en la memoria RAM y se llama El DOM.

Con JavaScript podemos manipular el DOM (elementos del sitio web) durante el tiempo de ejecución (el ciclo de vida de la aplicación).

NOTA: Por favor recuerda siempre que todo el código JavaScript que escribas en tu documento HTML DEBE estar envuelto dentro de una etiqueta <script>, así:

1<script>
2     // tu código aquí  
3</script>

Cómo actualizar el DOM de tu sitio web

Hay varias formas de manipular el DOM, pero la más sencilla es document.write(). Cada vez que escribas document.write(), estarás creando en el HTML el string que decidas pasar como parámetro a la función write.

No importa donde escribas el código. Lo único que importa es que esté dentro de una etiqueta <script>. Por ejemplo:

¡El DOM es Espectacular!

Desde el momento en que un sitio web comienza a cargarse, el navegador crea una jerarquía que se llama The DOM. Cada elemento HTML que programaste en su documento HTML como desarrollador, tiene un lugar en esa jerarquía y puedes acceder a él utilizando JavaScript en cualquier momento durante el tiempo de ejecución.

• Cada elemento HTML tiene un objeto en la jerarquía de documentos.
• El DOM se genera durante el tiempo de ejecución.
• Cada navegador intenta replicar el DOM exactamente de la misma manera, pero hay algunas diferencias entre ellos. Es por eso que algunas cosas funcionan en un navegador, pero no en otros.
• JavaScript es el único idioma capaz de acceder a DOM durante el tiempo de ejecución.
• El "Inspector de Google" es la mejor representación de The DOM en la actualidad.

¿Cómo accedo a cualquier objeto en el DOM?

Al igual que hicimos con CSS, podemos seleccionar cualquier elemento en el documento. Hay 4 métodos que nos permiten buscar lo que queramos:

document.querySelector("css-element-selector")

Devuelve una instancia del primer elemento encontrado que se ajusta al selector de CSS que especificó.

document.getElementById("elementId")

Devuelve una instancia del elemento con el id="elementId" en el documento HTML.

document.getElementsByClassName("exampleClass")

Devuelve un array de todos los elementos con class="exampleClass" en su propiedad de etiqueta HTML.

document.getElementsByTagName("p")

Devuelve un array con todas las instancias que representan cada elemento de párrafo en el documento HTML.

document.getElementsByName("name_value")

Devuelve un array con todos los elementos que tienen name="name_value" en su propiedad name de su etiqueta HTML en el documento HTML.

1let elem = document.getElementById("xyz");
2elem.style.color = "red";   // cambia el color a rojo
3
4let myList = document.getElementsByTagName("p");
5let howManyElements = myList.length;
6myList[0].style.color = "red";   // cambia el primer elemento a rojo
7
8let myList = document.getElementsByClassName("abc");
9myList[0].style.color = "red";   // cambia el primer elemento a rojo
10
11let xyz = document.getElementsByName("xyz");
12xyz[0].style.color = "red";   // cambia el primer elemento a rojo

Accediendo al Hijo del elemento

Es muy común tener que cambiar el hijo de un elemento. Por ejemplo:

• Actualizar todos los <li> hijos de una <ul> específica para hacer que su fondo sea rojo.
• Eliminar la primera fila <tr> de una <table>.
• Ocultar a todos los hijos con una clase específica.
• ¡Y la lista continúa!

La mejor manera de recuperar los elementos hijo de cualquier elemento del DOM es mediante el uso de la propiedad .childNodes de esta forma:

element.childNodes

Esto devuelve un array con todos los elementos hijo del elemento seleccionado.

1let x = document.getElementById("myDIV");
2x.querySelector(".random").style.background = "green";
3// obtiene el primer hijo de #myDIV con la clase .random 
4
5let x = document.getElementById("myDIV");
6x.querySelector("h3,h2").style.background = "blue";
7// obtiene el primer hijo de #myDIV con la etiqueta <h3> o <h2>
8  
9let tableElm = document.getElementById("people");
10let trArray = tableElm.querySelectorAll("tr");
11trArray[3].style.background = "red";
12// obtiene un array con todos los hijos de #people con etiqueta <tr>

El innerHTML

Como ya sabes, cada elemento del documento HTML puede tener algún tipo de contenido HTML. No importa si es un <p>, <div>, <a> o cualquier otro elemento HTML; puede tener su propio innerHTML combinado con más contenido HTML.

La propiedad .innerHTML te brinda la capacidad de recuperar o configurar el contenido de cualquier elemento que tenga en su JavaScript. Por ejemplo:

1document.getElementsByTagName("div")[0].innerHTML = "abc";
2// innerHTML puede usarse para insertar contenido de texto o HTML, esto crea una lista dentro de un elemento <div>

☝ Puedes encontrar 2 propiedades más en internet: nodeValue y textContent, pero en realidad no son muy utilizadas y tienen una funcionalidad más limitada.

Añadiendo Elementos al Documento

Hay 2 funciones que podemos usar para eso: appendChild() y insertBefore().

Digamos que seleccionaste un <div> con el id="myFirstId" y quieres agregar un nuevo <h1> dentro de ese <div>.

Puedes usar la función appendChild así:

1let divElem = document.getElementById("myFirstDiv");
2let myNewHOne = document.createElement("h1");
3let t = document.createTextNode("Hello World");
4myNewHOne.appendChild(t);  // Esta linea añade el texto al <h1>  
5divElem.appendChild(myNewHOne); // Esto añade el <h1> al elemento "myFirstDiv"

Ahora, digamos que tenemos una <ul> con 2 elementos, pero queremos insertar un nuevo <li> al principio de esa lista.

Podemos usar la función insertBefore para ese caso, así:

1let newItem = document.createElement("li");
2let textNode = document.createTextNode("Water");
3newItem.appendChild(textNode);
4let list = document.getElementById("myList");
5list.insertBefore(newItem, list.childNodes[0]);  // añadir el newItem antes del PRIMER hijo de la lista

Eliminar elementos del documento

La función removeChild() es excelente para eliminar un elemento del DOM y, por lo tanto, también del documento HTML. Deberás especificar quién es el elemento padre del elemento que estás intentando eliminar.

Por ejemplo, si queremos eliminar todos los elementos de una lista

:

1// Eliminando todos los hijos de un elemento    
2let element = document.getElementById("myFirstUL");
3while (element.firstChild) {
4    element.removeChild(element.firstChild);
5}

Cambiando los Atributos

Para cambiar cualquier atributo de cualquier objeto en el DOM, necesitamos usar la propiedad .attribute así:

1// Cambiando atributos 
2let element = document.getElementById("myElementId");
3element.attribute = "whatever";

Cambiando los Estilos

También Puedes cambiar cualquier regla o propiedad CSS aplicada a los elementos HTML utilizando el atributo .style, por ejemplo:

1// Cambiando estilos 
2let element = document.getElementById("myElementId");
3element.style.color = "red";
4element.style.background = "blue";

Otras lecturas

Para obtener más información sobre cómo acceder al DOM, consulte: https://developer.mozilla.org/es/docs/Web/API/Document