Qué es el DOM

  • Por
El DOM es la estructura de objetos que genera el navegador cuando se carga un documento y se puede alterar mediante Javascript para cambiar dinámicamente los contenidos y aspecto de la página.

DOM es una abreviatura de Document Objet Model. En español podríamos traducirlo por Modelo de Objeto de Documento, aunque en DesarrolloWeb.com nos hemos referido al DOM habitualmente con el nombre de jerarquía de objetos del navegador, porque realmente es una estructura jerárquica donde existen varios objetos y unos dependen de otros.

Los objetos del DOM modelizan tanto la ventana del navegador como el historial, el documento o página web, y todos los elementos que pueda tener dentro la propia página, como párrafos, divisiones, tablas, formularios y sus campos, etc. A través del DOM se puede acceder, por medio de Javascript, a cualquiera de estos elementos, es decir a sus correspondientes objetos para alterar sus propiedades o invocar a sus métodos. Con todo, a través del DOM, queda disponible para los programadores de Javascript, cualquier elemento de la página, para modificarlos, suprimirlos, crear nuevos elementos y colocarlos en la página, etc.

Lo cierto es que quien quiera que haya realizado un poco de trabajo con Javascript, aunque este haya sido muy básico, ha tocado el DOM alguna vez. Aquí en desarrollo web .com hemos visto multitud de ejemplos en los que se tocaba el DOM. Cuando por ejemplo hacemos una sentencia en la que se accede al valor de un campo de formulario, con un código como este: document.forms[0].elemento_formulario.value, estamos accediendo a la estructura de objetos del DOM.

El DOM está definido y administrado por el W3C, por lo que los distintos navegadores simplemente aplican las especificaciones del World Wide Web Consortium, para dar soporte al DOM en sus aplicaciones. El DOM no sólo permite modificar páginas web en HTML, sino también documentos XML.

A lo largo de la historia de los navegadores, se han ido aplicando en mayor o menor manera las características del DOM. A medida que se sucedían versiones de los navegadores también se iba dando un mayor soporte a las especificaciones del DOM, en lo que se han llamado los niveles del DOM. El primero que empezó a disponibilizar por medio de objetos los componentes de la página fue Netscape 2.0, que incorporaba lo que se llama el DOM nivel 0. Actualmente, la última especificación publicada es DOM nivel 4.

Es importante destacar ahora que, dado que los niveles del DOM cambian de versión a versión del navegador y que las especificaciones se han entendido de manera distinta por las distintas organizaciones creadoras de los navegadores, se ha producido un marco donde trabajar con los objetos de la página difiere de un navegador a otro. Esto lo vemos en el artículo DOM y compatibilidad con los distintos navegadores.

Si deseamos obtener otros textos introductorios al concepto de DOM de Javascript, recomiendo la lectura de la Wikipedia sobre el DOM Document Object Model.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

yilolilo85

10/9/2011
Muchas Gracias
Muchas gracias por toda la ayuda que me han brindado.

Fiurox

02/5/2013
Genial
Este articulo es de lo mas fenomenal.<br />
Gracias por desenredar ester tema que es vital par los programadores web.<br />
Felicitaciones por el sitio:

Leandro

06/6/2014
DOM
Muy completo y muy bien explicado muchas gracias.<br>Leandro.

juanca252

13/1/2015
gracias
Gracias ya he recurrido varias veces a ti y creo que te debia agradecer públicamente.

Yehins Bello

25/9/2016
Saludos y Gracais
Excelente, en otras páginas no lo había comprendido, en cierta forma lo explicaban algo enredado, acá me ha quedado todo claro, muchas gracias por la buena redacción y explicación.

XD

25/4/2017
pregunta
con el objeto DOM puedo modificar permanentemente un archivo html.
Gracias y saludos