Introduccin

Qu es el DOM?

El modelo de objeto de documento (DOM) es una interfaz de programacin para los documentos HTML y XML. Facilita una representacin estructurada del documento y define de qu manera los programas pueden acceder, al fin de modificar, tanto su estructura, estilo y contenido. El DOM da una representacin del documento como un grupo de nodos y objetos estructurados que tienen propiedades y mtodos. Esencialmente, conecta las pginas web a scripts o lenguajes de programacin.

Una pgina web es un documento. ste documento puede exhibirse en la ventana de un navegador o tambin como cdigo fuente HTML. Pero, en los dos casos, es el mismo documento. El modelo de objeto de documento (DOM) proporciona otras formas de presentar, guardar y manipular este mismo documento. El DOM es una representacin completamente orientada al objeto de la pgina web y puede ser modificado con un lenguaje de script como JavaScript.

El W3C DOM estndar forma la base del funcionamiento del DOM en muchos navegadores modernos. Varios navegadores ofrecen extensiones ms all del estndar W3C, hay que ir con extremo cuidado al utilizarlas en la web, ya que los documentos pueden ser consultados por navegadores que tienen DOMs diferentes.

Por ejemplo, el DOM de W3C especifica que el mtodo getElementsByTagName en el cdigo de abajo debe devolver una lista de todos los elementos <p> del documento:

paragraphs = document.getElementsByTagName("p");
// paragraphs[0] es el primer elemento <p>
// paragraphs[1] es el segundo elemento <p>, etc.
alert(paragraphs[0].nodeName);

Todas las propiedades, mtodos y eventos disponibles para la manipulacin y la creacin de pginas web est organizado dentro de objetos. Un ejemplo: el objeto document representa al documento mismo, el objeto table hace funcionar la interfaz especial HTMLTableElement del DOM para acceder a tablas HTML, y as sucesivamente. sta documentacin procura una relacin objeto-por-objeto del DOM que funciona con los navegadores basados en Gecko.

DOM y JavaScript

El ejemplo corto de abajo, como casi todos los ejemplos de esta referencia, es JavaScript. Es decir, es escrito en JavaScript pero utiliza el DOM para acceder al documento y a sus elementos. El DOM no es un lenguaje de programacin pero sin l, el lenguaje JavaScript no tiene ningn modelo o nocin de las pginas web, de la pginas XML ni de los elementos con los cuales es usualmente relacionado. Cada elemento -"el documento ntegro, el ttulo, las tablas dentro del documento, los ttulos de las tablas, el texto dentro de las celdas de las tablas"- es parte del modelo de objeto del documento para cada documento, as se puede acceder y manipularlos utilizando el DOM y un lenguaje de escritura, como JavaScript.

En el comienzo, JavaScript y el DOM estaban hermticamente enlazados, pero despus se desarrollaron como entidades separadas. El contenido de la pgina es almacenado en DOM y el acceso y la manipulacin se hace va JavaScript, podra representarse aproximadamente as:

API(web o pgina XML) = DOM + JS(lenguaje de script)

El DOM fue diseado para ser independiente de cualquier lenguaje de programacin particular, hace que la presentacin estructural del documento sea disponible desde un simple y consistente API. Aunque en este manual nos centramos exclusivamente en JavaScript, la directrices del DOM pueden construirse para cualquier lenguaje, as lo demuestra el siguiente ejemplo de Python:

# Ejemplo DOM de Python
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # Propiedad DOM del objeto document;
p_list = doc.getElementsByTagName("para");

Cmo se accede al DOM?

No se tiene que hacer nada especial para empezar a utilizar el DOM. Los diferentes navegadores tienen directrices DOM distintas, y stas directrices tienen diversos grados de conformidad al actual estndar DOM (un tema que se intenta evitar en este manual), pero todos los navegadores web usan el modelo de objeto de documento para hacer accesibles las pginas web al script.

