Imagen de DOM

El DOM es un concepto muy importante en el desarrollo web, concretamente en la programación del lado del cliente o desarrollo frontend. Es la representación en objetos que hace el navegador de cada uno de los elementos que están situados en una página web, el cual se puede manipular mediante Javascript para producir todo tipo de comportamientos dinámicos. jQueryconc

Por explicarlo con otras palabras, un documento HTML tiene una serie de etiquetas, donde cada una de ellas se modela como un objeto en la memoria del navegador. Con código Javascript podemos realizar accesos al DOM y manipular cualquiera de sus objetos, con lo que produciremos cambios en la página en la etiqueta o etiquetas correspondientes al objeto manipulado.

El DOM se organiza en forma de árbol, igual que lo hacen las etiquetas de un documento HTML. Existe un objeto raíz, que es el propio documento y colgando de él se van colocando objetos para cada una de las etiquetas de la página. Hay objetos simples, pero incluso otros compuestos de nuevos objetos, como podría ser un formulario del cual cuelgan los objetos de cada uno de sus elementos de entrada de datos.

Cada objeto del DOM tiene un API, con un juego de propiedades y métodos que podemos manipular o invocar para producir cambios en la página. Estas operaciones se pueden hacer mediante código en el lenguaje Javascript, que es el lenguaje aceptado por los navegadores.

Librerías para manipulación del DOM

Para acceder a los elementos de la página, objetos del DOM, y cambiar sus características, produciendo así cambios en la página renderizada, es suficiente con usar Javascript "nativo", es decir, no hace falta librería alguna. Sin embargo, existen algunas bibliotecas de código que nos facilitan en gran medida las operaciones de manipulación de objetos del DOM. Estas librerías están pensadas para cubrir realmente dos objetivos:

 -Realizar acciones más complejas con menos trabajo, facilitando la labor del desarrollador por tener que escribir menos código y por poder abstraerse de ciertas complejidades del DOM.

 -Ofrecer una interfaz unificada que permita realizar código que tenemos certeza se va a ejecutar exactamente igual en cualquier navegador, salvando así las diferencias que los navegadores pueden tener a la hora de implementar el DOM.

La librería para manipular el DOM más importante es jQuery. Un complemento de sobra conocido por los desarrolladores frontend y que se usa en millones de sitios y aplicaciones web. jQuery permite el acceso al DOM, manipulando sus elementos a bajo nivel.

Sin embargo existen otras librerías importantes que se encargan también en mayor o menor medida de manipular el DOM, como pueden ser React o Polymer. Estas librerías trabajan a alto nivel, con mayores cotas de abstracción que jQuery y además tienen una diferencia fundamental, que permiten trabajar a nivel de componentes y vistas, lo que ayuda mucho en el desarrollo, pero sobre todo en el mantenimiento de las aplicaciones.

Existen además librerías especializadas únicamente con la implementación de vistas, como Handlebars, que permiten generar DOM a partir de plantillas sencillas y de fácil mantenimiento. Son un buen complemento para jQuery, ya que nos permite desarrollar código mantenible para generación de DOM.

Cómo aprender DOM

Para aprender el DOM lo recomendable es tomar un curso de Javascript. Tenemos varios en EscuelaIT, enfocados a desarrolladores con distintos niveles. Generalmente en los cursos de Javascript se explica el lenguaje y en algún momento se explica a realizar comportamientos sobre la página, para lo que se ve el DOM.

En el curso práctico de Javascript para desarrollo web se prestó más atención al propio DOM que a la propia sintaxis y estructuras de control de Javascript. Es un buen curso para aprender DOM.

Pero además, si vamos a trabajar con el DOM es importante usar alguna librería. El desarrollador interesado debería tomar el Curso de jQuery, pues es un conocimiento básico y realmente es sencillo de aprender si ya se sabe algo de Javascript. Si sus objetivos son más ambiciosos, podría pasar directamente a la manipulación del DOM usando algún framework o librería que trabaje con vistas, como React, Polymer, Vue o Angular.

Cursos de DOM

Me interesan todos

Habilita para estudiar

Explora otras materias de cursos