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: 173202
  • Creada:
  • Creador: Nathymig
  • ¿Es la revisión actual? No
  • Comentario /* Ejemplo 4: Utilización de las hojas de estilo */

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

In this simple example, some basic style properties of an HTML paragraph element are accessed using the style object on the element and that object's CSS style properties, which can be retrieved and set from the DOM. In this case, you are manipulating the individual styles directly. In the next example (ver ejemplo 4), you can use stylesheets and their rules to change styles for whole documents.

<!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

This example demonstrates how events fire and are handled in the DOM in a very simple way. When the BODY of this HTML document loads, 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 = "hello";

  // this ought to keep t-daddy from getting the click.
  ev.stopPropagation();
  alert("event propagation halted.");
}

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">one</td>
 </tr>
 <tr>
  <td id="c2">two</td>
 </tr>
</table>

</body>
</html>

Ejemplo 6: Conseguir el estilo computado (getComputedStyle)

This example demonstrates how the window.getComputedStyle method can be used to get the styles of an element that are not set using the style attribute or with JavaScript (por ejemplo, elt.style.backgroundColor="rgb(173, 216, 230)"). These latter types of styles can be retrieved with the more direct elt.style property, whose properties are listed in the DOM CSS Properties List.

getComputedStyle() returns a ComputedCSSStyleDeclaration object, 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

This example uses DOM methods to display all the properties of the window.onload event object and their values in a table. It also shows a useful technique of using a for..in loop to iterate over the properties of an object to get their values.

The properties of event objects differs greatly between browsers, the W3C DOM 2 Events Specification lists the standard properties, however many browsers have extended these greatly.

Put the following code into a blank text file and load it into a variety of browsers, you'll be surprised at the different number and names of properties. You might also like to add some elements in the page and call this function from different event handlers.

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

<title>Show Event properties</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));
  }

  var e = e || window.event;
  document.getElementById('eventType').innerHTML = e.type;

  var table = document.createElement('table');
  var thead = table.createTHead();
  var row = thead.insertRow(-1);
  var lableList = ['#', 'Property', 'Value'];
  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>Properties of the DOM <span id="eventType"></span> Event Object</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>In this simple example, some basic style properties of an HTML paragraph element are accessed using the style object on the element and that object's CSS style properties, which can be retrieved and set from the DOM. In this case, you are manipulating the individual styles directly. In the next example (ver ejemplo 4), you can use stylesheets and their rules to change styles for whole documents.
</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>This example demonstrates how events fire and are handled in the DOM in a very simple way. When the BODY of this HTML document loads, 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.
</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 = "hello";

  // this ought to keep t-daddy from getting the click.
  ev.stopPropagation();
  alert("event propagation halted.");
}

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;one&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
  &lt;td id="c2"&gt;two&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>This example demonstrates how the <a href="es/DOM/window.getComputedStyle">window.getComputedStyle</a> method can be used to get the styles of an element that are not set using the <code>style</code> attribute or with JavaScript (por ejemplo, <code>elt.style.backgroundColor="rgb(173, 216, 230)"</code>). These latter types of styles can be retrieved with the more direct <a href="es/DOM/element.style">elt.style</a> property, whose properties are listed in the <a href="es/DOM/CSS">DOM CSS Properties List</a>.
</p><p><code>getComputedStyle()</code> returns a <code>ComputedCSSStyleDeclaration</code> object, 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>This example uses DOM methods to display all the properties of the <a href="es/DOM/window.onload">window.onload</a> <a href="es/DOM/event">event</a> object and their values in a table. It also shows a useful technique of using a for..in loop to iterate over the properties of an object to get their values.
</p><p>The properties of event objects differs greatly between browsers, the <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">W3C DOM 2 Events Specification</a> lists the standard properties, however many browsers have extended these greatly.
</p><p>Put the following code into a blank text file and load it into a variety of browsers, you'll be surprised at the different number and names of properties.  You might also like to add some elements in the page and call this function from different event handlers.
</p>
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;title&gt;Show Event properties&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));
  }

  var e = e || window.event;
  document.getElementById('eventType').innerHTML = e.type;

  var table = document.createElement('table');
  var thead = table.createTHead();
  var row = thead.insertRow(-1);
  var lableList = ['#', 'Property', 'Value'];
  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;Properties of the DOM &lt;span id="eventType"&gt;&lt;/span&gt; Event Object&lt;/h1&gt;
</pre>
<p><br>
</p>
<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