Uso del núcleo del nivel 1 del DOM

  • Enlace amigable (slug) de la revisión: Uso_del_núcleo_del_nivel_1_del_DOM
  • Título de la revisión: Uso del núcleo del nivel 1 del DOM
  • Id de la revisión: 262798
  • Creada:
  • Creador: Superruzafa
  • ¿Es la revisión actual?
  • Comentario

Contenido de la revisión

El núcleo del DOM nivel 1 del W3C es un potente modelo de objetos para cambiar el árbol de contenidos de los documentos. Está soportado en Mozilla (en el cual está basado Netscape 6) y (la mayor parte de) MSIE 5.0 para Windows. Es una potente base para la futura programación de la web.

¿Qué es un árbol de contenidos?

Muchos de los que trabajan con HTML pueden pensar que HTML es algo plano, un montón de texto con etiquetas en medio. Sin embargo es mucho más que eso. Todo documento HTML (y por extensión todo documento SGML o XML) posee una estructura en árbol. Por ejemplo, el siguiente documento y la estructura en árbol son similares (aunque no idénticas; ver anotaciones en espacios en blanco en DOM):

<html>
<head>
  <title>Mi documento</title>
</head>
<body>
  <h1>Cabecera</h1>
  <p>Párrafo</p>
</body>
</html>

image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg

Cuando analiza un documento, Mozilla construye un árbol de contenidos y luego lo utiliza para mostrar el documento.

Los términos usados para describir los árboles show up frecuentemente en el núcleo del DOM nivel 1. Cada caja dibujada en el árbol de arriba es un nodo en el árbol. La línea sobre cada nodo expresa una relación padre-hijo: el nodo superior es el padre y el inferior, el hijo. Dos hijos del mismo padre son por tanto hermanos. Similarmente, uno puede referirse a sus ancestros y descendientes (incluso a los nodos primos, aunque es más complicado de explicar).

¿Qué me permite hacer el Nivel 1 del DOM?

El nivel 1 del DOM del W3C te permite cambiar el árbol de contenidos como te de la gana. Es lo suficientemente poderoso como para construir cualquier documento HTML a partir de la nada. Permite a los desarrolladores cambiar cualquier cosa en el documento desde un script, en cualquier momento. La forma más fácil para desarrolladores de páginas web para cambiar el DOM dinámicamente es usando JavaScript. en JavaScript, el documento es accesible en el mismo modo que lo hera en los viejos navegadores: desde la propiedad global document. El objeto document implementa el interfaz de documento del nivel 1 de la especificación para el DOM del W3C.

Un ejemplo simple

Supongamos que el autor del documento de arriba coge y cambia los contenidos de la cabecera y escribe dos párrafos en lugar de uno. El siguiente script debería hacer lo mismo (Resaltado de sintaxis: palabras reservadas Javascript, métodos y propiedades DOM predefinidos y comentarios en Javascript):


// document.getElementsByTagName("H1") devuelve un NodeList de los
// elementos H1 del documento; el primer elemento tiene índice 0:

var header = document.getElementsByTagName("H1").item(0);

// La propiedad firstChild de la cabecera contiene un nodo de texto y su propiedad
// data contiene el texto del nodo:

header.firstChild.data = "Un documento dinámico";

// Ahora la cabecera es "Un documento dinámico".
// Obtenemos el primer elemento P del documento de la misma forma:

var para = document.getElementsByTagName("P").item(0);

// y cambiamos su texto:

para.firstChild.data = "Este es el primer párrafo.";

// creamos un nodo de texto para el segundo párrafo

var newText = document.createTextNode("This is the second paragraph.");

// creamos un nuevo elemento que sea el segundo párrafo

var newElement = document.createElement("P");

// ponemos el texto en el párrafo

newElement.appendChild(newText);

// y ponemos el párrafo al final del documento anexándolo
// a la etiqueta BODY (que es el padre del párrafo

para.parentNode.appendChild(newElement);

Puedes ver este script en acción en el ejemplo completo.

¿Cómo puedo aprender más?

Una vez familiarizado con los conceptos básicos del DOM, puedes leer el documento que explica los métodos fundamentales del DOM nivel 1. Es lo que sigue a este documento.

Véase también la especificación del núcleo de DOM nivel 1 del W3C. Es una especificación razonablemente clara a pesar de ser una especificación formal. Lo más útil para los desarrolladores es la descripción de los diferentes objetos del DOM y todas sus propiedades y métodos. Véase también nuestra otra documentación del DOM.

{{ Block-title("Original Document Information") }}

  • Author(s): L. David Baron <dbaron at dbaron dot org>
  • Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a Creative Commons license

Fuente de la revisión

<p>
</p><p>El núcleo del DOM nivel 1 del W3C es un potente modelo de objetos para cambiar el árbol de contenidos de los documentos. Está soportado en Mozilla (en el cual está basado Netscape 6) y (la mayor parte de) MSIE 5.0 para Windows. Es una potente base para la futura programación de la web.
</p>
<h3 id=".C2.BFQu.C3.A9_es_un_.C3.A1rbol_de_contenidos.3F" name=".C2.BFQu.C3.A9_es_un_.C3.A1rbol_de_contenidos.3F"> ¿Qué es un árbol de contenidos? </h3>
<p>Muchos de los que trabajan con HTML pueden pensar que HTML es algo plano, un montón de texto con etiquetas en medio. Sin embargo es mucho más que eso. Todo documento HTML (y por extensión todo documento SGML o XML) posee una estructura en árbol. Por ejemplo, el siguiente documento y la estructura en árbol son similares (aunque no idénticas; ver anotaciones en <a href="es/The_DOM_and_JavaScript">espacios en blanco en DOM</a>): </p>
<pre class="eval">&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Mi documento&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Cabecera&lt;/h1&gt;
  &lt;p&gt;Párrafo&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p><img alt="image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg" fileid="0" src="File:es/Media_Gallery/Using_the_W3C_DOM_Level_1_Core-doctree.jpg">
