Comparar revisiones

Uso del núcleo del nivel 1 del DOM

Revisión 262798:

Revisión 262798 de Superruzafa el

Revisión 230272:

Revisión 230272 de Superruzafa el

Título:
Uso del núcleo del nivel 1 del DOM
Uso del núcleo del nivel 1 del DOM
Enlace amigable (slug):
Uso_del_núcleo_del_nivel_1_del_DOM
Uso_del_núcleo_del_nivel_1_del_DOM
Etiquetas:
DOM, Todas_las_Categorías
Contenido:

Revisión 262798
Revisión 230272
t7    <p>t
8      El núcleo del DOM nivel 1 del W3C es un potente modelo de o
>bjetos 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 l 
>a futura programación de la web. 
9    </p>
10    <h3 id=".C2.BFQu.C3.A9_es_un_.C3.A1rbol_de_contenidos.3F" nam
>e=".C2.BFQu.C3.A9_es_un_.C3.A1rbol_de_contenidos.3F"> 
11      ¿Qué es un árbol de contenidos?
12    </h3>
13    <p>
14      Muchos de los que trabajan con HTML pueden pensar que HTML 
>es algo plano, un montón de texto con etiquetas en medio. Sin emb 
>argo es mucho más que eso. Todo documento HTML (y por extensión t 
>odo documento SGML o XML) posee una estructura en árbol. Por ejem 
>plo, el siguiente documento y la estructura en árbol son similare 
>s (aunque no idénticas; ver anotaciones en <a href="es/The_DOM_an 
>d_JavaScript">espacios en blanco en DOM</a>): 
15    </p>
16    <pre class="eval">
17&lt;html&gt;
18&lt;head&gt;
19  &lt;title&gt;Mi documento&lt;/title&gt;
20&lt;/head&gt;
21&lt;body&gt;
22  &lt;h1&gt;Cabecera&lt;/h1&gt;
23  &lt;p&gt;Párrafo&lt;/p&gt;
24&lt;/body&gt;
25&lt;/html&gt;
26</pre>
27    <p>
28      <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"> 
29    </p>
30    <p>
31      Cuando analiza un documento, Mozilla construye un árbol de 
>contenidos y luego lo utiliza para mostrar el documento. 
32    </p>
33    <p>
34      Los términos usados para describir los árboles show up frec
>uentemente 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 her 
>manos. Similarmente, uno puede referirse a sus ancestros y descen 
>dientes (incluso a los nodos primos, aunque es más complicado de  
>explicar). 
35    </p>
36    <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"> 
37      ¿Qué me permite hacer el Nivel 1 del DOM?
38    </h3>
39    <p>
40      El nivel 1 del DOM del W3C te permite cambiar el árbol de c
>ontenidos <i>como te de la gana</i>. Es lo suficientemente podero 
>so como para construir cualquier documento HTML a partir de la na 
>da. Permite a los desarrolladores cambiar cualquier cosa en el do 
>cumento desde un script, en cualquier momento. La forma más fácil 
> para desarrolladores de páginas web para cambiar el DOM dinámica 
>mente es usando JavaScript. en JavaScript, el documento es accesi 
>ble en el mismo modo que lo hera en los viejos navegadores: desde 
> la propiedad global <code>document</code>. El objeto <code>docum 
>ent</code> implementa el <a class="external" href="http://www.w3. 
>org/TR/REC-DOM-Level-1/level-one-core.html#i-Document">interfaz d 
>e documento</a> del nivel 1 de la especificación para el DOM del  
>W3C. 
41    </p>
42    <h3 id="Un_ejemplo_simple" name="Un_ejemplo_simple">
43      Un ejemplo simple
44    </h3>
45    <p>
46      Supongamos que el autor del documento de arriba coge y camb
>ia 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 Ja 
>vascript</span></code>, <code><span class="highlightblue">métodos 
> y propiedades DOM</span></code> predefinidos y <code><span class 
>="highlightgreen">comentarios en Javascript</span></code>): 
47    </p>
48    <pre class="eval">
49<span class="highlightgreen">
50// document.getElementsByTagName("H1") devuelve un NodeList de lo
>s 
51// elementos H1 del documento; el primer elemento tiene índice 0:
52</span>
53<span class="highlightred">var</span> header = <span class="highl
>ightblue">document.getElementsByTagName</span>("H1").<span class= 
>"highlightblue">item</span>(0); 
54<span class="highlightgreen">
55// La propiedad firstChild de la cabecera contiene un nodo de tex
>to y su propiedad 
56// data contiene el texto del nodo:
57</span>
58header.<span class="highlightblue">firstChild.data</span> = "Un d
>ocumento dinámico"; 
59<span class="highlightgreen">
60// Ahora la cabecera es "Un documento dinámico".
61// Obtenemos el primer elemento P del documento de la misma forma
>: 
62</span>
63<span class="highlightred">var</span> para = <span class="highlig
>htblue">document.getElementsByTagName</span>("P").<span class="hi 
>ghlightblue">item</span>(0); 
64<span class="highlightgreen">
65// y cambiamos su texto:
66</span>
67para.<span class="highlightblue">firstChild.data = "Este es el pr
>imer párrafo.";</span> 
68<span class="highlightgreen">
69// creamos un nodo de texto para el segundo párrafo
70</span>
71<span class="highlightred">var</span> newText = <span class="high
>lightblue">document.createTextNode</span>("This is the second par 
>agraph."); 
72<span class="highlightgreen">
73// creamos un nuevo elemento que sea el segundo párrafo
74</span>
75<span class="highlightred">var</span> newElement = <span class="h
>ighlightblue">document.createElement</span>("P"); 
76<span class="highlightgreen">
77// ponemos el texto en el párrafo
78</span>
79newElement.<span class="highlightblue">appendChild</span>(newText
>); 
80<span class="highlightgreen">
81// y ponemos el párrafo al final del documento anexándolo
82// a la etiqueta BODY (que es el padre del párrafo
83</span>
84para.<span class="highlightblue">parentNode.appendChild</span>(ne
>wElement); 
85</pre>
86    <p>
87      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>. 
88    </p>
89    <h3 id=".C2.BFC.C3.B3mo_puedo_aprender_m.C3.A1s.3F" name=".C2
>.BFC.C3.B3mo_puedo_aprender_m.C3.A1s.3F"> 
90      ¿Cómo puedo aprender más?
91    </h3>
92    <p>
93      Una vez familiarizado con los conceptos básicos del DOM, pu
>edes leer el documento que explica los <a href="es/Traversing_an_ 
>HTML_table_with_JavaScript_and_DOM_Interfaces">métodos fundamenta 
>les del DOM nivel 1</a>. Es lo que sigue a este documento. 
94    </p>
95    <p>
96      Véase también la <a class="external" href="http://www.w3.or
>g/TR/REC-DOM-Level-1/level-one-core.html">especificación del núcl 
>eo de DOM nivel 1</a> del W3C. Es una especificación razonablemen 
>te clara a pesar de ser una especificación formal. Lo más útil pa 
>ra los desarrolladores es la descripción de los diferentes objeto 
>s del DOM y todas sus propiedades y métodos. Véase también nuestr 
>a <a href="es/DOM">otra documentación del DOM</a>. 
97    </p>
98    <div class="originaldocinfo">
99      <p>
100        {{ Block-title("Original Document Information") }}
101      </p>
102      <ul>
103        <li>Author(s): L. David Baron &lt;dbaron at dbaron dot or
>g&gt; 
104        </li>
105        <li>Copyright Information: © 1998-2005 by individual mozi
>lla.org contributors; content available under a <a class="externa 
>l" href="http://www.mozilla.org/foundation/licensing/website-cont 
>ent.html">Creative Commons license</a> 
106        </li>
107      </ul>
108    </div>

Volver al historial