mozilla

Revision 256613 of 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: 256613
  • Creada:
  • Creador: Nathymig
  • ¿Es la revisión actual? No
  • Comentario /* Tipos de datos importantes */ Traduciendo

Contenido de la revisión

{{wiki.template('Traducción', [ "inglés", "Gecko DOM Reference:Introduction", "en" ])}}

Ésta sección suministra una breve introducción conceptual del DOM: qué es, cómo proporciona la estructura para los documentos HTML y XML, cómo se acceder 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 tiene 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

Ésta 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 nudos como elements, a una lista de nudos como nodeLists (o simples elementos) y a nudos de atributo como attributs.

La siguiente tabla describe brevemente éstos 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 nudo 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 nudo, 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 nudo "Node" más básica, las cuales son incluidas en esta referencia.
nodeList Una lista de nudos "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 nudos 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

A stated purpose of this guide is to minimize talk about abstract interfaces, inheritance, and other implementation details, and to talk instead about the objects in the DOM, about the actual things you can use to manipulate the DOM hierarchy. From the point of view of the web programmer, it's often a matter of indifference that the object representing the HTML FORM element gets its name property from the HTMLFormElement interface but its className property from the HTMLElement interface proper. In both cases, the property you want is simply in the form object.

But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.

Interfaces y objetos

In some cases, an object implements a single interface. But more often than not, an object like an HTML table borrows from several different interfaces. The table object, for example, implements a specialized Interfaz del elemento tabla HTML, which includes such methods as createCaption and insertRow. But since it's also an HTML element, table implements the Element interface described in the La referencia al element del DOM chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for a web page or an XML page, the table element also implements the more basic Node interface, from which Element derives.

When you get a reference to a table object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.

var table = document.getElementById("table");
var tableAttrs = table.attributes; // Node/Element interface
for(var i = 0; i < tableAttrs.length; i++){
  // HTMLTableElement interface: border attribute
  if(tableAttrs[i].nodeName.toLowerCase() == "border")
    table.border = "1"; 
}
// HTMLTableElement interface: summary attribute
table.summary = "note: increased border";

Core Interfaces in the DOM

This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the Ejemplos DOM chapter at the end of this book.

Document and window objects are the objects whose interfaces you generally use most often in DOM programming. In simple terms, the window object represents something like the browser, and the document object is the root of the document itself. Element inherits from the generic Node interface, and together these two interfaces provide many of the methods and properties you use on individual elements. These elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the table object example in the previous section.

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

This document provides samples for every interface that you can use in your own web development. In some cases, the samples are complete HTML pages, with the DOM access in a <script> element, the interface (e.g, buttons) necessary to fire up the script in a form, and the HTML elements upon which the DOM operates listed as well. When this is the case, you can cut and paste the example into a new HTML document, save it, and run the example from the browser.

There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. The following very simple web page provides a <script> element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.

You can use this test page or create a similar one to test the DOM interfaces you are interested in and see how they work on the browser platform. You can update the contents of the test() function as needed, create more buttons, or add elements as necessary.

<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> color del <tt>texto</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>enlace</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>

To test a lot of interfaces in a single page-for example, a "suite" of properties that affect the colors of a web page-you can create a similar test page with a whole console of buttons, textfields, and other HTML elements. The following screenshot gives you some idea of how interfaces can be grouped together for testing.

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

In this example, the dropdown menus dynamically update such DOM-accessible aspects of the web page as its background color (bgColor), the color of the hyperlinks (aLink), and color of the text (text). However you design your test pages, testing the interfaces as you read about them is an important part of learning how to use the DOM effectively.

