DOM

El DOM, Document Object Model, es la representación en objetos en el navegador de los elementos de un documento HTML

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.

Curso práctico de Javascript para el desarrollo web
16 clases 27 Horas y 1 min horas
Aprende Javascript a través de ejemplos prácticos orientados a la resolución de problemas típicos en la web

Cursos superiores

Los cursos de esta materia te facilitan los conocimientos necesarios para poder abordar los siguientes estudios:

¿Quieres especializarte en DOM?

Accede a todos los cursos de EscuelaIT que te permitirán dominar ésta y muchas otras materias, con tarifa plana.

Plan anual

25 €/mes*
* En un único pago de 299€

Plan mensual

29 €/mes*
* Pago cada mes sin permanencia

¿Tienes alguna duda?

¿Todavía no tienes claras las mecánicas y ventajas de EscuelaIT?
¿Tienes alguna necesidad especial que quieras solicitarnos?
¿Podemos ayudarte de alguna otra manera?

No dejes de darle un vistazo a las preguntas frecuentes o FAQ y usa nuestros canales de comunicación para contactar con nosotros. Nuestro equipo de soporte estará encantado de atender cualquier consulta que tengas.