¿Sabes la importancia que tiene entender el DOM y el lugar que ocupa en la programación web? Esta es enorme ya que conocer las propiedades, métodos y eventos del mismo es fundamental para crear una web de manera correcta. Siempre que programas interactúas con él así lo que hagas sea un ¨Hola mundo¨ en el cuerpo de un documento.
Se denomina DOM al modelo de documento creado por el navegador web siguiendo el paradigma de POO (programación orientada a objetos). El mismo contiene una API mediante la cual nos permite modificar la estructura, comportamiento, estilo y contenido del documento HTML o XML.
Tabla de contenidos
Estructura del DOM
El objeto #document, nombre que se le asigna al objeto raíz de una web, encierra en su interior todo el contenido que estás visualizando en el navegador incluyendo una representación en tiempo real del DOM. Para acceder a este objeto basta con escribir la palabra document en la consola del navegador, otra forma de verlo es acceder a las herramientas para desarrolladores de tu ordenador Ctrl+Shift+i y desde la pestaña ¨Elements¨ se ve.
El DOM puede ser representado de manera gráfica lo que facilita su entendimiento. Veamos un ejemplo.
<!DOCTYPE HTML>
<html>
<head>
<title>El DOM</title>
<!--My comentario -->
</head>
<body>
Aprendiendo lo que es el DOM.
</body>
</html>
Representación estructural del DOM
Esta sencilla manera de representacion es suficiente para englobar todas las combinaciones estructurales posibles. La ventaja de ello es que podemos acceder a cada elemento o nodo mediante las interfases disponible siendo este un estandar internacional.
Basicamente en el DOM existen elementos facilmente identificables. Los elementos del DOM surgen de la estructura del HTML y pueden estar anidados siguiendo un orden jerarquico.
Tipos de elementos
document – el “punto de entrada” en el DOM.
nodos de elementos – Etiquetas-HTML, los bloques de construcción del árbol.
nodos de texto – contienen texto.
comentarios – a veces podemos colocar información allí, no se mostrará, pero JS puede leerla desde el DOM.
Otros (actualmente hay doce pero son menos utilizados).
Interfáz del DOM
Una interfaz es una aplicación de alto nivel que permite el entendimiento entre hombre-ordenador. En el caso del
DOM nos va a permitir total control sobre él mismo mediante eventos, selectores, modificadores y métodos en general, estos interactúan directamente en él. Por ejemplo, el método document.getElementsByTagName('body') nos devuelve una colección de elementos y
propiedades del cuerpo de la página, los cuales pueden ser accedidos y modificados usando JS.El eventoDOMContentLoadedd es un evento especifico del DOM y el mismo es disparado cuando todos los elementos del mismo han sido tokenizados (convertidos en etiquetas HTML), aún no se encuentran en su lugar, pero si están listos para ser accedidos y reconocidos por los estilos CSS y el JS.Otro ejemplo de operaciones mediante la interfaz del DOM es la posibilidad de cambiar el estilos de los
elementos directamente sobre estos, la instrucción document.body.style.color="red" establece el color rojo para los textos dentro de la etiqueta <body> en una página web.
Conclusión
Si estás comenzando con la programación y ya tienes una base de HTML, CSS y JS, mi concejo es que entiendas todo lo relacionado con él DOM por la importancia y el impacto que podría tener en una aplicación web un uso correcto. Comprenderlo es como tener el poder de mirar con Rayos X el esqueleto de cualquier página web y contar con la posibilidad de optimizar hasta el más mínimo detalle en cuanto a estructura se refiere. Lo que debemos entender es que la base y las herramientas para modificar una aplicación web están estrechamente
relacionadas con el DOM. También es determinante conocer que cada Nodo Elemento cuenta con su propia interfaz, con sus métodos y propiedades para facilitan aún más el trabajo y de esta manera sucede con los demás tipos de nodos.En palabras no técnicas es una macro estructura conformada por pequeñas partes (HTMLcollections, NodeList, DOMTokenList, Elementos, funciones, propiedades y atributos) a donde accedemos mediante los métodos dispuestos por su interfaz usando JS y finalmente estilizándolo con CSS.
Full Stack Web Developer y SEO-lover. Diseño y desarrollo con tecnologías web. Siento satisfacción cuando lees mis contenidos y encuentras algo interesante. 100mpre aprendien2 :)
