Introducción

  • Enlace amigable (slug) de la revisión: Referencia_DOM_de_Gecko/Introducción
  • Título de la revisión: Introducción
  • Id de la revisión: 256622
  • Creada:
  • Creador: Uri
  • ¿Es la revisión actual? No
  • Comentario /* Tipos de datos importantes */

Contenido de la revisión

Ésta sección da una breve introducción conceptual del DOM: qué es, cómo proporciona la estructura para los documentos HTML y XML, cómo se accede a él, y cómo esta "API" presenta la información de referencia y ejemplos.

Qué es el DOM?

El modelo de objeto de documento (DOM) es una interfaz de programación para los documentos HTML y XML. Facilita una representación 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 representación del documento como un grupo de nodos y objetos estructurados que tienen propiedades y métodos. Esencialmente, conecta las páginas web a scripts o lenguajes de programación.

Una página web es un documento. Éste documento puede exhibirse en la ventana de un navegador o también como código fuente HTML. Pero, en los dos casos, es el mismo documento. El modelo de objeto de documento (DOM) proporciona otras formas de presentar, guarda y manipular este mismo documento. El DOM es una representación completamente orientada al objeto de la página web y puede ser modificado con un lenguaje de script como JavaScript.

El W3C DOM estándar forma la base del funcionamiento del DOM en muchos navegadores modernos. Varios navegadores ofrecen extensiones más allá del estándar 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 método getElementsByTagName en el código 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, métodos y eventos disponibles para la manipulación y la creación de páginas 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 documentación procura una relación 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 programación pero sin él, el lenguaje JavaScript no tiene ningún modelo o noción de las páginas web, de la páginas XML ni de los elementos con los cuales es usualmente relacionado. Cada elemento -"el documento íntegro, el título, las tablas dentro del documento, los títulos 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 herméticamente enlazados, pero después se desarrollaron como entidades separadas. El contenido de la página es almacenado en DOM y el acceso y la manipulación se hace vía JavaScript, podría representarse aproximadamente así:

API(web o página XML) = DOM + JS(lenguaje de script)

El DOM fue diseñado para ser independiente de cualquier lenguaje de programación particular, hace que la presentación 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 # DOM property of document object;
p_list = doc.getElementsByTagName("para");

¿Cómo 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 estándar 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 páginas web al script.

Cuando se crea un script –esté en un elemento <SCRIPT> o incluido en una página web por la instrucción de cargar un script– inmediatamente está disponible para usarlo con el API, accediendo así a los elementos documento o ventana, para manipular el documento mismo o sus diferentes partes, las cuales son los varios elementos de una página web. La programación DOM hace algo tan simple como lo siguiente, lo cual abre un mensaje de alerta usando la función alerta() desde el objeto ventana, o permite métodos DOM más sofisticados para crear realmente un nuevo contenido, como en el largo ejemplo de más abajo.

<body onload="window.alert('Bienvenido a mi página!');">

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

<html>
<head>
<script>
// ejecuta esta función cuando la página se carga
window.onload = function() {
   // crea un par de elementos 
   // en otra página HTML vacía
   heading = document.createElement("h1");
   heading_text = document.createTextNode("Cabeza grande!");
   heading.appendChild(heading_text);
   document.body.appendChild(heading);
}
</script>
</head>
<body>
</body>
</html>

Tipos de datos importantes

Esta parte intenta describir, de la manera más 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 attributs.

La siguiente tabla describe brevemente estos tipos de datos

document Cuando un miembro devuelve un objeto del tipo document (por ejemplo, la propiedad ownerDocument de un elemento devuelve el documento "document" al cual pertenece), este objeto es la raíz del objeto documento en sí mismo. El capítulo La referencia al documento (document) de DOM lo explica con más detalles.
element element se refiere a un elemento o a un nodo de tipo de elemento "element" devuelto por un miembro del API de DOM. Dicho de otra manera, por ejemplo, el método document.createElement() devuelve un objeto referido a un nodo, lo que significa que este método devuelve el elemento que acaba de ser creado en el DOM. Los objetos element ponen en funcionamiento a la interfaz Element del DOM y también a la interfaz de nodo "Node" más básica, las cuales son incluidas en esta referencia.
nodeList Una lista de nodos "nodeList" es una serie de elementos, se restituye con el método document.getElementsByTagName(). Cada ítem de una nodeList es accesible con un listado de estas dos formas:
  • list.item(1)
  • list{{mediawiki.external(1)}}

