Entendiendo el DOM
Expandiendo un poco el concepto de DOM también podemos agregar que es una colección de objetos que representa el HTML en el documento, dentro de su nombre vemos lo que es un modelo y la palabra clave que representa, es un modelo representativo del documento HTML.
El DOM es una herramienta clave en el desarrollo WEB, ya que nos provee de un puente entre la estructura y el contenido entre nuestros documentos HTML y Javascript.
El modelo que estamos hablando es creado por el navegador cuando interpreta el código HTML, la estructura básica de un DOM la podemos ver de la siguiente forma en un esquema en la siguiente imagen:
Como vemos se basa en una estructura jerárquica, con esto logramos que podemos utilizar los caminos de estas relaciones para poder obtener información o hacer cambios estructurales vía Javascript.
Probando el DOM
Vamos a realizar unas pruebas sencillas sobre nuestro documento de forma que vayamos acostumbrándonos a como se puede trabajar con el DOM, una de las primeras pruebas que podemos realizar es comprobar que una funcionalidad esté disponible dentro del documento, veamos en el siguiente código:
<!DOCTYPE HTML> <html> <head> <title>Example</title> </head> <body> <p id="paratext"> There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the time we add the countless types of apples, oranges, and other well-known fruit, we are faced with thousands of choices. <img src="apple.png" alt="apple"/> </p> <script> var images; if ([b]document.querySelectorAll[/b]) { images = document.querySelectorAll("#paratext > img"); } else { images = document.getElementById("paratext").getElementsByTagName("img"); } for (var i = 0; i < images.length; i++) { images[i].style.border = "thick solid black"; images[i].style.padding = "4px"; } </script> </body> </html>
Aquí simplemente lo que hicimos fue algo sencillo, primero verificamos si existe el método querySelectorAll, si existe entonces a una variable le asignamos el contenido de todas los elementos img que tengan el id paratext, como estamos haciendo una comprobación en caso que esta falle utilizamos una forma diferente de obtener los mismos datos, en este caso es el getElementById y luego getElementByTagName, al final simplemente con nuestra variable definida vamos iterando por su contenido y cambiando las propiedades CSS de los mismos.
Tal vez acá lo negativo que podemos ver es que si tenemos muchas verificaciones, nuestro código puede volverse complejo e ilegible, todo es una cuestión de compromisos entre lo que queremos lograr y la forma de lograrlo, de esta forma poder obtener nuestros resultados.
En la siguiente parte de este tutorial estaremos viendo algunos ejemplos más avanzados de cómo seguir trabajando con el DOM.