Ejemplos

  • Enlace amigable (slug) de la revisión: Referencia_DOM_de_Gecko/Ejemplos
  • Título de la revisión: Ejemplos
  • Id de la revisión: 173206
  • Creada:
  • Creador: Markens
  • ¿Es la revisión actual? No
  • Comentario /* Ejemplo 3: Manipulación de estilos */

Contenido de la revisión

« Referencia DOM de Gecko

{{wiki.template('Traducción', [ "inglés", "Gecko_DOM_Reference:Examples", "en" ])}}

{{template.DomRef()}}

This chapter provides some longer examples of web and XML development using the DOM. Wherever possible, the examples use common APIs, tricks, and patterns in JavaScript for manipulating the document object.

Ejemplo 1: Altos y anchos

El ejemplo siguiente muestra el uso de las propiedades de alto (height) y ancho (width) junto a imágenes de dimensiones variadas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="es">

<head>
<title>Ejemplo de height/width</title>
<script type="text/javascript">
function iniciar()
{
  var arrImages = new Array(3);
  arrImages[0] = document.getElementById("imagen1");
  arrImages[1] = document.getElementById("imagen2");
  arrImages[2] = document.getElementById("imagen3");
  var objOutput = document.getElementById("salida");
  var strHtml = "<ul>";
  for (var i = 0; i < arrImages.length; i++)
    strHtml += "<li>imagen" + (i+1) + 
            ": height=" + arrImages[i].height + 
            ", width=" + arrImages[i].width + 
            ", style.height=" + arrImages[i].style.height + 
            ", style.width=" + arrImages[i].style.width + 
            "<\/li>";
  strHtml += "<\/ul>";
  salida.innerHTML = strHtml;
}
</script>
</head>
<body onload="iniciar();">

<p>La 1ª imagen:
- alto (height): no
- ancho (width): no
- estilo (style): no 
    <img id="imagen1" src="http://www.mozilla.org/images/mozilla-banner.gif">
</p>
<p>La 2ª imagen:
- height="50"
- width="500"
- style: no
    <img id="imagen2" src="http://www.mozilla.org/images/mozilla-banner.gif" 
         height="50" width="500">
</p>
<p>La 3ª imagen:
- height y width: no
- style="height: 50px; width: 500px;": sí
    <img id="imagen3" src="http://www.mozilla.org/images/mozilla-banner.gif" 
         style="height: 50px; width: 500px;">
</p>

<div id="salida"> </div>
</body>
</html>

height y width son además propiedades de los elementos OBJECT y APPLET.

Ejemplo 2: Atributos de una imagen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="es">

<head>
<title>Modificación del borde de una imagen</title>
<script type="text/javascript">
function setBorderWidth(width) {
  document.getElementById("img1").style.borderWidth = width + "px";
}
</script>
</head>

<body>
<p>
  <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100"
height="100" alt="test de borde">
</p>

<form name="Formulario">
  <p><input type="button" value="Definir un borde de 20px" 
onclick="setBorderWidth(20);"> <input type="button" value="Definir un borde de 5px" 
onclick="setBorderWidth(5);"></p>
</form>

</body>
</html>

Ejemplo 3: Manipulación de estilos

En este ejemplo sencillo, algunas propiedades de estilo básicas de un elemento párrafo HTML son accedidas utilizando el objeto estilo en el elemento y aquellas propiedades de estilo CSS del objeto, pueden ser entregadas y establecidas desde el DOM. En este caso, está manipulando los estilos directamente. En el siguiente ejemplo (ver ejemplo 4), puede utilizar las hojas de estilo y sus reglas para cambiar estilos para el documento entero.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>
<title>Changing color and font-size example</title>
<script type="text/javascript">
function changeText() {
	var p = document.getElementById("pid");
	p.style.color = "blue"
	p.style.fontSize = "18pt"
}
</script>
</head>
<body>
<p id="pid" 
onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
<form>
<p><input value="rec" type="button" onclick="changeText();"></p>
</form>
</body>
</html>

Ejemplo 4: Utilización de las hojas de estilo

La propiedad de las hojas de estilo en un objeto de documento muestra una lista de las hojas de estilo que acompañan a ése documento. Usando los objetos de la hoja de estilo, del estilo y de las reglas de CSS se puede acceder individualmente a esas hojas de estilo y sus reglas, como se demuestra en este ejemplo, el cual muestra todos los selectores de reglas de estilo en la consola.

