mozilla

Revision 262793 of 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: 262793
  • Creada:
  • Creador: Superruzafa
  • ¿Es la revisión actual? No
  • Comentario /* What is a content tree? */
Etiquetas: 

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).

What does the DOM Level 1 Core let me do?

The W3C DOM Level 1 allows you to change the content tree any way you want. It is powerful enough to build any HTML document from scratch. It allows authors to change anything in the document from script, at any time. The easiest way for web page authors to change the DOM dynamically is using JavaScript. In JavaScript, the document is accessible the same way it has been in older browsers: from the document property of the global object. This document object implements the Document interface from the W3C's DOM Level 1 spec.

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="What_does_the_DOM_Level_1_Core_let_me_do.3F"> What does the DOM Level 1 Core let me do? </h3>
<p>The W3C DOM Level 1 allows you to change the content tree <i>any way you want</i>. It is powerful enough to build any HTML document from scratch. It allows authors to change anything in the document from script, at any time. The easiest way for web page authors to change the DOM dynamically is using JavaScript. In JavaScript, the document is accessible the same way it has been in older browsers: from the <code>document</code> property of the global object. This <code>document</code> object implements the  <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#i-Document">Document interface</a> from the W3C's DOM Level 1 spec. 
</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