Éstos dos indices son equivalentes. En el primero, item() es sólo el método de objeto nodeList. El segundo usa la típica sintaxis de seriado para sacar el segundo ítem en la lista.

attribute Cuando un atributo "attribute" es devuelto por un miembro (por ejemplo, por el método createAttribute()), es una referencia a un objeto que expone una interfaz particular (y limitada) a los atributos. Los atributos son nodos en el DOM igual que los elementos, pero no suelen usarse así.
NamedNodeMap Un namedNodeMap es una serie, pero los ítems son accesibles tanto por el nombre o por un índice, este último caso es meramente una conveniencia para enumerar ya que no están en ningún orden en particular en la lista. Un NamedNodeMap es un método de ítem() por esa razón, y permite poner o quitar ítems en un NamedNodeMap

Interfaces del DOM

Uno de los propósitos de esta guía es minimizar el hablar de interfaces abstractas, heredadas y otros detalles de funcionamiento. Más bien, concentrarse sobre los objetos en el DOM y sobre las actuales cosas que se pueden usar para manipular la jerarquía de DOM. Desde el punto de vista del programador web, es bastante indiferente saber que la representación del objeto del elemento HTML FORM toma la propidedad name desde la interfaz HTMLFormElement pero que las propiedades className se toman desde la propia interfaz HTMLElement. En ambos casos, la propiedad está sólo en el objeto formulario.

Pero puede resultar confuso el funcionamiento de la fuerte relación entre objetos e interfaces en el DOM, por eso esta sección intentará hablar un poquito sobre las interfaces actuales en la especificación del DOM y de como se dispone de ellas.

Interfaces y objetos

En algunos casos un objeto pone en ejecución a una sola interfaz. Pero a menudo un objeto toma prestada una tabla HTML (table) desde muchas interfaces diversas. El objeto tabla, por ejemplo, pone en funcionamiento una Interfaz especial del elemento tabla HTML, la cual incluye métodos como createCaption y insertRow. Pero como también es un elemento HTML, table pone en marcha a la interfaz del Element descrita en el capítulo La referencia al elemento del DOM. Y finalmente, puesto que un elemento HTML es también, por lo que concierna al DOM, un nudo en el árbol de nudos que hace el modelo de objeto para una página web o XML, el elemento de tabla hace funcionar la interfaz más básica 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/Element interface
for(var i = 0; i < tableAttrs.length; i++){
  // Interfaz del elemento de tabla HTML: atributo del borde
  if(tableAttrs[i].nodeName.toLowerCase() == "border")
    table.border = "1"; 
}
// Interfaz del elemento de tabla HTML: atributo del sumario
table.summary = "note: increased border";

Interfaces esenciales en el DOM

Esta sección lista las interfaces más comúnmente utilizadas en el DOM. La idea no es describir qué hacen estas APIs pero sí dar una idea de las clases de métodos y propiedades que se encuentran con el uso del DOM. Muchos ejemplos de uso común de esta API se encuentran en el capítulo Ejemplos DOM al final de este manual.

document y window son objetos cuya interfaces son generalmente muy usadas en la programación de DOM. En término simple, el objeto window representa algo como podría ser el navegador, y el objeto document es la raíz del documento en sí. Element hereda de la interfaz genérica Node, y juntos, estas dos interfaces proporcionan muchos métodos y propiedades utilizables sobre los elementos individuales. Éstos elementos pueden igualmente tener interfaces específicas según 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 páginas escritas en XML utilizando el DOM.

Probando el API del DOM

Ésta parte procura ejemplos para todas las interfaces usadas en el desarrollo web. En algunos casos, los ejemplos son páginas HTML enteras, con el acceso del DOM a un elemento de <script>, la interfaz necesaria (por ejemplo, botones) para la ejecución del script en un formulario, y también que los elementos HTML sobre los cuales opera el DOM se listen. Según el caso, los ejemplos se pueden copiar y pegar en un documento web para probarlos.

