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.
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>
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:
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.
Al igual que hicimos con CSS, podemos seleccionar cualquier elemento en el documento. Hay 4 métodos que nos permiten buscar lo que queramos:
Devuelve una instancia del primer elemento encontrado que se ajusta al selector de CSS que especificó
Devuelve una instancia del elemento con el id = "elementId" en el documento HTML.
Devuelve un array de todos los elementos con la clase = "exampleClass" en su propiedad de etiqueta HTML.
Devuelve un array con todas las instancias que representan cada elemento de párrafo en el documento HTML.
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
Es muy común tener que cambiar el hijo de un elemento. Por ejemplo:
<li>
hijos de una <ul>
especifica para hacer que su fondo sea rojo.<tr>
de una <table>
.La mejor manera de recuperar los elementos secundarios de cualquier elemento DOM es mediante el uso de sus propiedades childNodes de esta forma:
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
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.
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.
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.
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";
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";
Para obtener más información sobre cómo acceder al DOM, consulte: https://developer.mozilla.org/en-US/docs/Web/API/Document