Cuando se crea un script est en un elemento <SCRIPT> o incluido en una pgina web por la instruccin de cargar un script inmediatamente est disponible para usarlo con el API, accediendo as a los elementos document o window, para manipular el documento mismo o sus diferentes partes, las cuales son los varios elementos de una pgina web. La programacin DOM hace algo tan simple como lo siguiente, lo cual abre un mensaje de alerta usando la funcin alert() desde el objeto window, o permite mtodos DOM ms sofisticados para crear realmente un nuevo contenido, como en el largo ejemplo de ms abajo.

<body ></body>

Aparte del elemento <script> en el cual JavaScript es definido, el ejemplo siguiente muestra la funcin a ejecutar cuando el documento se est cargando (y que el DOM completo es disponible para su uso). Esta funcin crea un nuevo elemento H1, le pone texto y despus lo agrega al rbol del documento:

<html>
  <head>
    <script>
      // ejecuta esta funcin cuando se cargue el documento
      window.onload = function () {
        // crea dinmicamente un par de elementos HTML en una pgina vacia
        var heading = document.createElement("h1");
        var heading_text = document.createTextNode("el texto que desee");
        heading.appendChild(heading_text);
        document.body.appendChild(heading);
      };
    </script>
  </head>
  <body></body>
</html>

Tipos de datos importantes

Esta parte intenta describir, de la manera ms simple posible, los diferentes objetos y tipos. Pero hay que conocer una cantidad de tipos de datos diferentes que son utilizados por el API. Para simplificarlo, los ejemplos de sintaxis en esta API se refieren a nodos como elements, a una lista de nodos como nodeLists (o simples elementos) y a nodos de atributo como attributes.

La siguiente tabla describe brevemente estos tipos de datos.

Interfaces del DOM

Uno de los propsitos de esta gua es minimizar el hablar de interfaces abstractas, heredadas y otros detalles de funcionamiento. Ms bien, concentrarse sobre los objetos en el DOM y sobre las actuales cosas que se pueden usar para manipular la jerarqua de DOM. Desde el punto de vista del programador web, es bastante indiferente saber que la representacin del objeto del elemento HTML form toma la propidedad name desde la interfaz HTMLFormElement pero que las propiedades classNamese toman desde la propia interfaz HTMLElement. En ambos casos, la propiedad est slo en el objeto form.

Pero puede resultar confuso el funcionamiento de la fuerte relacin entre objetos e interfaces en el DOM, por eso esta seccin intentar hablar un poquito sobre las interfaces actuales en la especificacin del DOM y de como se dispone de ellas.

Interfaces y objetos

En algunos casos un objeto pone en ejecucin a una sola interfaz. Pero a menudo un objeto toma prestada una tabla HTML (table) desde muchas interfaces diversas. El objeto table, por ejemplo, pone en funcionamiento una Interfaz especial del elemento table HTML, la cual incluye mtodos como createCaption y insertRow. Pero como tambin es un elemento HTML, table pone en marcha a la interfaz del Element descrita en el captulo La referencia al elemento del DOM. Y finalmente, puesto que un elemento HTML es tambin, por lo que concierna al DOM, un nodo en el rbol de nodos que hace el modelo de objeto para una pgina web o XML, el elemento de table hace funcionar la interfaz ms bsica de Node, desde el cual deriva Element.

La referencia a un objeto table, como en el ejemplo siguiente, utiliza estas interfaces intercambiables sobre el objeto.