No es el caso donde los ejemplos son muchos más concisos. Para la ejecución de estos ejemplos que sólo demuestran la relación básica entre la interfaz y los elementos HTML, resulta útil tener una página de test en la cual las interfaces serán fácilmente accesibles por los scripts. La muy simple página siguiente proporciona en las cabeceras un elemento de script en el cual se pondrán las funciones para testar la interfaz elegida, algunos elementos HTML con atributos que se puedan leer, editar y también 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 página de test o un nueva similar son factibles. El contenido de la función test() se puede actualizar según la necesidad, para crear más botones o poner más elementos.

<html>
<head>
<title>Pruebas del DOM</title>
<script type="application/x-javascript">
function setBodyAttr(attr,value){
  if(document.body) eval('document.body.'+attr+'="'+value+'"');
  else notSupported();
}
</script>
</head> 
<body>
<div style="margin: .5in; height="400""> 
<p><b><tt>text</tt></p> 
<form> 
<select onChange="setBodyAttr('text',
    this.options[this.selectedIndex].value);"> 
<option value="black">negro 
<option value="darkblue">azul oscuro 
</select>
 <p><b><tt>bgColor</tt></p>
 <select onChange="setBodyAttr('bgColor',
    this.options[this.selectedIndex].value);"> 
<option value="white">blanco 
<option value="lightgrey">gris
 </select>
<p><b><tt>link</tt></p> 
<select onChange="setBodyAttr('link',
     this.options[this.selectedIndex].value);">
<option value="blue">azul
<option value="green">verde
</select>  <small>
     <a href="http://www.brownhen.com/dom_api_top.html" id="muestra">
(enlace de muestra)</a></small><br>
</form>
<form>
  <input type="button" value="version" onclick="ver()" />
</form>
</div>
</body>
</html>

La creación de una página de test 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 página web. Lo siguiente permite hacerse una idea de como pueden agruparse las interfaces para probarlas.

Image:DOM_EjemploPruebaTest.gif
Figura 0.1 Muestra de la página de prueba del DOM

En este ejemplo, los menúes desplegables actualizan dinámicamente los aspectos de la página web accesibles al DOM como el color de fondo (bgColor), de los hiper-enlaces (aLink), y el del texto (text). El hecho de diseñar páginas, testar las interfaces que se encuentren a lo largo de la lectura son una parte importante del aprendizaje para una utilización eficaz del DOM.

{{ wiki.languages( { "en": "en/Gecko_DOM_Reference/Introduction", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Introduction", "ja": "ja/Gecko_DOM_Reference/Introduction", "pl": "pl/Dokumentacja_Gecko_DOM/Wprowadzenie", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/\u5165\u95e8" } ) }}

Fuente de la revisión