</p><p>Cuando analiza un documento, Mozilla construye un árbol de contenidos y luego lo utiliza para mostrar el documento.
</p><p>Los términos usados para describir los árboles show up frecuentemente en el núcleo del DOM nivel 1. Cada caja dibujada en el árbol de arriba es un nodo en el árbol. La línea sobre cada nodo expresa una relación padre-hijo: el nodo superior es el padre y el inferior, el hijo. Dos hijos del mismo padre son por tanto hermanos. Similarmente, uno puede referirse a sus ancestros y descendientes (incluso a los nodos primos, aunque es más complicado de explicar).
</p>
<h3 id=".C2.BFQu.C3.A9_me_permite_hacer_el_Nivel_1_del_DOM.3F" name=".C2.BFQu.C3.A9_me_permite_hacer_el_Nivel_1_del_DOM.3F"> ¿Qué me permite hacer el Nivel 1 del DOM? </h3>
<p>El nivel 1 del DOM del W3C te permite cambiar el árbol de contenidos <i>como te de la gana</i>. Es lo suficientemente poderoso como para construir cualquier documento HTML a partir de la nada. Permite a los desarrolladores cambiar cualquier cosa en el documento desde un script, en cualquier momento. La forma más fácil para desarrolladores de páginas web para cambiar el DOM dinámicamente es usando JavaScript. en JavaScript, el documento es accesible en el mismo modo que lo hera en los viejos navegadores: desde la propiedad global <code>document</code>. El objeto <code>document</code> implementa el <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#i-Document">interfaz de documento</a> del nivel 1 de la especificación para el DOM del W3C.
</p>
<h3 id="Un_ejemplo_simple" name="Un_ejemplo_simple"> Un ejemplo simple </h3>
<p>Supongamos que el autor del documento de arriba coge y cambia los contenidos de la cabecera y escribe dos párrafos en lugar de uno. El siguiente script debería hacer lo mismo (Resaltado de sintaxis: <code><span class="highlightred">palabras reservadas Javascript</span></code>, <code><span class="highlightblue">métodos y propiedades DOM</span></code> predefinidos y <code><span class="highlightgreen">comentarios en Javascript</span></code>):
</p>
<pre class="eval"><span class="highlightgreen">
// document.getElementsByTagName("H1") devuelve un NodeList de los
// elementos H1 del documento; el primer elemento tiene índice 0:
</span>
<span class="highlightred">var</span> header = <span class="highlightblue">document.getElementsByTagName</span>("H1").<span class="highlightblue">item</span>(0);
<span class="highlightgreen">
// La propiedad firstChild de la cabecera contiene un nodo de texto y su propiedad
// data contiene el texto del nodo:
</span>
header.<span class="highlightblue">firstChild.data</span> = "Un documento dinámico";
<span class="highlightgreen">
// Ahora la cabecera es "Un documento dinámico".
// Obtenemos el primer elemento P del documento de la misma forma:
</span>
<span class="highlightred">var</span> para = <span class="highlightblue">document.getElementsByTagName</span>("P").<span class="highlightblue">item</span>(0);
<span class="highlightgreen">
// y cambiamos su texto:
</span>
para.<span class="highlightblue">firstChild.data = "Este es el primer párrafo.";</span>
<span class="highlightgreen">
// creamos un nodo de texto para el segundo párrafo
</span>
<span class="highlightred">var</span> newText = <span class="highlightblue">document.createTextNode</span>("This is the second paragraph.");
<span class="highlightgreen">
// creamos un nuevo elemento que sea el segundo párrafo
</span>
<span class="highlightred">var</span> newElement = <span class="highlightblue">document.createElement</span>("P");
<span class="highlightgreen">
// ponemos el texto en el párrafo
</span>
newElement.<span class="highlightblue">appendChild</span>(newText);
<span class="highlightgreen">
// y ponemos el párrafo al final del documento anexándolo
// a la etiqueta BODY (que es el padre del párrafo
</span>
para.<span class="highlightblue">parentNode.appendChild</span>(newElement);
</pre>
<p>Puedes ver este script en acción en el <a class="external" href="http://www.mozilla.org/docs/dom/technote/intro/example.html">ejemplo completo</a>.
</p>
<h3 id=".C2.BFC.C3.B3mo_puedo_aprender_m.C3.A1s.3F" name=".C2.BFC.C3.B3mo_puedo_aprender_m.C3.A1s.3F"> ¿Cómo puedo aprender más? </h3>
<p>Una vez familiarizado con los conceptos básicos del DOM, puedes leer el documento que explica los <a href="es/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces">métodos fundamentales del DOM nivel 1</a>. Es lo que sigue a este documento.
</p><p>Véase también la <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html">especificación del núcleo de DOM nivel 1</a> del W3C. Es una especificación razonablemente clara a pesar de ser una especificación formal. Lo más útil para los desarrolladores es la descripción de los diferentes objetos del DOM y todas sus propiedades y métodos. Véase también nuestra <a href="es/DOM">otra documentación del DOM</a>.
</p>
<div class="originaldocinfo">
<p>{{ Block-title("Original Document Information") }}
</p>
<ul><li> Author(s): L. David Baron &lt;dbaron at dbaron dot org&gt;
</li><li> Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a> </li></ul></div> 
Revertir a esta revisión