Document Object Model

Jerarquía de DOM.

Document Object Model o DOM ('Modelo de Objetos del Documento' o 'Modelo en Objetos para la Representación de Documentos') es esencialmente una interfaz de plataforma que proporciona un conjunto estándar de objetos para representar documentos HTML, XHTML y XML,​ un modelo estándar sobre cómo pueden combinarse dichos objetos, y una interfaz estándar para acceder a ellos y manipularlos. A través del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML, que es para lo que se diseñó principalmente.

El responsable del DOM es el World Wide Web Consortium (W3C).

El DOM permite el acceso dinámico a través de la programación para acceder, añadir y cambiar dinámicamente contenido estructurado en documentos con lenguajes como ECMAScript (JavaScript).

Historia

La historia del DOM está entrelazada con la historia de "la guerra de los navegadores" a finales de a decada de 1990 entre Netscape Navigator y Microsoft Internet Explorer, así como con la de JavaScript y JScript, los primeros lenguajes de scripting que se implementaron ampliamente en los motores JavaScript de los navegadores web.

Establecer referencias a objetos

El DOM define la manera en que objetos y elementos se relacionan entre sí en el navegador y en el documento.

Puede utilizarse cualquier lenguaje de programación adecuado para el diseño web. En el caso de JavaScript, cada objeto tiene un nombre, el cual es exclusivo y único. Cuando existe más de un objeto del mismo tipo en un documento web, estos se organizan en un vector.

Es posible asignarle una identificación a un objeto, y luego usarla para hacer referencia a éste, por ejemplo:

<div id="Juan">....</div>

Para hacer referencia a elementos del mismo tipo, los cuales, como se ha dicho, están organizados en un vector, se pueden utilizar la notación punto de la siguiente manera.

document.div[0]
document.div["Juan"]
document.div.Juan

Donde el elemento «Juan» es el primero del vector de elementos del tipo <div>.

También se puede usar la función getElementById.

document.getElementById("Juan")

Manipular las propiedades y funciones de objetos

Los objetos computacionales, de la misma forma que cualquier objeto de la vida real, tienen propiedades. Algunos ejemplos de propiedades de objetos de la vida real son dimensiones, color y peso.

En la mayoría de los objetos computacionales algunas propiedades se pueden determinar de la siguiente manera:

Objeto.propiedad = valor;

//por ejemplo para el objeto «Vaso»

Vaso.color = rojo;

La manipulación de objetos sigue los mismos principios que en el lenguaje de programación que se esté utilizando. Una de las características de estos objetos es la función para la cual están diseñados, de hecho en la mayoría de ocasiones tienen más de una función. En JavaScript, muchas funciones para cada uno de los objetos, incluyendo el navegador y la ventana que lo contiene, han sido definidas previamente; adicionalmente, el usuario puede definir funciones de acuerdo a sus necesidades, por ejemplo el código:

function comeLaLetraA(Texto){
  var TextoNuevo = "";
  while(letras in Texto){
    //lee la siguiente letra
    //si esta letra no es «a» añádela al nuevo texto
  }
  return TextoNuevo;
}

Añade una nueva función al documento utilizado para crear una página web.

Eventos

Un evento desde el punto de vista computacional ocurre cuando cambia alguna situación en la computadora como, por ejemplo, la posición del ratón, la pulsación de alguna tecla, los contenidos de alguna de las memorias, la condición de la pantalla, etc. En la creación de páginas web estos eventos representan la interacción del usuario con la computadora.

Cuando alguno de estos eventos ocurre, como por ejemplo la presión de algún botón del ratón, es deseable que la computadora responda de alguna manera. Esta es la razón por la que existen event handlers ('encargados de manejar eventos') los cuales son objetos que responden a eventos. Una manera de añadir eventos en el DOM utilizando javascript es:

<element onevent="script">....</element>

Por ejemplo:

<div id="midivision" onClick="javascript:comeLaLetraA('bar');">
Aquí va otro texto
</div>

Otra forma de manipular eventos en JavaScript, al crear páginas web, es tratándolos como propiedades de los elementos que forman la página, por ejemplo:

object.event = funcion;
//como puede ser:
document.midivision.onclick = hazAlgo;
// también:
document.getElementById("midivision").onclick = hazAlgo;

En DOM se considera que un evento se origina en el exterior de la página web y se propaga de alguna manera hasta los elementos internos de la página. Un posible ejemplo de esta propagación es:

EVENTO → Ventana → Document → HTML → BODY → DIV → DESTINO
RESPUESTA → DIV → BODY → HTML → Document → Ventana → EVENTO

Siguiendo esta idea, se establecen tres etapas: captura, la cual se da cuando el evento se está trasladando a su destino. Blanco, que ocurre cuando llega al blanco, o sea que llega a su destino. Este destino es el objeto en el cual se va a crear una reacción a este evento. Finalmente la etapa de burbujeo que ocurre cuando el evento «regresa» a su posición original.

Ciertos objetos pueden estar pendientes de ciertos eventos. Para hacer esto el objeto añade un «oyente de eventos» con la función addEventListener. Cuando el evento ocurra, alguna función determinada se lleva a cabo. En este proceso se indica en qué momento la función se lleva a cabo, ya sea en la etapa de captura o en la etapa de burbujeo. Este momento se indica con la palabra true si debe ocurrir en la etapa de captura o false si debe ocurrir en la etapa de burbujeo. En JavaScript se escribe de la siguiente manera:

objeto.addEventListener(evento, funcion, momento);

por ejemplo:

document.getElementById("mydivision").addEventListener("click", hazAlgo, false);

Enlaces externos

• DOM según el W3C
• DOM según Mozilla
• Especificación de DOM Level 1 (en español)

• Datos: Q2093
• Multimedia: Document object models / Q2093