var table = document.getElementById("table");
var tableAttrs = table.attributes; // Node/interfaz Element
for (var i = 0; i < tableAttrs.length; i++) {
  // interfaz HTMLTableElement: atributo border
  if (tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1";
}
// interfaz HTMLTableElement: atributo summary
table.summary = "nota: borde aumentado";

Interfaces esenciales en el DOM

Esta seccin lista las interfaces ms comnmente utilizadas en el DOM. La idea no es describir qu hacen estas APIs pero s dar una idea de las clases de mtodos y propiedades que se encuentran con el uso del DOM. Muchos ejemplos de uso comn de esta API se encuentran en el captulo Ejemplos DOM al final de este manual.

document y window son objetos cuya interfaces son generalmente muy usadas en la programacin de DOM. En trmino simple, el objeto window representa algo como podra ser el navegador, y el objeto document es la raz del documento en s. Element hereda de la interfaz genrica Node, y juntos, estas dos interfaces proporcionan muchos mtodos y propiedades utilizables sobre los elementos individuales. stos elementos pueden igualmente tener interfaces especficas segn el tipo de datos representados, como en el ejemplo anterior del objeto table. Lo siguiente es una breve lista de los APIS comunes en la web y en las pginas escritas en XML utilizando el DOM.

• document.getElementById(id)
• element.getElementsByTagName(name)
• document.createElement(name)
• parentNode.appendChild(node)
• element.innerHTML
• element.style.left
• element.setAttribute
• element.element.getAttribute
• element.addEventListener
• window.content
• window.onload
• window.dump
• window.scrollTo

Probando el API del DOM

sta parte procura ejemplos para todas las interfaces usadas en el desarrollo web. En algunos casos, los ejemplos son pginas HTML enteras, con el acceso del DOM a un elemento de <script>, la interfaz necesaria (por ejemplo, botones) para la ejecucin del script en un formulario, y tambin que los elementos HTML sobre los cuales opera el DOM se listen. Segn el caso, los ejemplos se pueden copiar y pegar en un documento web para probarlos.

No es el caso donde los ejemplos son muchos ms concisos. Para la ejecucin de estos ejemplos que slo demuestran la relacin bsica entre la interfaz y los elementos HTML, resulta til tener una pgina de prueba en la cual las interfaces sern fcilmente accesibles por los scripts. La muy simple pgina siguiente proporciona en las cabeceras un elemento de script en el cual se pondrn las funciones para testar la interfaz elegida, algunos elementos HTML con atributos que se puedan leer, editar y tambin manipular, as como la interfaz web necesaria para llamar esas funciones desde el navegador.

Para probar y ver como trabajan en la plataforma del navegador las interfaces del DOM, esta pgina de prueba o una nueva similar son factibles. El contenido de la funcin test() se puede actualizar segn la necesidad, para crear ms botones o poner ms elementos.

<html>
  <head>
    <title>Pruebas DOM</title>
    <script type="application/javascript">
      function setBodyAttr(attr, value) {
        if (document.body) eval("document.body." + attr + '="' + value + '"');
        else notSupported();
      }
    </script>
  </head>
  <body>
    <div >
      <p>
        <b><tt>texto</tt></b>
      </p>
      <form>
        <select
          >
          <option value="black">negro</option>
          <option value="darkblue">azul oscuro</option>
        </select>
        <p>
          <b><tt>bgColor</tt></b>
        </p>
        <select
          >
          <option value="white">blanco</option>
          <option value="lightgrey">gris</option>
        </select>
        <p>
          <b><tt>link</tt></b>
        </p>
        <select
          >
          <option value="blue">azul</option>
          <option value="green">verde</option>
        </select>
        <small>
          <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
            (sample link)</a
          ></small
        ><br />
      </form>
      <form>
        <input type="button" value="version"  />
      </form>
    </div>
  </body>
</html>

La creacin de una pgina de prueba con una paleta de botones, campos de texto u otros elementos HTML, permitir testar una gran cantidad de interfaces en un mismo documento, por ejemplo una serie de propiedades que afectan a los colores de una pgina web. Lo siguiente permite hacerse una idea de como pueden agruparse las interfaces para probarlas.

Figura 0.1 Muestra DOM pgina de prueba

[]

En este ejemplo, los menes desplegables actualizan dinmicamente los aspectos de la pgina web accesibles al DOM como el color de fondo (bgColor), de los hiper-enlaces (aLink), y el del texto (text). El hecho de disear pginas, testar las interfaces que se encuentren a lo largo de la lectura son una parte importante del aprendizaje para una utilizacin eficaz del DOM.

Otros enlaces

• Referencia DOM
• Introduccin al DOM
• Eventos y el DOM
• Ejemplos