ss = document.styleSheets;
for(i=0; i<ss.length; i++)
 {
 for(j=0; j<ss[0].cssRules.length; j++)
  {
  dump( ss[i].cssRules[j].selectorText + "\n" );
  }
 }

Para un documento con una sola hoja de estilo en la cual son definidas las tres reglas siguientes:

BODY { background-color: darkblue; }
P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
#lumpy { display: none; }

El script sale así:

BODY
P
#LUMPY

Ejemplo 5: Propagación del evento

Este ejemplo muestra de una forma muy simple como los eventos se inician y son gestionados en el DOM. Cuando el cuerpo (body) de ese documento HTML se carga, an event listener is registered with the top row of the TABLE. The event listener handles the event by executing the function stopEvent, which changes the value in the bottom cell of the table.

However, stopEvent also calls an event object method, event.stopPropagation, which keeps the event from bubbling any further up into the DOM. Note that the table itself has an onclick event handler that ought to display a message when the table is clicked. But the stopEvent method has stopped propagation, and so after the data in the table is updated, the event phase is effectively ended, and an alert box is displayed to confirm this.

<html>
<head>
<title>Propagación del evento</title>

<style type="text/css">
 #t-daddy { border: 1px solid red }
 #c1 { background-color: pink; }
</style>

<script type="text/javascript">

function stopEvent(ev) {
  c2 = document.getElementById("c2");
  c2.innerHTML = "hola";

  // this ought to keep t-daddy from getting the click.
  ev.stopPropagation();
  alert("La propagación del evento se ha parado.");
}

function load() {
  elem = document.getElementById("tbl1");
  elem.addEventListener("click", stopEvent, false);
}
</script>
</head>

<body onload="load();">

<table id="t-daddy" onclick="alert('hi');">
 <tr id="tbl1">
  <td id="c1">uno</td>
 </tr>
 <tr>
  <td id="c2">dos</td>
 </tr>
</table>

</body>
</html>

Ejemplo 6: Conseguir el estilo computado (getComputedStyle)

Este ejemplo demuestra como el método window.getComputedStyle puedes utilizarse para obtener los estilos de un elemento que no son especificados en el atributo style o con JavaScript (por ejemplo, element.style.backgroundColor="rgb(173, 216, 230)"). Estos últimos tipos de estilos se pueden recuperar con el atributo element.style, las propiedades del cual están en la lista de propiedades de CSS del DOM.

getComputedStyle() devuelve un objeto ComputedCSSStyleDeclaration, whose individual style properties can be referenced with this object's getPropertyValue() method, as the following example document shows.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>
 <title>Ejemplo de ''getComputedStyle''</title>

 <script type="text/javascript">
   function cStyles() 
  {
   var RefDiv = document.getElementById("d1");

   var txtHeight = document.getElementById("t1");
   var h_style = 
document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
   txtHeight.value = h_style;

   var txtWidth = document.getElementById("t2");
   var w_style = 
document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
   txtWidth.value = w_style;

   var txtBackgroundColor = document.getElementById("t3");
   var b_style = 
document.defaultView.getComputedStyle(RefDiv,
null).getPropertyValue("background-color");
   txtBackgroundColor.value = b_style;
  }
 </script>

 <style type="text/css">
   #d1 { margin-left: 10px; background-color: rgb(173, 216, 230); 
height: 20px; max-width: 20px; }
 </style>

</head>

<body>

<div id="d1">&nbsp;</div>

<form action="">
<p><button type="button" onclick="cStyles();">getComputedStyle</button>
  height<input id="t1" type="text" value="1">
  max-width<input id="t2" type="text" value="2">
  bg-color<input id="t3" type="text" value="3"></p>
</form>

</body>
</html>

Ejemplo 7: Mostrar las propiedades del objeto de evento

Este ejemplo utiliza métodos del DOM para mostrar todas las propiedades del evento de window.onload y sus valores en una tabla. Muestra además una cómoda técnica del uso de un bucle for...in para iterar sobre las propiedades de un objeto y conseguir sus valores.

Las propiedades de los objetos de evento difieren bastante entre los navegadores, la especificación W3C de los eventos del DOM 2 enumera las propiedades estándares, sin embargo algunos navegadores han extendido estas diferencias.

El siguiente código colocado dentro de un nuevo archivo de texto y cargado en un surtido de navegadores, sorprenderá por las diferencias de los números y nombres de propiedades y/o al ponerle más elementos a la página y llamar esa función desde diferentes gestores de evento.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<title>Muestra las propiedades del evento</title>