<p>
</p><p>Ésta sección da una breve introducción conceptual del <a href="es/DOM">DOM</a>: qué es, cómo proporciona la estructura para los documentos <a href="es/HTML">HTML</a> y <a href="es/XML">XML</a>, cómo se accede a él, y cómo esta "API" presenta la información de referencia y ejemplos.
</p>
<h3 name="Qu.C3.A9_es_el_DOM.3F">Qué es el DOM?</h3>
<p>El modelo de objeto de documento (DOM) es una interfaz de programación para los documentos HTML y XML. Facilita una representación 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 representación del documento como un grupo de nodos y objetos estructurados que tienen propiedades y métodos. Esencialmente, conecta las páginas web a scripts o lenguajes de programación.
</p><p>Una página web es un documento. Éste documento puede exhibirse en la ventana de un navegador o también como código fuente HTML. Pero, en los dos casos, es el mismo documento. El modelo de objeto de documento (DOM) proporciona otras formas de presentar, guarda y manipular este mismo documento. El DOM es una representación completamente orientada al objeto de la página web y puede ser modificado con un lenguaje de script como JavaScript.
</p><p>El <a class="external" href="http://www.w3.org/DOM/">W3C DOM</a> estándar forma la base del funcionamiento del DOM en muchos navegadores modernos.  Varios navegadores ofrecen extensiones más allá del estándar 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.
</p><p>Por ejemplo, el DOM de W3C especifica que el método <code>getElementsByTagName</code> en el código de abajo debe devolver una lista de todos los elementos <code>&lt;P&gt;</code> del documento:
</p>
<pre>paragraphs = document.getElementsByTagName("P");
// paragraphs[0] es el primer elemento &lt;p&gt;
// paragraphs[1] es el segundo elemento &lt;p&gt;, etc.
alert(paragraphs[0].nodeName);
</pre>
<p>Todas las propiedades, métodos y eventos disponibles para la manipulación y la creación de páginas web está organizado dentro de objetos. Un ejemplo: el objeto <code>document</code> representa al documento mismo, el objeto <code>table</code> hace funcionar la interfaz especial <code>HTMLTableElement</code> del DOM para acceder a tablas HTML, y así sucesivamente. Ésta documentación procura una relación objeto-por-objeto del DOM que funciona con los navegadores basados en Gecko.
</p>
<h3 name="DOM_y_JavaScript">DOM y JavaScript</h3>
<p>El ejemplo corto de abajo, como casi todos los ejemplos de esta referencia, es <a href="es/JavaScript">JavaScript</a>. Es decir, es <i>escrito</i> en JavaScript pero <i>utiliza</i> el DOM para acceder al documento y a sus elementos. El DOM no es un lenguaje de programación pero sin él, el lenguaje JavaScript no tiene ningún modelo o noción de las páginas web, de la páginas XML ni de los elementos con los cuales es usualmente relacionado. Cada elemento -"el documento íntegro, el título, las tablas dentro del documento,  los títulos 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.
</p><p>En el comienzo, JavaScript y el DOM estaban herméticamente enlazados, pero después se desarrollaron como entidades separadas. El contenido de la página es almacenado en DOM y  el acceso y la manipulación se hace vía JavaScript, podría representarse aproximadamente así: 
</p><p>API(web o página XML) = DOM + JS(lenguaje de script)
</p><p>El DOM fue diseñado para ser independiente de cualquier lenguaje de programación particular, hace que la presentación 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:
</p>
<pre class="eval"># ejemplo DOM de python
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");
</pre>
<h3 name=".C2.BFC.C3.B3mo_se_accede_al_DOM.3F">¿Cómo se accede al DOM?</h3>
<p>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 estándar 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 páginas web al script.
</p><p>Cuando se crea un script –esté en un elemento <code>&lt;SCRIPT&gt;</code> o incluido en una página web por la instrucción de cargar un script– inmediatamente está disponible para usarlo con el API,  accediendo así a los elementos <code><a href="es/DOM/document">documento</a></code> o <code><a href="es/DOM/window">ventana</a></code>, para manipular el documento mismo o sus diferentes partes, las cuales son los varios elementos de una página web. La programación DOM hace algo tan simple como lo siguiente, lo cual abre un mensaje de alerta usando la función <code><a href="es/DOM/window.alert">alerta()</a></code> desde el objeto <code><a href="es/DOM/window">ventana</a></code>, o permite métodos DOM más sofisticados para crear realmente un nuevo contenido, como en el largo ejemplo de más abajo.
</p>
<pre class="eval">&lt;body onload="window.alert('Bienvenido a mi página!');"&gt;
</pre>
<p>Aparte del elemento <code>&lt;script&gt;</code> en el cual  JavaScript es definido, el ejemplo siguiente muestra la función a ejecutar cuando el documento se está cargando (y que el DOM completo es disponible para su uso). Esta función crea un nuevo elemento <code>H1</code>, le pone texto y después lo agrega al árbol del documento:
</p>
<pre class="eval">&lt;html&gt;
&lt;head&gt;
&lt;script&gt;
// ejecuta esta función cuando la página se carga
window.onload = function() {
   // crea un par de elementos 
   // en otra página HTML vacía
   heading = document.createElement("h1");
   heading_text = document.createTextNode("Cabeza grande!");
   heading.appendChild(heading_text);
   document.body.appendChild(heading);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="Tipos_de_datos_importantes">Tipos de datos importantes</h3>
<p>Esta parte intenta describir, de la manera más 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 <code>elements</code>, a una lista de nodos como <code>nodeLists</code> (o simples elementos) y a nodos de atributo como <code>attributs</code>.
</p><p>La siguiente tabla describe brevemente estos tipos de datos
</p>
<table border="1" cellpadding="5" cellspacing="0">
  <tbody><tr>
    <td><code>document</code></td>
    <td>Cuando un miembro devuelve un objeto del tipo <code>document</code> (por ejemplo, la propiedad <b>ownerDocument</b> de un elemento devuelve el documento "<code>document</code>" al cual pertenece), este objeto es la raíz del objeto documento en sí mismo. El capítulo <a href="es/DOM/documento">La referencia al documento (<code>document</code>) de DOM</a> lo explica con más detalles.</td>
  </tr>
  <tr>
    <td><code>element</code></td>
    <td><code>element</code> se refiere a un elemento o a un nodo de tipo de elemento "<code>element</code>" devuelto por un miembro del API de DOM. Dicho de otra manera, por ejemplo, el método <code>document.createElement()</code> devuelve un objeto referido a un <code>nodo</code>, lo que significa que este método devuelve el elemento que acaba de ser creado en el DOM. 
Los objetos <code>element</code> ponen en funcionamiento a la interfaz <code>Element</code> del DOM y también a la interfaz de nodo "<code>Node</code>" más básica, las cuales son incluidas en esta referencia.</td>
  </tr>
  <tr>
    <td><code>nodeList</code></td>
    <td>Una lista de nodos "<code>nodeList</code>" es una serie de elementos, se restituye con el método <code>document.getElementsByTagName()</code>. Cada ítem de una <code>nodeList</code> es accesible con un listado de estas dos formas:
<ul><li> list.item(1)
</li><li> list{{mediawiki.external(1)}}
</li></ul>
<p>Éstos dos indices son equivalentes. En el primero, <b>item()</b> es sólo el método de objeto <code>nodeList</code>. El segundo usa la típica sintaxis de seriado para sacar el segundo ítem en la lista.
</p>
</td>
  </tr>
  <tr>
    <td><code>attribute</code></td>
    <td>Cuando un atributo "<code>attribute</code>" es devuelto por un miembro (por ejemplo, por el método <b>createAttribute()</b>), es una referencia a un objeto que expone una interfaz particular (y limitada) a los atributos. Los atributos son nodos en el DOM igual que los elementos, pero no suelen usarse así.</td>
  </tr>
  <tr>
    <td><code>NamedNodeMap</code></td>
    <td>Un <code>namedNodeMap</code> es una serie, pero los ítems son accesibles tanto por el nombre o por un índice, este último caso es meramente una conveniencia para enumerar ya que no están en ningún orden en particular en la lista. Un <code>NamedNodeMap</code> es un método de ítem() por esa razón, y permite poner o quitar ítems en un <code>NamedNodeMap</code></td>
  </tr>
</tbody></table>
<h3 name="Interfaces_del_DOM">Interfaces del DOM</h3>
<p>Uno de los propósitos de esta guía es minimizar el hablar de interfaces abstractas, heredadas y otros detalles de funcionamiento. Más bien, concentrarse sobre los objetos en el DOM y sobre las actuales <i>cosas</i> que se pueden usar para manipular la jerarquía de DOM. Desde el punto de vista del programador web, es bastante indiferente saber que la representación del objeto del elemento <code>HTML FORM</code> toma la propidedad <b>name</b> desde la interfaz <code>HTMLFormElement</code> pero que las propiedades <b>className</b> se toman desde la propia interfaz <code>HTMLElement</code>. En ambos casos, la propiedad está sólo en el objeto formulario.
</p><p>Pero puede resultar confuso el funcionamiento de la fuerte relación entre objetos e interfaces en el DOM, por eso esta sección intentará hablar un poquito sobre las interfaces actuales en la especificación del DOM y de como se dispone de ellas.
</p>
<h4 name="Interfaces_y_objetos">Interfaces y objetos</h4>
<p>En algunos casos un objeto pone en ejecución a una sola interfaz. Pero a menudo un objeto toma prestada una tabla HTML (<code>table</code>) desde muchas interfaces diversas. El objeto tabla, por ejemplo, pone en funcionamiento una <a href="es/DOM/tabla">Interfaz especial del elemento tabla HTML</a>, la cual incluye métodos como <code>createCaption</code> y <code>insertRow</code>. Pero como también es un elemento HTML, <code>table</code> pone en marcha a la interfaz del <code>Element</code> descrita en el capítulo <a href="es/Referencia_DOM_de_Gecko/elemento">La referencia al elemento del DOM</a>. Y finalmente, puesto que un elemento HTML es también, por lo que concierna al DOM, un nudo en el árbol de nudos que hace el modelo de objeto para una página web o XML, el elemento de tabla hace funcionar la interfaz más básica de <code>Node</code>, desde el cual deriva <code>Element</code>.
</p><p>La referencia a un objeto <code>table</code>, como en el ejemplo siguiente, utiliza estas interfaces intercambiables sobre el objeto.
</p>
<pre>var table = document.getElementById("table");
var tableAttrs = table.attributes; // Node/Element interface
for(var i = 0; i &lt; tableAttrs.length; i++){
  // Interfaz del elemento de tabla HTML: atributo del borde
  if(tableAttrs[i].nodeName.toLowerCase() == "border")
    table.border = "1"; 
}
// Interfaz del elemento de tabla HTML: atributo del sumario
table.summary = "note: increased border";
</pre>
<h4 name="Interfaces_esenciales_en_el_DOM">Interfaces esenciales en el DOM</h4>
<p>Esta sección lista las interfaces más comúnmente utilizadas en el DOM. La idea no es describir qué hacen estas APIs pero sí dar una idea de las clases de métodos y propiedades que se encuentran con el uso del DOM. Muchos ejemplos de uso común de esta API se encuentran en el capítulo <a href="es/Referencia_DOM_de_Gecko/Ejemplos">Ejemplos DOM</a> al final de este manual.
</p><p><code>document</code> y <code>window</code> son objetos cuya interfaces son generalmente muy usadas en la programación de DOM. En término simple, el objeto <code>window</code> representa algo como podría ser el navegador, y el objeto <code>document</code> es la raíz del documento en sí. <code>Element</code> hereda de la interfaz genérica <code>Node</code>, y juntos, estas dos interfaces proporcionan muchos métodos y propiedades utilizables sobre los elementos individuales. Éstos elementos pueden igualmente tener interfaces específicas según el tipo de datos representados, como en el ejemplo anterior del objeto  <code>table</code>.
Lo siguiente es una breve lista de los APIS comunes en la web y en las páginas escritas en XML utilizando el DOM.
</p>
<ul><li> <code><a href="es/DOM/document.getElementById">document.getElementById</a>(id)</code>
</li><li> <code>element.<a href="es/DOM/element.getElementsByTagName">getElementsByTagName</a>(name)</code>
</li><li> <code><a href="es/DOM/document.createElement">document.createElement</a>(name)</code>
</li><li> <code>parentNode.<a href="es/DOM/element.appendChild">appendChild</a>(node)</code>
</li><li> <code>element.<a href="es/DOM/element.innerHTML">innerHTML</a></code>
</li><li> <code>element.<a href="es/DOM/element.style">style</a>.left</code>
</li><li> <code>element.<a href="es/DOM/element.setAttribute">setAttribute</a></code>
</li><li> <code>element.<a href="es/DOM/element.getAttribute">element.getAttribute</a></code>
</li><li> <code>element.<a href="es/DOM/element.addEventListener">addEventListener</a></code>
</li><li> <code><a href="es/DOM/window.content">window.content</a></code>
</li><li> <code><a href="es/DOM/window.onload">window.onload</a></code>
</li><li> <code><a href="es/DOM/window.dump">window.dump</a></code>
</li><li> <code><a href="es/DOM/window.scrollTo">window.scrollTo</a></code>
</li></ul>
<h3 name="Probando_el_API_del_DOM">Probando el API del DOM</h3>
<p>Ésta parte procura ejemplos para todas las interfaces usadas en el desarrollo web. En algunos casos, los ejemplos son páginas HTML enteras, con el acceso del DOM a un elemento de &lt;script&gt;, la interfaz necesaria (por ejemplo, botones) para la ejecución del script en un formulario, y también que los elementos HTML sobre los cuales opera el DOM se listen. Según el caso, los ejemplos se pueden copiar y pegar en un documento web para probarlos.
</p><p>No es el caso donde los ejemplos son muchos más concisos. Para la ejecución de estos ejemplos que sólo demuestran la relación básica entre la interfaz y los elementos HTML, resulta útil tener una página de test en la cual las interfaces serán fácilmente accesibles por los scripts. La muy simple página siguiente proporciona en las cabeceras un elemento de script en el cual se pondrán las funciones para testar la interfaz elegida, algunos elementos HTML con atributos que se puedan leer, editar y también manipular, así como la interfaz web necesaria para llamar esas funciones desde el navegador.
</p><p>Para probar y ver como trabajan en la plataforma del navegador las interfaces del DOM, esta página de test o un nueva similar son factibles. El contenido de la función <code>test()</code> se puede actualizar según la necesidad, para crear más botones o poner más elementos.
</p>
<pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Pruebas del DOM&lt;/title&gt;
&lt;script type="application/x-javascript"&gt;
function setBodyAttr(attr,value){
  if(document.body) eval('document.body.'+attr+'="'+value+'"');
  else notSupported();
}
&lt;/script&gt;
&lt;/head&gt; 
&lt;body&gt;
&lt;div style="margin: .5in; height="400""&gt; 
&lt;p&gt;&lt;b&gt;&lt;tt&gt;text&lt;/tt&gt;&lt;/p&gt; 
&lt;form&gt; 
&lt;select onChange="setBodyAttr('text',
    this.options[this.selectedIndex].value);"&gt; 
