El Modelo de Objetos del Documento (DOM) es una interfaz de programación de aplicaciones (API) para documentos HTML y XML. Define la estructura lógica de los documentos y el modo en que se accede y manipula un documento. En la especificación del DOM, el término "documento" se utiliza en un sentido amplio. XML se utiliza cada vez más como un medio para representar muchas clases diferentes de información que puede ser almacenada en sistemas diversos, y mucha de esta información se vería, en términos tradicionales, más como datos que como documentos. Sin embargo, XML presenta estos datos como documentos, y se puede usar el DOM para manipular estos datos.
Con el Modelo de Objetos del Documento los programadores pueden construir documentos, navegar por su estructura, y añadir, modificar o eliminar elementos y contenido. Se puede acceder a cualquier cosa que se encuentre en un documento HTML o XML, y se puede modificar, eliminar o añadir usando el Modelo de Objetos del Documento, salvo algunas excepciones.
Traducción de la Recomendación del W3C "Document Object Model (DOM) Level 1 Specification"
Para el desarrollador la jerarquía que proporciona el DOM es obtener para cada objeto una referencia, una dirección, a través de la cual acceder a las propiedades del objeto.El primer objeto en el nivel de jerarquía es el objeto 'window'. Todo esta enmarcado dentro de la ventana del navegador. En el siguiente gráfico se muestra una jerarquía típica de una página web. Cada objeto tiene una serie de propiedades a las que podemos acceder y que otorgan una serie de características al objeto. La modificación de elementos del DOM puede alterar el marcado HTML de la página y por tanto su presentación.
Suena bien ¿verdad? Lo cierto es que cuando apareció una primera aproximación al DOM, los desarrolladores inmediatamente vieron las posibilidades que se abrían para añadir interactividad a las estáticas páginas web de entonces. El problema no tardo en surgir, puesto que los dos navegadores principales de aquellos años divergieron, desarrollando cada uno de ellos un modelo de DOM con múltiples puntos de incompatibilidad con el otro. En los últimos tiempos los esfuerzos se dirigen en normalizar un Modelo de Objetos del Documento. En este sentido lo mas reseñable ha sido las recomendaciones que ha hecho el w3c en este sentido para establecer estandares comunes para todos los navegadores.
En el nuevo Modelo de objetos (DOM) cada elemento en un documento html es parte de un árbol, y se puede acceder a todos los elementes bevegando a través de las ramas hasta alcanzar al "nodo" u objeto que buscamos. Un sencillo ejemplo de este "árbol podría ser".
document
| -- <html>
|-- <head>
|-- <body>
| -- <div>
Para acceder al <div> necesitaría:
1. Comenzar en el nodo de inicio "document";
2. Moverme al primero de todos sus "hijos" o "nodos hijo", que sería la etiqueta
<html>
: document.childNodes[0];
3. Bajar otro nivel y desplazarme al segundo hijo de esa rama: document.childNodes[0].childNodes[1];
4. Llegar al <div>: document.childNodes[0].childNodes[1].childNodes[0];
La forma más común de acceso a un elemento es definir a éste con una ID que le identificará de una manera única. Por ejemplo, supongamos que tenemos
<div id='noticias'></div>
Para hacer referencia a este nodo, independientemente de su posición dentro del árbol sería:
var noticias=document.getElementById(noticias);