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 representar nuestra aplicación en una interfaz visual que llamamos un sitio web.

El Sitio Web DOM

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 (durante 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>, como así:

1<script  type="text/javascript">
2     //tu código aquí  
3</script>

Cómo actualizar tu DOM del sitio web

Hay varias formas de manipular el DOM, pero la más sencilla es document.write Cada vez que cree un documento.write, escribirá en el HTML el string que decidas pasar como parámetro a la función de escritura.

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 la clase = "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 nombre = "nombre_valor" en su propiedad de nombre de su etiqueta HTML en el documento HTML.

1var elem = document.getElementById("xyz");
2elem.style.color="red";   // cambia el color a rojo  
3
4var myList = document.getElementsByTagName("p");
5var howManyElements = myList.length;
6myList[0].style.color = "red";   // el primero será rojo 
7
8var myList = document.getElementsByClassName("abc");
9myList[0].style.color = "red";   // el primero será rojo  
10
11var xyz = document.getElementsByName("xyz");
12xyz[0].style.color="red";   // el primero será 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> especifica 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 secundarios de cualquier elemento DOM es mediante el uso de sus propiedades childNodes de esta forma:

element.childNodes

Esto devuelve un array con todos los elementos secundarios del elemento.

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

El innerHTML

Como ya sabe, 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í:

1var divElem = document.getElementById("myFirstDiv");
2var myNewHOne = document.createElement("H1");
3var t = document.createTextNode("Hello World");
4myNewHOne.appendChild(t);  // Tengo que agregar contenido al h1  
5divElem.appendChild(myNewHOne); // Esto añade el h1 al elemento original

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í:

1var newItem = document.createElement("LI");
2var textnode = document.createTextNode("Water");
3newItem.appendChild(textnode);
4var 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 de UL:

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

☝️ Esta es la única función soportada por todos los navegadores; no uses .remove () si te importa Explorer.

Cambiando los Atributos

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

1// cambiando atributos 
2var 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, como este:

1// cambiando estilos 
2var 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/en-US/docs/Web/API/Document