&lt;option value="black"&gt;negro 
&lt;option value="darkblue"&gt;azul oscuro 
&lt;/select&gt;
 &lt;p&gt;&lt;b&gt;&lt;tt&gt;bgColor&lt;/tt&gt;&lt;/p&gt;
 &lt;select onChange="setBodyAttr('bgColor',
    this.options[this.selectedIndex].value);"&gt; 
&lt;option value="white"&gt;blanco 
&lt;option value="lightgrey"&gt;gris
 &lt;/select&gt;
&lt;p&gt;&lt;b&gt;&lt;tt&gt;link&lt;/tt&gt;&lt;/p&gt; 
&lt;select onChange="setBodyAttr('link',
     this.options[this.selectedIndex].value);"&gt;
&lt;option value="blue"&gt;azul
&lt;option value="green"&gt;verde
&lt;/select&gt;  &lt;small&gt;
     &lt;a href="http://www.brownhen.com/dom_api_top.html" id="muestra"&gt;
(enlace de muestra)&lt;/a&gt;&lt;/small&gt;&lt;br&gt;
&lt;/form&gt;
&lt;form&gt;
  &lt;input type="button" value="version" onclick="ver()" /&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>La creación de una página de test 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 página web. Lo siguiente permite hacerse una idea de como pueden agruparse las interfaces para probarlas.
</p><p><img alt="Image:DOM_EjemploPruebaTest.gif" src="File:es/Media_Gallery/DOM_EjemploPruebaTest.gif"><br>
Figura 0.1 Muestra de la página de prueba del DOM
</p><p>En este ejemplo, los menúes desplegables actualizan dinámicamente los aspectos de la página web accesibles al DOM como el color de fondo (<code>bgColor</code>), de los hiper-enlaces (<code>aLink</code>), y el del texto (<code>text</code>). El hecho de diseñar páginas, testar las interfaces que se encuentren a lo largo de la lectura son una parte importante del aprendizaje para una utilización eficaz del DOM.
</p>{{ wiki.languages( { "en": "en/Gecko_DOM_Reference/Introduction", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Introduction", "ja": "ja/Gecko_DOM_Reference/Introduction", "pl": "pl/Dokumentacja_Gecko_DOM/Wprowadzenie", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/\u5165\u95e8" } ) }}
Revertir a esta revisión