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: 262794
  • Creada:
  • Creador: Superruzafa
  • ¿Es la revisión actual? No
  • Comentario /* What does the DOM Level 1 Core let me do? */

Contenido de la revisión

{{wiki.template('Traducción', [ "inglés", "Using the W3C DOM Level 1 Core", "en" ])}} The W3C's DOM Level 1 Core is a powerful object model for changing the content tree of documents. It is supported in Mozilla (on which Netscape 6 is based) and (mostly) in MSIE 5.0 for Windows. It is a powerful base for future scripting on the 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.

A simple example

Suppose the author wants to take the above document and change the contents of the header, and write two paragraphs instead of one. The following script would do the job (with syntax highlighting showing Javascript reserved words, predefined DOM properties and methods, and Javascript comments):

// document.getElementsByTagName("H1") returns a NodeList of the H1
// elements in the document, and the first is number 0:
var header = document.getElementsByTagName("H1").item(0);

// the firstChild of the header is a Text node, and the data
// property of the text node contains its text:
header.firstChild.data = "A dynamic document";
// now the header is "A dynamic document".

// Get the first P element in the document the same way:
var para = document.getElementsByTagName("P").item(0);
// and change its text too:
para.firstChild.data = "This is the first paragraph.";

// create a new Text node for the second paragraph
var newText = document.createTextNode("This is the second paragraph.");
// create a new Element to be the second paragraph
var newElement = document.createElement("P");
// put the text in the paragraph
newElement.appendChild(newText);
// and put the paragraph on the end of the document by appending it to
// the BODY (which is the parent of para)
para.parentNode.appendChild(newElement);

You can see this script as a complete example.

How can I learn more?

Now that you are familiar with the basic concepts of the DOM, there is a document explaining the DOM Level 1 fundamental methods. It is the follow-up to this document.

See also the DOM Level 1 Core specification from the W3C. It's a reasonably clear spec, although it is formal. The main thing that's useful to authors is the description of the different DOM objects and all their properties and methods. Also see our other DOM documentation.

{{wiki.template('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>
{{wiki.template('Traducción', [ "inglés", "Using the W3C DOM Level 1 Core", "en" ])}}
The W3C's DOM Level 1 Core is a powerful object model for changing the content tree of documents. It is supported in Mozilla (on which Netscape 6 is based) and (mostly) in MSIE 5.0 for Windows. It is a powerful base for future scripting on the web.
</p>
<h3 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" 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 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 name="A_simple_example"> A simple example </h3>
<p>Suppose the author wants to take the above document and change the contents of the header, and write two paragraphs instead of one. The following script would do the job (with syntax highlighting showing <code><span class="highlightred">Javascript reserved words</span></code>, predefined <code><span class="highlightblue">DOM properties and methods</span></code>, and <code><span class="highlightgreen">Javascript comments</span></code>): 
</p>
<pre class="eval"><span class="highlightgreen">// document.getElementsByTagName("H1") returns a NodeList of the H1
// elements in the document, and the first is number 0:</span>
<span class="highlightred">var</span> header = <span class="highlightblue">document.getElementsByTagName</span>("H1").<span class="highlightblue">item</span>(0);

<span class="highlightgreen">// the firstChild of the header is a Text node, and the data</span>
// property of the text node contains its text:
header.<span class="highlightblue">firstChild.data</span> = "A dynamic document";
<span class="highlightgreen">// now the header is "A dynamic document".</span>

<span class="highlightgreen">// Get the first P element in the document the same way:</span>
<span class="highlightred">var</span> para = <span class="highlightblue">document.getElementsByTagName</span>("P").<span class="highlightblue">item</span>(0);
<span class="highlightgreen">// and change its text too:</span>
para.<span class="highlightblue">firstChild.data = "This is the first paragraph.";</span>

<span class="highlightgreen">// create a new Text node for the second paragraph</span>
<span class="highlightred">var</span> newText = <span class="highlightblue">document.createTextNode</span>("This is the second paragraph.");
<span class="highlightgreen">// create a new Element to be the second paragraph</span>
<span class="highlightred">var</span> newElement = <span class="highlightblue">document.createElement</span>("P");
<span class="highlightgreen">// put the text in the paragraph</span>
newElement.<span class="highlightblue">appendChild</span>(newText);
<span class="highlightgreen">// and put the paragraph on the end of the document by appending it to
// the BODY (which is the parent of para)</span>
para.<span class="highlightblue">parentNode.appendChild</span>(newElement);
</pre>
<p>You can see this script as <a class="external" href="http://www.mozilla.org/docs/dom/technote/intro/example.html">a complete example</a>.
</p>
<h3 name="How_can_I_learn_more.3F"> How can I learn more? </h3>
<p>Now that you are familiar with the basic concepts of the DOM, there is a document explaining the <a href="es/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces">DOM Level 1 fundamental methods</a>. It is the follow-up to this document.
</p><p>See also the <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html">DOM Level 1 Core specification</a> from the W3C. It's a reasonably clear spec, although it is formal. The main thing that's useful to authors is the description of the different DOM objects and all their properties and methods. Also see our <a href="es/DOM">other DOM documentation</a>.
</p>
<div class="originaldocinfo">
<p>{{wiki.template('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