<style type="text/css">
  table {border-collapse: collapse;}
  thead {font-weight: bold;}
  td {padding: 2px 10px 2px 10px;}
  .odd {background-color: #efdfef;}
  .even {background-color: #ffffff;}
</style>

<script type="text/javascript">

function showEventProperties(e)
{
  function addCell(row, text) {
    var cell = row.insertCell(-1);
    cell.appendChild(document.createTextNode(text));
  }

  document.getElementById('eventType').innerHTML = e.type;

  var e = e || window.event;
  var table = document.createElement('table');
  var thead = table.createTHead();
  var row = thead.insertRow(-1);
  var lableList = ['#', 'Propriété', 'Valeur'];
  var len = lableList.length;

  for (var i=0; i<len; i++) { 
    addCell(row, lableList[i]);
  }

  var tbody = document.createElement('tbody');
  table.appendChild(tbody);

  for (var p in e) {
    row = tbody.insertRow(-1);
    row.className = (row.rowIndex % 2)? 'odd':'even';
    addCell(row, row.rowIndex);
    addCell(row, p);
    addCell(row, e[p]);
  }

  document.body.appendChild(table);
}
window.onload = function(event){
  showEventProperties(event);
}
</script>

<h1>Propiedades del objeto evento del DOM<span id="eventType"></span></h1>

Ejemplo 8: Utilización del interfaz de tabla del DOM

The DOM HTMLTableElement interface provides some convenience methods for creating and manipulating tables. Two frequently used methods are table.insertRow and row.insertCell.

To add a row and some cells to an existing table:

<table id="table0">
 <tr>
  <td>Row 0 Cell 0</td>
  <td>Row 0 Cell 1</td>
 </tr>
</table>

<script type="text/javascript">

var table = document.getElementById('table0');
var row = table.insertRow(-1);
var cell, text;
for (var i=0; i<2; i++) {
  cell = row.insertCell(-1);
  text = 'Row ' + row.rowIndex + ' Cell ' + i;
  cell.appendChild(document.createTextNode(text));
}

</script>

Notas

  • A table's innerHTML property should never be used to modify a table, although you can use it to write an entire table or the content of a cell.
  • If DOM Core methods document.createElement and element.appendChild are used to create rows and cells, IE requires that they are appended to a tbody element, whereas other browsers will allow appending to a table element (the rows will be added to the last tbody element).
  • There are a number of other convenience methods belonging to the interfaz de tabla that can be used for creating and modifying tables.
{{ wiki.languages( { "en": "en/Gecko_DOM_Reference/Examples", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Exemples", "ja": "ja/Gecko_DOM_Reference/Examples", "pl": "pl/Dokumentacja_Gecko_DOM/Przyk\u0142ady_u\u017cycia_DOM" } ) }}

Fuente de la revisión

<p>
« <a href="es/Referencia_DOM_de_Gecko">Referencia DOM de Gecko</a>
</p><p>{{wiki.template('Traducción', [ "inglés", "Gecko_DOM_Reference:Examples", "en" ])}}
</p><p>{{template.DomRef()}}
</p><p>This chapter provides some longer examples of web and XML development using the DOM. Wherever possible, the examples use common APIs, tricks, and patterns in JavaScript for manipulating the document object.
</p>
<h3 name="Ejemplo_1:_Altos_y_anchos"> Ejemplo 1: Altos y anchos </h3>
<p>El ejemplo siguiente muestra el uso de las propiedades de  alto (<code>height</code>) y  ancho (<code>width</code>) junto a imágenes de dimensiones variadas:
</p>
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html lang="es"&gt;

&lt;head&gt;
&lt;title&gt;Ejemplo de height/width&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function iniciar()
{
  var arrImages = new Array(3);
  arrImages[0] = document.getElementById("imagen1");
  arrImages[1] = document.getElementById("imagen2");
  arrImages[2] = document.getElementById("imagen3");
  var objOutput = document.getElementById("salida");
  var strHtml = "&lt;ul&gt;";
  for (var i = 0; i &lt; arrImages.length; i++)
    strHtml += "&lt;li&gt;imagen" + (i+1) + 
            ": height=" + arrImages[i].height + 
            ", width=" + arrImages[i].width + 
            ", style.height=" + arrImages[i].style.height + 
            ", style.width=" + arrImages[i].style.width + 
            "&lt;\/li&gt;";
  strHtml += "&lt;\/ul&gt;";
  salida.innerHTML = strHtml;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="iniciar();"&gt;

&lt;p&gt;La 1ª imagen:
- alto (height): no
- ancho (width): no
- estilo (style): no 
    &lt;img id="imagen1" src="http://www.mozilla.org/images/mozilla-banner.gif"&gt;
&lt;/p&gt;
&lt;p&gt;La 2ª imagen:
- height="50"
- width="500"
- style: no
    &lt;img id="imagen2" src="http://www.mozilla.org/images/mozilla-banner.gif" 
         height="50" width="500"&gt;
&lt;/p&gt;
&lt;p&gt;La 3ª imagen:
- height y width: no
- style="height: 50px; width: 500px;": sí
    &lt;img id="imagen3" src="http://www.mozilla.org/images/mozilla-banner.gif" 
         style="height: 50px; width: 500px;"&gt;
&lt;/p&gt;

&lt;div id="salida"&gt; &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p><code>height</code> y <code>width</code> son además propiedades de los elementos <code>OBJECT</code> y <code>APPLET</code>.
</p>
<h3 name="Ejemplo_2:_Atributos_de_una_imagen"> Ejemplo 2: Atributos de una imagen </h3>
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html lang="es"&gt;

&lt;head&gt;
&lt;title&gt;Modificación del borde de una imagen&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function setBorderWidth(width) {
  document.getElementById("img1").style.borderWidth = width + "px";
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;p&gt;
  &lt;img id="img1" src="image1.gif" style="border: 5px solid green;" width="100"
height="100" alt="test de borde"&gt;
&lt;/p&gt;

&lt;form name="Formulario"&gt;
  &lt;p&gt;&lt;input type="button" value="Definir un borde de 20px" 
onclick="setBorderWidth(20);"&gt; &lt;input type="button" value="Definir un borde de 5px" 
onclick="setBorderWidth(5);"&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="Ejemplo_3:_Manipulaci.C3.B3n_de_estilos"> Ejemplo 3: Manipulación de estilos </h3>
<p>En este ejemplo sencillo, algunas propiedades de estilo básicas de un elemento párrafo HTML son accedidas utilizando el objeto estilo en el elemento y aquellas propiedades de estilo CSS del objeto, pueden ser entregadas y establecidas desde el DOM. En este caso, está manipulando  los estilos directamente. En el siguiente ejemplo (ver ejemplo 4), puede utilizar las hojas de estilo y sus reglas para cambiar estilos para el documento entero.
</p>
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html lang="en"&gt;

&lt;head&gt;
&lt;title&gt;Changing color and font-size example&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function changeText() {
	var p = document.getElementById("pid");
	p.style.color = "blue"
	p.style.fontSize = "18pt"
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p id="pid" 
onclick="window.location.href = 'http://www.cnn.com/';"&gt;linker&lt;/p&gt;
&lt;form&gt;
&lt;p&gt;&lt;input value="rec" type="button" onclick="changeText();"&gt;&lt;/p&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="Ejemplo_4:_Utilizaci.C3.B3n_de_las_hojas_de_estilo"> Ejemplo 4: Utilización de las hojas de estilo </h3>
<p>La propiedad de las hojas de estilo en un objeto de documento muestra una lista de las hojas de estilo que acompañan a ése documento. Usando los objetos de la hoja de estilo, del estilo y de las reglas de CSS se puede acceder individualmente a esas hojas de estilo y sus reglas, como se demuestra en este ejemplo, el cual muestra todos los selectores de reglas de estilo en la consola.
</p>
<pre>ss = document.styleSheets;
for(i=0; i&lt;ss.length; i++)
 {
 for(j=0; j&lt;ss[0].cssRules.length; j++)
  {
  dump( ss[i].cssRules[j].selectorText + "\n" );
  }
 }
</pre>
<p>Para un documento con una sola hoja de estilo en la cual son definidas las tres reglas siguientes:
</p>
<pre class="eval">BODY { background-color: darkblue; }
P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
#lumpy { display: none; }
</pre>
<p>El script sale así:
</p>
<pre class="eval">BODY
P
#LUMPY
</pre>
<h3 name="Ejemplo_5:_Propagaci.C3.B3n_del_evento"> Ejemplo 5: Propagación del evento </h3>
<p>Este ejemplo muestra de una forma muy simple como los eventos se inician y son gestionados en el DOM. Cuando el cuerpo (<i>body</i>) de ese documento HTML se carga, <i>an event listener is registered with the top row of the TABLE. The event listener handles the event by executing the function stopEvent, which changes the value in the bottom cell of the table.</i>
</p><p>However, stopEvent also calls an event object method, <a href="es/DOM/event.stopPropagation">event.stopPropagation</a>, which keeps the event from bubbling any further up into the DOM. Note that the table itself has an <a href="es/DOM/element.onclick">onclick</a> event handler that ought to display a message when the table is clicked. But the stopEvent method has stopped propagation, and so after the data in the table is updated, the event phase is effectively ended, and an alert box is displayed to confirm this.
</p>
<pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Propagación del evento&lt;/title&gt;

&lt;style type="text/css"&gt;
 #t-daddy { border: 1px solid red }
 #c1 { background-color: pink; }
&lt;/style&gt;

&lt;script type="text/javascript"&gt;

function stopEvent(ev) {
  c2 = document.getElementById("c2");
  c2.innerHTML = "hola";

  // this ought to keep t-daddy from getting the click.
  ev.stopPropagation();
  alert("La propagación del evento se ha parado.");
}

function load() {
  elem = document.getElementById("tbl1");
  elem.addEventListener("click", stopEvent, false);
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body onload="load();"&gt;

&lt;table id="t-daddy" onclick="alert('hi');"&gt;
 &lt;tr id="tbl1"&gt;
  &lt;td id="c1"&gt;uno&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
  &lt;td id="c2"&gt;dos&lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="Ejemplo_6:_Conseguir_el_estilo_computado_.28getComputedStyle.29"> Ejemplo 6: Conseguir el estilo computado (getComputedStyle)</h3>
<p>Este ejemplo demuestra como el método <a href="es/DOM/window.getComputedStyle">window.getComputedStyle</a> puedes utilizarse para obtener los estilos de un elemento que no son especificados en el atributo <code>style</code> o con JavaScript (por ejemplo, <b><span class="highlightgreen"><code>element.style.backgroundColor="rgb(173, 216, 230)"</code></span></b>). Estos últimos tipos de estilos se pueden recuperar con el atributo <a href="es/DOM/element.style">element.style</a>, las propiedades del cual están en la <a href="es/DOM/CSS">lista de propiedades de CSS</a> del DOM.
</p><p><code>getComputedStyle()</code> devuelve un objeto  <code>ComputedCSSStyleDeclaration</code>, whose individual style properties can be referenced with this object's <code>getPropertyValue()</code> method, as the following example document shows.
</p>
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html lang="en"&gt;

&lt;head&gt;
 &lt;title&gt;Ejemplo de ''getComputedStyle''&lt;/title&gt;

 &lt;script type="text/javascript"&gt;
   function cStyles() 
  {
   var RefDiv = document.getElementById("d1");

   var txtHeight = document.getElementById("t1");
   var h_style = 
document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
   txtHeight.value = h_style;

   var txtWidth = document.getElementById("t2");
   var w_style = 
document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
   txtWidth.value = w_style;

   var txtBackgroundColor = document.getElementById("t3");
   var b_style = 
document.defaultView.getComputedStyle(RefDiv,
null).getPropertyValue("background-color");
   txtBackgroundColor.value = b_style;
  }
 &lt;/script&gt;

 &lt;style type="text/css"&gt;
   #d1 { margin-left: 10px; background-color: rgb(173, 216, 230); 
height: 20px; max-width: 20px; }
 &lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id="d1"&gt;&amp;nbsp;&lt;/div&gt;

&lt;form action=""&gt;
&lt;p&gt;&lt;button type="button" onclick="cStyles();"&gt;getComputedStyle&lt;/button&gt;
  height&lt;input id="t1" type="text" value="1"&gt;
  max-width&lt;input id="t2" type="text" value="2"&gt;
  bg-color&lt;input id="t3" type="text" value="3"&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="Ejemplo_7:_Mostrar_las_propiedades_del_objeto_de_evento"> Ejemplo 7: Mostrar las propiedades del objeto de evento </h3>
<p>Este ejemplo utiliza métodos del DOM para mostrar todas las propiedades del <a href="es/DOM/event">evento</a> de <a href="es/DOM/window.onload">window.onload</a> y sus valores en una tabla. Muestra además una cómoda técnica del uso de un bucle <i><b>for...in</b></i> para iterar sobre las propiedades de un objeto y conseguir sus valores.
</p><p>Las propiedades de los objetos de evento difieren bastante entre los navegadores, la <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">especificación W3C de los eventos del DOM 2</a> enumera las propiedades estándares, sin embargo algunos navegadores han extendido estas diferencias.
</p><p>El siguiente código colocado dentro de un nuevo archivo de texto y cargado en un surtido de navegadores, sorprenderá por las diferencias de los números y nombres de propiedades y/o al ponerle más elementos a la página y llamar esa función desde diferentes gestores de evento.
</p>
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;title&gt;Muestra las propiedades del evento&lt;/title&gt;

&lt;style type="text/css"&gt;
  table {border-collapse: collapse;}
  thead {font-weight: bold;}
  td {padding: 2px 10px 2px 10px;}
  .odd {background-color: #efdfef;}
  .even {background-color: #ffffff;}
&lt;/style&gt;

&lt;script type="text/javascript"&gt;

function showEventProperties(e)
{
  function addCell(row, text) {
    var cell = row.insertCell(-1);
    cell.appendChild(document.createTextNode(text));
  }

  document.getElementById('eventType').innerHTML = e.type;

  var e = e || window.event;
  var table = document.createElement('table');
  var thead = table.createTHead();
  var row = thead.insertRow(-1);
  var lableList = ['#', 'Propriété', 'Valeur'];
  var len = lableList.length;

  for (var i=0; i&lt;len; i++) { 
    addCell(row, lableList[i]);
  }

  var tbody = document.createElement('tbody');
  table.appendChild(tbody);

  for (var p in e) {
    row = tbody.insertRow(-1);
    row.className = (row.rowIndex % 2)? 'odd':'even';
    addCell(row, row.rowIndex);
    addCell(row, p);
    addCell(row, e[p]);
  }

  document.body.appendChild(table);
}
window.onload = function(event){
  showEventProperties(event);
}
&lt;/script&gt;

&lt;h1&gt;Propiedades del objeto evento del DOM&lt;span id="eventType"&gt;&lt;/span&gt;&lt;/h1&gt;
</pre>
<h3 name="Ejemplo_8:_Utilizaci.C3.B3n_del_interfaz_de_tabla_del_DOM"> Ejemplo 8: Utilización del interfaz de tabla del DOM </h3>
<p>The DOM HTMLTableElement interface provides some convenience methods for creating and manipulating tables.  Two frequently used methods are <code><a href="es/DOM/table.insertRow">table.insertRow</a></code> and <code><a href="es/DOM/table/row.insertCell">row.insertCell</a></code>.
</p><p>To add a row and some cells to an existing table:
</p>
<pre>&lt;table id="table0"&gt;
 &lt;tr&gt;
  &lt;td&gt;Row 0 Cell 0&lt;/td&gt;
  &lt;td&gt;Row 0 Cell 1&lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;

&lt;script type="text/javascript"&gt;

var table = document.getElementById('table0');
var row = table.insertRow(-1);
var cell, text;
for (var i=0; i&lt;2; i++) {
  cell = row.insertCell(-1);
  text = 'Row ' + row.rowIndex + ' Cell ' + i;
  cell.appendChild(document.createTextNode(text));
}

&lt;/script&gt;
</pre>  
<h4 name="Notas"> Notas </h4>
<ul><li> A table's <code><a href="es/DOM/element.innerHTML">innerHTML</a></code> property should never be used to modify a table, although you can use it to write an entire table or the content of a cell.
</li><li> If DOM Core methods <code><a href="es/DOM/document.createElement">document.createElement</a></code> and <code><a href="es/DOM/element.appendChild">element.appendChild</a></code> are used to create rows and cells, IE requires that they are appended to a tbody element, whereas other browsers will allow appending to a table element (the rows will be added to the last tbody element).
</li><li> There are a number of other convenience methods belonging to the <a href="es/DOM/table#M.C3.A9todos">interfaz de tabla</a> that can be used for creating and modifying tables.
</li></ul>
{{ wiki.languages( { "en": "en/Gecko_DOM_Reference/Examples", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Exemples", "ja": "ja/Gecko_DOM_Reference/Examples", "pl": "pl/Dokumentacja_Gecko_DOM/Przyk\u0142ady_u\u017cycia_DOM" } ) }}
Revertir a esta revisión