{{ 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>
{{wiki.template('Traducción', [ "inglés", "Gecko DOM Reference:Introduction", "en" ])}}
</p><p>Ésta sección suministra 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 acceder a él, y cómo esta <a href="es/API">API</a> 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="C.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 tiene 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>Ésta 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 nudos como <code>elements</code>, a una lista de nudos como <code>nodeLists</code> (o simples elementos) y a nudos de atributo como <code>attributs</code>.
</p><p>La siguiente tabla describe brevemente éstos 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 nudo 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>nudo</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 nudo "<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 nudos "<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 nudos 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>A stated purpose of this guide is to minimize talk about abstract interfaces, inheritance, and other  implementation details, and to talk instead about the objects in the DOM, about the actual <i>things</i> you can use to manipulate the DOM hierarchy. From the point of view of the web programmer, it's often a matter of indifference that the object representing the <code>HTML FORM</code> element gets its <b>name</b> property from the <code>HTMLFormElement</code> interface but its <b>className</b> property from the <code>HTMLElement</code> interface proper. In both cases, the property you want is simply in the form object.
</p><p>But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.
</p>
<h4 name="Interfaces_y_objetos">Interfaces y objetos</h4>
<p>In some cases, an object implements a single interface. But more often than not, an object like an HTML <code>table</code> borrows from several different interfaces. The table object, for example, implements a specialized <a href="es/DOM/tabla">Interfaz del elemento tabla HTML</a>, which includes such methods as <code>createCaption</code> and <code>insertRow</code>. But since it's also an HTML element, <code>table</code> implements the <code>Element</code> interface described in the <a href="es/Referencia_DOM_de_Gecko/elemento">La referencia al <code>element</code> del DOM</a> chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for a web page or an XML page, the table element also implements the more basic <code>Node</code> interface, from which <code>Element</code> derives.
</p><p>When you get a reference to a <code>table</code> object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.
</p>
<pre>var table = document.getElementById("table");
var tableAttrs = table.attributes; // Node/Element interface
for(var i = 0; i &lt; tableAttrs.length; i++){
  // HTMLTableElement interface: border attribute
  if(tableAttrs[i].nodeName.toLowerCase() == "border")
    table.border = "1"; 
}
// HTMLTableElement interface: summary attribute
table.summary = "note: increased border";
</pre>
<h4 name="Core_Interfaces_in_the_DOM">Core Interfaces in the DOM</h4>
<p>This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the <a href="es/Referencia_DOM_de_Gecko/Ejemplos">Ejemplos DOM</a> chapter at the end of this book.
</p><p><code>Document</code> and <code>window</code> objects are the objects whose interfaces you generally use most often in DOM programming. In simple terms, the <code>window</code> object represents something like the browser, and the <code>document</code> object is the root of the document itself. <code>Element</code> inherits from the generic <code>Node</code> interface, and together these two interfaces provide many of the methods and properties you use on individual elements. These elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the <code>table</code> object example in the previous section.
</p><p>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>This document provides samples for every interface that you can use in your own web development. In some cases, the samples are complete HTML pages, with the DOM access in a &lt;script&gt; element, the interface (e.g, buttons) necessary to fire up the script in a form, and the HTML elements upon which the DOM operates listed as well. When this is the case, you can cut and paste the example into a new HTML document, save it, and run the example from the browser.
</p><p>There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. The following very simple web page provides a &lt;script&gt; element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.
</p><p>You can use this test page or create a similar one to test the DOM interfaces you are interested in and see how they work on the browser platform. You can update the contents of the <code>test()</code> function as needed, create more buttons, or add elements as necessary.
</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; color del &lt;tt&gt;texto&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;enlace&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>To test a lot of interfaces in a single page-for example, a "suite" of properties that affect the colors of a web page-you can create a similar test page with a whole console of buttons, textfields, and other HTML elements. The following screenshot gives you some idea of how interfaces can be grouped together for testing.
</p><p><img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" src="File:es/Media_Gallery/DOM_Ref_Introduction_to_the_DOM.gif"><br>
Figura 0.1 Muestra la página de prueba del DOM
</p><p>In this example, the dropdown menus dynamically update such DOM-accessible aspects of the web page as its background color (<code>bgColor</code>), the color of the hyperlinks (<code>aLink</code>), and color of the text (<code>text</code>). However you design your test pages, testing the interfaces as you read about them is an important part of learning how to use the DOM effectively.
</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