From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- .../api/document_object_model/events/index.html | 72 ++++ .../api/document_object_model/examples/index.html | 367 ++++++++++++++++ .../how_to_create_a_dom_tree/index.html | 130 ++++++ files/es/web/api/document_object_model/index.html | 91 ++++ .../document_object_model/introduction/index.html | 248 +++++++++++ .../index.html | 50 +++ .../index.html | 337 +++++++++++++++ .../using_the_w3c_dom_level_1_core/index.html | 93 ++++ .../document_object_model/whitespace/index.html | 476 +++++++++++++++++++++ 9 files changed, 1864 insertions(+) create mode 100644 files/es/web/api/document_object_model/events/index.html create mode 100644 files/es/web/api/document_object_model/examples/index.html create mode 100644 files/es/web/api/document_object_model/how_to_create_a_dom_tree/index.html create mode 100644 files/es/web/api/document_object_model/index.html create mode 100644 files/es/web/api/document_object_model/introduction/index.html create mode 100644 files/es/web/api/document_object_model/locating_dom_elements_using_selectors/index.html create mode 100644 files/es/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html create mode 100644 files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html create mode 100644 files/es/web/api/document_object_model/whitespace/index.html (limited to 'files/es/web/api/document_object_model') diff --git a/files/es/web/api/document_object_model/events/index.html b/files/es/web/api/document_object_model/events/index.html new file mode 100644 index 0000000000..fce2530535 --- /dev/null +++ b/files/es/web/api/document_object_model/events/index.html @@ -0,0 +1,72 @@ +--- +title: Eventos y el DOM +slug: Referencia_DOM_de_Gecko/Eventos +tags: + - DOM + - Guía +translation_of: Web/API/Document_Object_Model/Events +--- +

Introducción

+ +

Este capítulo describe el Modelo de Eventos del DOM. Se describe la interfaz Event, así como las interfaces para el registro de eventos en los nodos del DOM, y los oyentes de eventos, y varios ejemplos más largos muestran cómo se relacionan entre sí las diversas interfaces de eventos.

+ +

Hay un diagrama excelente que explica claramente las tres fases del flujo de eventos a través del DOM en el borrador DOM Level 3 Events.

+ +

Vea también el Ejemplo 5: Propagación de eventos en el capítulo de Ejemplos para un ejemplo más detallado de cómo los eventos se mueven a través del DOM.

+ +

Registrando oyentes de eventos

+ +

Hay 3 formas de registrar gestores de eventos para un elemento DOM.

+ +

EventTarget.addEventListener

+ +
// Se supone que myButton es un elemento de botón
+myButton.addEventListener('click', function(){alert('Hello world');}, false);
+
+ +

Este es el método que debe usar en las páginas web modernas. 

+ +

Nota: Internet Explorer 6-8 no admite este método, ofreciendo una API similar {{domxref("EventTarget.attachEvent")}} en su lugar. Para la compatibilidad entre navegadores utilice una de las muchas bibliotecas de JavaScript disponibles.

+ +

Se pueden encontrar más detalles en la página de referencia {{domxref("EventTarget.addEventListener")}}.

+ +

Atributo HTML

+ +
<button onclick="alert('Hello world!')">
+
+ +

El código de JavaScript en el atributo pasa el objeto Event por medio del parámetro event. El valor de retorno se trata de una manera especial, descrita en la especificación HTML.

+ +

Debe evitarse esta forma. Hace que el marcado sea más grande y menos legible. El comitido del contenido/estructura y del comportamiento no están bien separadas, por lo que es más difícil encontrar un error.

+ +

Propiedades del elemento DOM

+ +
// Se supone que myButton es un elemento de botón
+myButton.onclick = function(event){alert('Hello world');};
+
+ +

La función se puede defirnir para que tome un parámetro event. El valor de retorno se trata de una manera especial, descrita en la especificación HTML.

+ +

El problema con este método es que solo se puede establecer un gestor por elemento y por evento.

+ +

Accediendo a las Interfaces de eventos

+ +

Los controladores de eventos se pueden adjuntar a varios objetos, incluidos los elementos DOM, documentos, al objeto window, etc. Cuando se produce un evento, se crea un objeto de evento y se pasa secuencialmente a los oyentes del evento.

+ +

Se puede acceder a la interfaz {{domxref ("Evento")}} desde la función del gestor, a través del objeto de evento pasado como primer argumento. El siguiente ejemplo simple muestra cómo se pasa un objeto de evento a la función del controlador de eventos, y se puede usar desde dentro de una de esas funciones.

+ +
function foo(evt) {
+  // al parámetro evt se le asigna automáticamente el objeto event
+  alert(evt);
+}
+table_el.onclick = foo;
+
+ + + + diff --git a/files/es/web/api/document_object_model/examples/index.html b/files/es/web/api/document_object_model/examples/index.html new file mode 100644 index 0000000000..33f0e9e2b7 --- /dev/null +++ b/files/es/web/api/document_object_model/examples/index.html @@ -0,0 +1,367 @@ +--- +title: Ejemplos +slug: Referencia_DOM_de_Gecko/Ejemplos +tags: + - DOM + - Referencia_DOM_de_Gecko + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Web/API/Document_Object_Model/Examples +--- +

En este capítulo se brindan ejemplos relativamente extensos que ilustran el uso del DOM para el desarrollo web y XML. Siempre que sea posible, usaremos las APIs, trucos y patrones comunes en JavaScript para la manipulación del objeto document.

+ +

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,un evento listener es registrado con la columna superior de la TABLA. El evento listener maneja el evento ejecutando la función stopEvent, que cambia el valor en el final de la celda de la tabla.

+ +

Sin embargo, stopEvent también llama a un método del objeto evento, event.stopPropagation, que mantiene el evento del burbujeo a continuación dentro del DOM. Note que la tabla misma tiene un manejador de evento onclick que muestra un mensaje cuando la tabla es seleccionada. Pero el método stopEvent ha detenido la propagación, y así despues los datos en la tabla son actualizados, la fase de evento es efectivamente finalizada, y un cuadro de alerta es mostrado para confirmar esto.

+ +
<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, cuyas propiedades de estilo individuales pueden ser referenciadas con este método del objeto getPropertyValue(), el siguiente documento de ejemplo lo muestra.

+ +
<!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 buclefor...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

+ +

La interfaz HTMLTableElement del DOM provee algunos métodos de conveniencia para crear y manipular tablas. Dos métodos usados frecuentemente son table.insertRow y row.insertCell.

+ +

Para agregar una columna y algunas celdas a una tabla existente:

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

+ + diff --git a/files/es/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/es/web/api/document_object_model/how_to_create_a_dom_tree/index.html new file mode 100644 index 0000000000..25546a1704 --- /dev/null +++ b/files/es/web/api/document_object_model/how_to_create_a_dom_tree/index.html @@ -0,0 +1,130 @@ +--- +title: Cómo crear un DOM tree +slug: How_to_create_a_DOM_tree +translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree +--- +

 

+

Esta página describe cómo usar el API DOM Core en JavaScript para crear o modificar objetos DOM. Es aplicable a todas las aplicaciones basadas en Gecko (como Mozilla Firefox) cuyo código tenga privilegios (como las extensiones) y a las que no (páginas web).

+

Creación dinámica de un DOM tree

+

Considere el siguiente documento XML:

+
<?xml version="1.0"?>
+<people>
+  <person first-name="eric" middle-initial="H" last-name="jung">
+    <address street="321 south st" city="denver" state="co" country="usa"/>
+    <address street="123 main st" city="arlington" state="ma" country="usa"/>
+  </person>
+
+  <person first-name="jed" last-name="brown">
+    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
+    <address street="123 west st" city="seattle" state="wa" country="usa"/>
+    <address street="321 south avenue" city="denver" state="co" country="usa"/>
+  </person>
+</people>
+
+

El W3C DOM API soportado por Mozilla, puede ser usado para crear una representación en memoria del documento anterior, como se ve a continuación:

+
var doc = document.implementation.createDocument("", "", null);
+var peopleElem = doc.createElement("people");
+
+var personElem1 = doc.createElement("person");
+personElem1.setAttribute("first-name", "eric");
+personElem1.setAttribute("middle-initial", "h");
+personElem1.setAttribute("last-name", "jung");
+
+var addressElem1 = doc.createElement("address");
+addressElem1.setAttribute("street", "321 south st");
+addressElem1.setAttribute("city", "denver");
+addressElem1.setAttribute("state", "co");
+addressElem1.setAttribute("country", "usa");
+personElem1.appendChild(addressElem1);
+
+var addressElem2 = doc.createElement("address");
+addressElem2.setAttribute("street", "123 main st");
+addressElem2.setAttribute("city", "arlington");
+addressElem2.setAttribute("state", "ma");
+addressElem2.setAttribute("country", "usa");
+personElem1.appendChild(addressElem2);
+
+var personElem2 = doc.createElement("person");
+personElem2.setAttribute("first-name", "jed");
+personElem2.setAttribute("last-name", "brown");
+
+var addressElem3 = doc.createElement("address");
+addressElem3.setAttribute("street", "321 north st");
+addressElem3.setAttribute("city", "atlanta");
+addressElem3.setAttribute("state", "ga");
+addressElem3.setAttribute("country", "usa");
+personElem2.appendChild(addressElem3);
+
+var addressElem4 = doc.createElement("address");
+addressElem4.setAttribute("street", "123 west st");
+addressElem4.setAttribute("city", "seattle");
+addressElem4.setAttribute("state", "wa");
+addressElem4.setAttribute("country", "usa");
+personElem2.appendChild(addressElem4);
+
+var addressElem5 = doc.createElement("address");
+addressElem5.setAttribute("street", "321 south avenue");
+addressElem5.setAttribute("city", "denver");
+addressElem5.setAttribute("state", "co");
+addressElem5.setAttribute("country", "usa");
+personElem2.appendChild(addressElem5);
+
+peopleElem.appendChild(personElem1);
+peopleElem.appendChild(personElem2);
+doc.appendChild(peopleElem);
+
+

Vea también el Capítulo DOM del Tutorial de XUL.

+

Se puede automatizar la creación de un DOM tree usando el JXON reverse algorithm (algoritmo inverso JXON) en asociación con la siguiente representación JSON:

+
{
+  "people": {
+    "person": [{
+      "address": [{
+        "@street": "321 south st",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }, {
+        "@street": "123 main st",
+        "@city": "arlington",
+        "@state": "ma",
+        "@country": "usa"
+      }],
+      "@first-name": "eric",
+      "@middle-initial": "H",
+      "@last-name": "jung"
+    }, {
+      "address": [{
+        "@street": "321 north st",
+        "@city": "atlanta",
+        "@state": "ga",
+        "@country": "usa"
+      }, {
+        "@street": "123 west st",
+        "@city": "seattle",
+        "@state": "wa",
+        "@country": "usa"
+      }, {
+        "@street": "321 south avenue",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }],
+      "@first-name": "jed",
+      "@last-name": "brown"
+    }]
+  }
+}
+
+

¿Ahora qué?

+

Los DOM trees pueden ser invocados usando expresiones XPath, convertidos a cadenas de texto, salvados a un archivo local o remoto usando XMLSerializer (sin tener que convertirlo primero a una cadena de texto), Enviados mediante POST a un servidor web (via XMLHttpRequest), transformados usando XSLT, XLink, convertidos a un objeto JavaScript a tráves del  algoritmo JXON, etc.

+

Adicionalmente se puede hacer uso de los DOM trees para modelar los datos que no estén bien formados para RDF (o si sólo no prefieres usar RDF). Otra aplicación que puedes darle, se relaciona a XUL (que es XML), la UI (interfaz) de tu aplicación puede ser manipulada dinámicamente, descargada, subida, guardada, cargada, convertida, o transformada fácilmente.

+

Vea también

+ +

{{ languages( { "fr": "fr/Comment_cr\u00e9er_un_arbre_DOM", "ja": "ja/How_to_create_a_DOM_tree", "zh-cn": "zh-cn/How_to_create_a_DOM_tree" } ) }}

diff --git a/files/es/web/api/document_object_model/index.html b/files/es/web/api/document_object_model/index.html new file mode 100644 index 0000000000..0f3a2a7f75 --- /dev/null +++ b/files/es/web/api/document_object_model/index.html @@ -0,0 +1,91 @@ +--- +title: Referencia DOM de Gecko +slug: Referencia_DOM_de_Gecko +tags: + - DOM + - NecesitaRevisiónTécnica + - Todas_las_Categorías +translation_of: Web/API/Document_Object_Model +--- +

+« Referencia DOM de Gecko +


+Aquí está la tabla de contenido para la referencia DOM de Gecko. +

+

Prefacio

+ +

Introducción

+ +

La referencia al elemento (element) de DOM

+ +

La referencia a la ventana (window) de DOM

+ +

La referencia al document de DOM

+ +

La referencia al event de DOM

+ +

La referencia al estilo (style) de DOM

+ +

La referencia al rango (range) de DOM

+ +

La referencia a la selección (selection) de DOM

+ +

Interfaz del elemento formulario (form) en HTML

+ +

Interfaz del elemento tabla (table) en HTML

+ +

Ejemplos DOM

+ +
+

Información sobre el documento original

+ +
+{{ languages( { "en": "en/Gecko_DOM_Reference", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko", "it": "it/Reference_del_DOM_di_Gecko", "ja": "ja/Gecko_DOM_Reference", "ko": "ko/Gecko_DOM_Reference", "pl": "pl/Dokumentacja_Gecko_DOM", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003" } ) }} diff --git a/files/es/web/api/document_object_model/introduction/index.html b/files/es/web/api/document_object_model/introduction/index.html new file mode 100644 index 0000000000..5c604a7a6c --- /dev/null +++ b/files/es/web/api/document_object_model/introduction/index.html @@ -0,0 +1,248 @@ +--- +title: Introducción +slug: Referencia_DOM_de_Gecko/Introducción +tags: + - DOM + - Gecko + - Manuales + - Todas_las_Categorías +translation_of: Web/API/Document_Object_Model/Introduction +--- +

 

+ +

Ésta sección da una breve introducción conceptual del DOM: qué es, cómo proporciona la estructura para los documentos HTML y XML, cómo se accede a él, y cómo esta "API" presenta la información de referencia y ejemplos.

+ +

¿Qué es el DOM?

+ +

El modelo de objeto de documento (DOM) es una interfaz de programación para los documentos HTML y XML. Facilita una representación estructurada del documento y define de qué manera los programas pueden acceder, al fin de modificar, tanto su estructura, estilo y contenido. El DOM da una representación del documento como un grupo de nodos y objetos estructurados que tienen propiedades y métodos. Esencialmente, conecta las páginas web a scripts o lenguajes de programación.

+ +

Una página web es un documento. Éste documento puede exhibirse en la ventana de un navegador o también como código fuente HTML. Pero, en los dos casos, es el mismo documento. El modelo de objeto de documento (DOM) proporciona otras formas de presentar, guardar y manipular este mismo documento. El DOM es una representación completamente orientada al objeto de la página web y puede ser modificado con un lenguaje de script como JavaScript.

+ +

El W3C DOM estándar forma la base del funcionamiento del DOM en muchos navegadores modernos. Varios navegadores ofrecen extensiones más allá del estándar W3C, hay que ir con extremo cuidado al utilizarlas en la web, ya que los documentos pueden ser consultados por navegadores que tienen DOMs diferentes.

+ +

Por ejemplo, el DOM de W3C especifica que el método getElementsByTagName en el código de abajo debe devolver una lista de todos los elementos <p> del documento:

+ +
paragraphs = document.getElementsByTagName ("p");
+// paragraphs[0] es el primer elemento <p>
+// paragraphs[1] es el segundo elemento <p>, etc.
+alert (paragraphs [0].nodeName);
+
+ +

Todas las propiedades, métodos y eventos disponibles para la manipulación y la creación de páginas web está organizado dentro de objetos. Un ejemplo: el objeto document representa al documento mismo, el objeto table hace funcionar la interfaz especial HTMLTableElement del DOM para acceder a tablas HTML, y así sucesivamente. Ésta documentación procura una relación objeto-por-objeto del DOM que funciona con los navegadores basados en Gecko.

+ +

DOM y JavaScript

+ +

El ejemplo corto de abajo, como casi todos los ejemplos de esta referencia, es JavaScript. Es decir, es escrito en JavaScript pero utiliza el DOM para acceder al documento y a sus elementos. El DOM no es un lenguaje de programación pero sin él, el lenguaje JavaScript no tiene ningún modelo o noción de las páginas web, de la páginas XML ni de los elementos con los cuales es usualmente relacionado. Cada elemento -"el documento íntegro, el título, las tablas dentro del documento, los títulos de las tablas, el texto dentro de las celdas de las tablas"- es parte del modelo de objeto del documento para cada documento, así se puede acceder y manipularlos utilizando el DOM y un lenguaje de escritura, como JavaScript.

+ +

En el comienzo, JavaScript y el DOM estaban herméticamente enlazados, pero después se desarrollaron como entidades separadas. El contenido de la página es almacenado en DOM y el acceso y la manipulación se hace vía JavaScript, podría representarse aproximadamente así:

+ +

API(web o página XML) = DOM + JS(lenguaje de script)

+ +

El DOM fue diseñado para ser independiente de cualquier lenguaje de programación particular, hace que la presentación estructural del documento sea disponible desde un simple y consistente API. Aunque en este manual nos centramos exclusivamente en JavaScript, la directrices del DOM pueden construirse para cualquier lenguaje, así lo demuestra el siguiente ejemplo de Python:

+ +
# Ejemplo DOM de Python
+import xml.dom.minidom as m
+doc = m.parse("C:\\Projects\\Py\\chap1.xml");
+doc.nodeName # Propiedad DOM del objeto document;
+p_list = doc.getElementsByTagName("para");
+ +

¿Cómo se accede al DOM?

+ +

No se tiene que hacer nada especial para empezar a utilizar el DOM. Los diferentes navegadores tienen directrices DOM distintas, y éstas directrices tienen diversos grados de conformidad al actual estándar DOM (un tema que se intenta evitar en este manual), pero todos los navegadores web usan el modelo de objeto de documento para hacer accesibles las páginas web al script.

+ +

Cuando se crea un script –esté en un elemento <SCRIPT> o incluido en una página web por la instrucción de cargar un script– inmediatamente está disponible para usarlo con el API, accediendo así a los elementos document o window, para manipular el documento mismo o sus diferentes partes, las cuales son los varios elementos de una página web. La programación DOM hace algo tan simple como lo siguiente, lo cual abre un mensaje de alerta usando la función alert() desde el objeto window, o permite métodos DOM más sofisticados para crear realmente un nuevo contenido, como en el largo ejemplo de más abajo.

+ +
<body onload="window.alert('Bienvenido a mi página!');">
+
+ +

Aparte del elemento <script> en el cual JavaScript es definido, el ejemplo siguiente muestra la función a ejecutar cuando el documento se está cargando (y que el DOM completo es disponible para su uso). Esta función crea un nuevo elemento H1, le pone texto y después lo agrega al árbol del documento:

+ +
<html>
+  <head>
+    <script>
+       // ejecuta esta función cuando se cargue el documento
+       window.onload = function() {
+
+         // crea dinámicamente un par de elementos HTML en una página vacia
+         var heading = document.createElement("h1");
+         var heading_text = document.createTextNode("el texto que desee");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

Tipos de datos importantes

+ +

Esta parte intenta describir, de la manera más simple posible, los diferentes objetos y tipos. Pero hay que conocer una cantidad de tipos de datos diferentes que son utilizados por el API. Para simplificarlo, los ejemplos de sintaxis en esta API se refieren a nodos como elements, a una lista de nodos como nodeLists (o simples elementos) y a nodos de atributo como attributes.

+ +

La siguiente tabla describe brevemente estos tipos de datos.

+ + + + + + + + + + + + + + + + + + + + + + + + +
documentCuando un miembro devuelve un objeto del tipo document (por ejemplo, la propiedad ownerDocument de un elemento devuelve el documento "document" al cual pertenece), este objeto es la raíz del objeto documento en sí mismo. El capítulo La referencia al documento (document) de DOM lo explica con más detalles.
elementelement se refiere a un elemento o a un nodo de tipo de elemento "element" devuelto por un miembro del API de DOM. Dicho de otra manera, por ejemplo, el método document.createElement() devuelve un objeto referido a un nodo, lo que significa que este método devuelve el elemento que acaba de ser creado en el DOM. Los objetos element ponen en funcionamiento a la interfaz Element del DOM y también a la interfaz de nodo "Node" más básica, las cuales son incluidas en esta referencia.
nodeListUna "nodeList" es una serie de elementos, parecido a lo que devuelve el método document.getElementsByTagName(). Se accede a los items de la nodeList de cualquiera de las siguientes dos formas: +
    +
  • list.item (1)
    • +
  • lista {{mediawiki.external (1)}}
    • +
+ +

Ambas maneras son equivalentes. En la primera, item() es el método del objeto nodeList. En la última se utiliza la típica sintaxis de acceso a listas para llegar al segundo ítem de la lista.

+
attributeCuando un atributo ("attribute") es devuelto por un miembro (por ej., por el método createAttribute()), es una referencia a un objeto que expone una interfaz particular (aunque limitada) a los atributos. Los atributos son nodos en el DOM igual que los elementos, pero no suelen usarse así.
NamedNodeMapUn namedNodeMap es una serie, pero los ítems son accesibles tanto por el nombre o por un índice, este último caso es meramente una conveniencia para enumerar ya que no están en ningún orden en particular en la lista. Un NamedNodeMap es un método de ítem() por esa razón, y permite poner o quitar ítems en un NamedNodeMap
+ +

Interfaces del DOM

+ +

Uno de los propósitos de esta guía es minimizar el hablar de interfaces abstractas, heredadas y otros detalles de funcionamiento. Más bien, concentrarse sobre los objetos en el DOM y sobre las actuales cosas que se pueden usar para manipular la jerarquía de DOM. Desde el punto de vista del programador web, es bastante indiferente saber que la representación del objeto del elemento HTML form toma la propidedad name desde la interfaz HTMLFormElement pero que las propiedades className se toman desde la propia interfaz HTMLElement. En ambos casos, la propiedad está sólo en el objeto form.

+ +

Pero puede resultar confuso el funcionamiento de la fuerte relación entre objetos e interfaces en el DOM, por eso esta sección intentará hablar un poquito sobre las interfaces actuales en la especificación del DOM y de como se dispone de ellas.

+ +

Interfaces y objetos

+ +

En algunos casos un objeto pone en ejecución a una sola interfaz. Pero a menudo un objeto toma prestada una tabla HTML (table) desde muchas interfaces diversas. El objeto table, por ejemplo, pone en funcionamiento una Interfaz especial del elemento table HTML, la cual incluye métodos como createCaption y insertRow. Pero como también es un elemento HTML, table pone en marcha a la interfaz del Element descrita en el capítulo La referencia al elemento del DOM. Y finalmente, puesto que un elemento HTML es también, por lo que concierna al DOM, un nodo en el árbol de nodos que hace el modelo de objeto para una página web o XML, el elemento de table hace funcionar la interfaz más básica de Node, desde el cual deriva Element.

+ +

La referencia a un objeto table, como en el ejemplo siguiente, utiliza estas interfaces intercambiables sobre el objeto.

+ +
var table = document.getElementById("table");
+var tableAttrs = table.attributes; // Node/interfaz Element
+for (var i = 0; i < tableAttrs.length; i++) {
+  // interfaz HTMLTableElement: atributo border
+  if(tableAttrs[i].nodeName.toLowerCase() == "border")
+    table.border = "1";
+}
+// interfaz HTMLTableElement: atributo summary
+table.summary = "nota: borde aumentado";
+ +

Interfaces esenciales en el DOM

+ +

Esta sección lista las interfaces más comúnmente utilizadas en el DOM. La idea no es describir qué hacen estas APIs pero sí dar una idea de las clases de métodos y propiedades que se encuentran con el uso del DOM. Muchos ejemplos de uso común de esta API se encuentran en el capítulo Ejemplos DOM al final de este manual.

+ +

document y window son objetos cuya interfaces son generalmente muy usadas en la programación de DOM. En término simple, el objeto window representa algo como podría ser el navegador, y el objeto document es la raíz del documento en sí. Element hereda de la interfaz genérica Node, y juntos, estas dos interfaces proporcionan muchos métodos y propiedades utilizables sobre los elementos individuales. Éstos elementos pueden igualmente tener interfaces específicas según el tipo de datos representados, como en el ejemplo anterior del objeto table. Lo siguiente es una breve lista de los APIS comunes en la web y en las páginas escritas en XML utilizando el DOM.

+ + + +

Probando el API del DOM

+ +

Ésta parte procura ejemplos para todas las interfaces usadas en el desarrollo web. En algunos casos, los ejemplos son páginas HTML enteras, con el acceso del DOM a un elemento de <script>, la interfaz necesaria (por ejemplo, botones) para la ejecución del script en un formulario, y también que los elementos HTML sobre los cuales opera el DOM se listen. Según el caso, los ejemplos se pueden copiar y pegar en un documento web para probarlos.

+ +

No es el caso donde los ejemplos son muchos más concisos. Para la ejecución de estos ejemplos que sólo demuestran la relación básica entre la interfaz y los elementos HTML, resulta útil tener una página de prueba en la cual las interfaces serán fácilmente accesibles por los scripts. La muy simple página siguiente proporciona en las cabeceras un elemento de script en el cual se pondrán las funciones para testar la interfaz elegida, algunos elementos HTML con atributos que se puedan leer, editar y también manipular, así como la interfaz web necesaria para llamar esas funciones desde el navegador.

+ +

Para probar y ver como trabajan en la plataforma del navegador las interfaces del DOM, esta página de prueba o una nueva similar son factibles. El contenido de la función test() se puede actualizar según la necesidad, para crear más botones o poner más elementos.

+ +
<html>
+  <head>
+    <title>Pruebas DOM</title>
+    <script type="application/javascript">
+    function setBodyAttr(attr, value){
+      if (document.body) eval('document.body.'+attr+'="'+value+'"');
+      else notSupported();
+    }
+    </script>
+  </head>
+  <body>
+    <div style="margin: .5in; height: 400;">
+      <p><b><tt>texto</tt></b></p>
+      <form>
+        <select onChange="setBodyAttr('text',
+        this.options[this.selectedIndex].value);">
+          <option value="black">negro
+          <option value="darkblue">azul oscuro
+        </select>
+        <p><b><tt>bgColor</tt></b></p>
+        <select onChange="setBodyAttr('bgColor',
+        this.options[this.selectedIndex].value);">
+          <option value="white">blanco
+          <option value="lightgrey">gris
+        </select>
+        <p><b><tt>link</tt></b></p>
+        <select onChange="setBodyAttr('link',
+        this.options[this.selectedIndex].value);">
+          <option value="blue">azul
+          <option value="green">verde
+        </select>  <small>
+        <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
+        (sample link)</a></small><br>
+      </form>
+      <form>
+        <input type="button" value="version" onclick="ver()" />
+      </form>
+    </div>
+  </body>
+</html>
+ +

La creación de una página de prueba con una paleta de botones, campos de texto u otros elementos HTML, permitirá testar una gran cantidad de interfaces en un mismo documento, por ejemplo una serie de propiedades que afectan a los colores de una página web. Lo siguiente permite hacerse una idea de como pueden agruparse las interfaces para probarlas.

+ +

Figura 0.1 Muestra DOM página de prueba

+ +

+ +

En este ejemplo, los menúes desplegables actualizan dinámicamente los aspectos de la página web accesibles al DOM como el color de fondo (bgColor), de los hiper-enlaces (aLink), y el del texto (text). El hecho de diseñar páginas, testar las interfaces que se encuentren a lo largo de la lectura son una parte importante del aprendizaje para una utilización eficaz del DOM.

+ +

Otros enlaces

+ + + +
+ + +
 
+ +
 
+
+ +
+ + +
 
+ +
 
+
+ +
+ + +
 
+ +
 
+
diff --git a/files/es/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/es/web/api/document_object_model/locating_dom_elements_using_selectors/index.html new file mode 100644 index 0000000000..cf8a94cd4a --- /dev/null +++ b/files/es/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -0,0 +1,50 @@ +--- +title: Localizando elementos DOM usando selectores +slug: Referencia_DOM_de_Gecko/Localizando_elementos_DOM_usando_selectores +tags: + - DOM + - Necesita actualizacion para principiantes + - Principiante +translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +--- +

Los selectores api proveen metodos que hacen mas facil y rapido devolver elementos del nodo {{domxref("Element")}} del DOM mediante emparejamiento de un conjunto de selectores. Esto es mucho mas rapido que las tecnicas anteriores, donde fuera necesario, por ejemplo usar un loop en un codigo JavaScript para localizar el item especifico que quisieras encontrar.

+ +

Interfaz de NodeSelector

+ +

Esta especificación añade dos nuevos metodos a cualquier objeto implementando el {{domxref("Document")}}, {{domxref("DocumentFragment")}}, o {{domxref("Element")}} interfaces:

+ +
+
{{domxref("Element.querySelector", "querySelector()")}}
+
Devuelve la primera coincidencia del (elemento) {{domxref("Element")}} nodo dentro de las subramas del nodo. Sino se encuentra un nodo coincidente, se devuelve null .
+
{{domxref("Element.querySelectorAll", "querySelectorAll()")}}
+
devuelve un listado de nodos {{domxref("NodeList")}} conteniendo todos los elementos del nodo coincidentes( Element) dentro de las subramas del nodo, o Devuelve un Listado de Nodos vacio NodeList sino se encuentran coincidencias.
+
+ +
Note: El {{domxref("NodeList")}} devuelto por {{domxref("Element.querySelectorAll()", "querySelectorAll()")}} no es dinamico, Es decir que cualquier cambio realizado en el DOM no se vera reflejado en la coleccion. Esto es diferente de otros metodos de querying del dom que si devuelven listados de nodos dinamicos.
+ +

Encontraras ejemplos y detalles leyendo el documento de metodos {{domxref("Element.querySelector()")}} y {{domxref("Element.querySelectorAll()")}}, Tambien en el articulo Code snippets for querySelector.

+ +

Selectors

+ +

El metodo de selectores acepta uno o mas selectores seperados por comas entre cada selector  para determinar que elemento o elementos deben ser devueltos. por ejemplo para seleccionar todos los elementos (p) del parrafo en un documento donde la clase CSS sea tanto warning or note, podes hacer lo siguiente:

+ +
var special = document.querySelectorAll( "p.warning, p.note" );
+ +

tambien por usar query para etiquetas id. Por ejemplo:

+ +
var el = document.querySelector( "#main, #basic, #exclamation" );
+ +

luego de ejecutar el codigo de arriba, la variable el contiene el primer elemento del documento, su ID puede ser uno de los siguentes  main, basic, or exclamation.

+ +

Podes usar cualquier selector CSS con los metodos querySelector() y querySelectorAll().

+ +

Ver tambien.

+ + diff --git a/files/es/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html b/files/es/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html new file mode 100644 index 0000000000..b8bc2e4cf9 --- /dev/null +++ b/files/es/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html @@ -0,0 +1,337 @@ +--- +title: Trazado de una tabla HTML mediante JavaScript y la Interface DOM +slug: Trazado_de_una_tabla_HTML_mediante_JavaScript_y_la_Interface_DOM +translation_of: >- + Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces +--- +

Introducción

+ +

Este artículo es un resumen de algunos métodos DOM nivel 1 poderosos y fundamentales así como una descripción de cómo utilizarlos utilizando Javascript.  Aprenderás a crear, accesar, controlar, y remover elementos HTML dinámicamente.  Los métodos DOM presentados aquí no son específicos de HTML; también aplican para XML. Las demostraciones aquí proporcionadas funcionarán en cualquier navegador moderno, incluyendo todas las versiones de Firefox e IE 5+.

+ +
Los métodos DOM presentados aquí forman parte del Modelo de Documento basado en Objetos (DOM: Document Object Model por sus siglas en inglés) de especificación nivel 1.  DOM nivel 1 incluye métodos tanto para acceso genérico del documento (DOM 1 Core) así como métodos específicos para documentos HTML (DOM 1 HTML).
+ +

Ejemplo: Crear una tabla HTML dinámicamente (Ejemplo1.html)

+ +

Contenido HTML

+ +
<input type="button" value="Genera una tabla" onclick="genera_tabla()">
+
+ +

JavaScript Content

+ +
function genera_tabla() {
+  // Obtener la referencia del elemento body
+  var body = document.getElementsByTagName("body")[0];
+
+  // Crea un elemento <table> y un elemento <tbody>
+  var tabla   = document.createElement("table");
+  var tblBody = document.createElement("tbody");
+
+  // Crea las celdas
+  for (var i = 0; i < 2; i++) {
+    // Crea las hileras de la tabla
+    var hilera = document.createElement("tr");
+
+    for (var j = 0; j < 2; j++) {
+      // Crea un elemento <td> y un nodo de texto, haz que el nodo de
+      // texto sea el contenido de <td>, ubica el elemento <td> al final
+      // de la hilera de la tabla
+      var celda = document.createElement("td");
+      var textoCelda = document.createTextNode("celda en la hilera "+i+", columna "+j);
+      celda.appendChild(textoCelda);
+      hilera.appendChild(celda);
+    }
+
+    // agrega la hilera al final de la tabla (al final del elemento tblbody)
+    tblBody.appendChild(hilera);
+  }
+
+  // posiciona el <tbody> debajo del elemento <table>
+  tabla.appendChild(tblBody);
+  // appends <table> into <body>
+  body.appendChild(tabla);
+  // modifica el atributo "border" de la tabla y lo fija a "2";
+  tabla.setAttribute("border", "2");
+}
+ +

{{ EmbedLiveSample('Overview_of_Sample1.html') }}

+ +

Observa cuidadosamente el orden en el que se crearon los elementos en el nodo de texto:

+ +
    +
  1. Primero se crea el elemento <table>.
    2. +
  2. Posteriormente, creamos el elemento <tbody> , que es el hijo del elemento <table> .
    3. +
  3. Después, utilizamos ciclos para crear los elementos <tr>, que son hijos del elemento <tbody>.
    4. +
  4. Para cada elemento <tr>, utilizamos nuevamente ciclos para generar los elementos <td> que son hijos de los elementos <tr>.
    5. +
  5. Para cada elemento <td>, creamos nodos de texto con el contenido de cada celda.
    6. +
+ +

Una vez creados los elementos <table>, <tbody>, <tr>, y <td> así como los nodos de texto, adicionamos a cada hijo bajo su padre en el órden opuesto:

+ +
    +
  1. Primero, anexamos cada nodo de texto a su elemento padre <td> : + 
    celda.appendChild(textoCelda);
    +
    2. +
  2. Posteriormente, anexamos cada elemento <td> a su elemento padre <tr> : + 
    hilera.appendChild(celda);
    +
    3. +
  3. Posteriomente, anexamos cada elemento <tr> a su elemento padre <tbody>: + 
    tblBody.appendChild(hilera);
    +
    4. +
  4. Después, anexamos el elemento <tbody> a su elemento padre <table>: + 
    tabla.appendChild(tblBody);
    +
    5. +
  5. Finalmente, anexamos el elemento <table> a su elemento padre <body>: + 
    body.appendChild(tabla);
    +
    6. +
+ +

Recuérda esta técnica. Te será muy útil en la programación bajo el estándar W3C DOM. Primero, creas los elementos de arriba a abajo; posteriormente adicionas los hijos a los padres de abajo a arriba.

+ +

A continuación aparece el código HTML generado por el código JavaScript:

+ +
...
+<table border="2">
+    <tbody>
+        <tr><td>celda en la hilera 0, columna 0</td><td>celda en la hilera 0, columna 1</td></tr>
+        <tr><td>celda en la hilera 1, columna 0</td><td>celda en la hilera 1, columna 1</td></tr>
+    </tbody>
+</table>
+...
+
+ +

Aquí está el árbol de objetos DOM generado por el código del elemento <TABLE> :

+ +

Image:sample1-tabledom.jpg

+ +

Tú puedes construir esta tabla y sus elementos internos utilizando sólo algunos de los varios métodos del DOM. Recuerda tener en mente el modelo de la estructura que planeas crear; esto hará mucho más fácil la escritura del código necesario.

+ +

En el árbol del elemento <table> de la Figura 1, el elemento <table> tiene solamente un hijo mientras que <tbody> tiene dos.  A su vez, cada hijo de <tbody> tiene dos hijos. Finalmente, cada elemento <td> tiene sólo uno, el nodo de texto.

+ +

Ejemplo: Configuración del color de fondo de un párrafo

+ +

getElementsByTagName(tagNameValue) es un método disponible en cualquier elemento DOM o el elemento raíz del documento. Cuando se le llama, devolverá una matriz con todos los descendientes de elementos que coincidan con el nombre de la etiqueta. El primer elemento de la lista se encuentra en la posición [0] de la matriz.

+ +

HTML Content

+ +
<body>
+  <input type="button" value="Set paragraph background color" onclick="set_background()">
+  <p>hi</p>
+  <p>hello</p>
+</body>
+ +

JavaScript Content

+ +
function set_background() {
+  // get a list of all the body elements (there will only be one),
+  // and then select the zeroth (or first) such element
+  myBody = document.getElementsByTagName("body")[0];
+
+  // now, get all the p elements that are descendants of the body
+  myBodyElements = myBody.getElementsByTagName("p");
+
+  // get the second item of the list of p elements
+  myP = myBodyElements[1];
+  myP.style.background = "rgb(255,0,0)";
+}
+ +

{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}

+ +

En este ejemplo, establecemos la variable myP en el objeto DOM para el segundo elementop dentro del body:

+ +
    +
  1. Primero, obtendremos una lista de todos los elementos body mediante + 
    myBody = document.getElementsByTagName("body")[0]
    + Como en cualquier documento HTML sólo hay un elemento body válido, esta lista tendrá sólo un elemento, que recuperamos seleccionando el primer elemento de esa lista usando {{mediawiki.external(0)}}.
    2. +
  2. Luego, obtenemos todos los elementos p que son descendientes del body mediante + 
    myBodyElements = myBody.getElementsByTagName("p");
    +
    3. +
  3. Finalmente, obtenemos el segundo item de la lista de elementos p mediante + 
    myP = myBodyElements[1];
    +
    4. +
+ +

Image:sample2a2.jpg

+ +

Una vez que haya obtenido el objeto DOM para un elemento HTML, puede establecer sus propiedades. Por ejemplo, si desea establecer la propiedad estilo de color de fondo, agregue:

+ +
myP.style.background = "rgb(255,0,0)";
+// setting inline STYLE attribute
+
+ +

Creating TextNodes with document.createTextNode("..")

+ +

Use the document object to invoke the createTextNode method and create your text node. You just need to pass the text content. The return value is an object that represents the text node.

+ +
myTextNode = document.createTextNode("world");
+
+ +

This means that you have created a node of the type TEXT_NODE (a piece of text) whose text data is "world", and myTextNode is your reference to this node object. To insert this text into your HTML page, you need to make this text node a child of some other node element.

+ +

Inserting Elements with appendChild(..)

+ +

So, by calling myP.appendChild({{mediawiki.external('node_element')}}), you are making the element a new child of the second <p> element.

+ +
myP.appendChild(myTextNode);
+
+ +

After testing this sample, note that the words hello and world are together: helloworld. So visually, when you see the HTML page it seems like the two text nodes hello and world are a single node, but remember that in the document model, there are two nodes. The second node is a new node of type TEXT_NODE, and it is the second child of the second <p> tag. The following figure shows the recently created Text Node object inside the document tree.

+ +

Image:sample2b2.jpg

+ +
createTextNode and appendChild is a simple way to include white space between the words hello and world. Another important note is that the appendChild method will append the child after the last child, just like the word world has been added after the word hello. So if you want to append a Text Node between hello and world you will need to use insertBefore instead of appendChild.
+ +

Creating New Elements with the document object and the createElement(..) method

+ +

You can create new HTML elements or any other element you want with createElement. For example, if you want to create a new <p> element as a child of the <body> element, you can use the myBody in the previous example and append a new element node. To create a node simply call document.createElement("tagname"). For example:

+ +
myNewPTAGnode = document.createElement("p");
+myBody.appendChild(myNewPTAGnode);
+
+ +

Image:sample2c.jpg

+ +

Removing nodes with the removeChild(..) method

+ +

Nodes can be removed. The following code removes text node myTextNode (containing the word "world") from the second <p> element, myP.

+ +
myP.removeChild(myTextNode);
+
+ +

Text node myTextNode (containing the word "world") still exists. The following code attaches myTextNode to the recently created <p> element, myNewPTAGnode.

+ +
myNewPTAGnode.appendChild(myTextNode);
+
+ +

The final state for the modified object tree looks like this:

+ +

Image:sample2d.jpg

+ +

Creating a table dynamically (back to Sample1.html)

+ +

For the rest of this article we will continue working with sample1.html. The following figure shows the table object tree structure for the table created in the sample.

+ +

Reviewing the HTML Table structure

+ +

Image:sample1-tabledom.jpg

+ +

Creating element nodes and inserting them into the document tree

+ +

The basic steps to create the table in sample1.html are:

+ + + +
At the end of the start function there is a new line of code. The table's border property was set using another DOM method, setAttribute. setAttribute has two arguments: the attribute name and the attribute value. You can set any attribute of any element using the setAttribute method.
+ +
<head>
+<title>Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces</title>
+<script>
+    function start() {
+        // get the reference for the body
+        var mybody = document.getElementsByTagName("body")[0];
+
+        // creates <table> and <tbody> elements
+        mytable     = document.createElement("table");
+        mytablebody = document.createElement("tbody");
+
+        // creating all cells
+        for(var j = 0; j < 2; j++) {
+            // creates a <tr> element
+            mycurrent_row = document.createElement("tr");
+
+            for(var i = 0; i < 2; i++) {
+                // creates a <td> element
+                mycurrent_cell = document.createElement("td");
+                // creates a Text Node
+                currenttext = document.createTextNode("cell is row " + j + ", column " + i);
+                // appends the Text Node we created into the cell <td>
+                mycurrent_cell.appendChild(currenttext);
+                // appends the cell <td> into the row <tr>
+                mycurrent_row.appendChild(mycurrent_cell);
+            }
+            // appends the row <tr> into <tbody>
+            mytablebody.appendChild(mycurrent_row);
+        }
+
+        // appends <tbody> into <table>
+        mytable.appendChild(mytablebody);
+        // appends <table> into <body>
+        mybody.appendChild(mytable);
+        // sets the border attribute of mytable to 2;
+        mytable.setAttribute("border","2");
+    }
+</script>
+</head>
+<body onload="start()">
+</body>
+</html>
+ +

Manipulating the table with DOM and CSS

+ +

Getting a text node from the table

+ +

This example introduces two new DOM attributes. First it uses the childNodes attribute to get the list of child nodes of mycel. The childNodes list includes all child nodes, regardless of what their name or type is. Like getElementsByTagName(), it returns a list of nodes. The differences are that (a) getElementsByTagName() only returns elements of the specified tag name; and (b) getElementsByTagName() returns descendants at any level, not just immediate children. Once you have the returned list, use {{mediawiki.external('x')}} method to retrieve the desired child item. This example stores in myceltext the text node of the second cell in the second row of the table. Then, to display the results in this example, it creates a new text node whose content is the data of myceltext and appends it as a child of the <body> element.

+ +
If your object is a text node, you can use the data attribute and retrieve the text content of the node.
+ +
mybody      = document.getElementsByTagName("body")[0];
+mytable     = mybody.getElementsByTagName("table")[0];
+mytablebody = mytable.getElementsByTagName("tbody")[0];
+myrow       = mytablebody.getElementsByTagName("tr")[1];
+mycel       = myrow.getElementsByTagName("td")[1];
+
+// first item element of the childNodes list of mycel
+myceltext=mycel.childNodes[0];
+
+// content of currenttext is the data content of myceltext
+currenttext=document.createTextNode(myceltext.data);
+mybody.appendChild(currenttext);
+
+ +

Getting an attribute value

+ +

At the end of sample1 there is a call to setAttribute on the mytable object. This call was used to set the border property of the table. To retrieve the value of the attribute, use the getAttribute method:

+ +
mytable.getAttribute("border");
+
+ +

Hiding a column by changing style properties

+ +

Once you have the object in your JavaScript variable, you can set style properties directly. The following code is a modified version of sample1.html in which each cell of the second column is hidden and each cell of the first column is changed to have a red background. Note that the style property was set directly.

+ +
<html>
+<body onload="start()">
+</body>
+<script>
+    function start() {
+       var mybody =document.getElementsByTagName("body")[0];
+       mytable     = document.createElement("table");
+       mytablebody = document.createElement("tbody");
+
+       for(var j = 0; j < 2; j++) {
+           mycurrent_row=document.createElement("tr");
+           for(var i = 0; i < 2; i++) {
+               mycurrent_cell = document.createElement("td");
+               currenttext = document.createTextNode("cell is:" + i + j);
+               mycurrent_cell.appendChild(currenttext);
+               mycurrent_row.appendChild(mycurrent_cell);
+               // set the cell background color
+               // if the column is 0. If the column is 1 hide the cel
+               if (i == 0) {
+                   mycurrent_cell.style.background = "rgb(255,0,0)";
+               } else {
+                   mycurrent_cell.style.display = "none";
+               }
+           }
+           mytablebody.appendChild(mycurrent_row);
+       }
+       mytable.appendChild(mytablebody);
+       mybody.appendChild(mytable);
+    }
+</script>
+</html>
+
diff --git a/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html b/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html new file mode 100644 index 0000000000..6c5f14c025 --- /dev/null +++ b/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html @@ -0,0 +1,93 @@ +--- +title: Using the W3C DOM Level 1 Core +slug: Using_the_W3C_DOM_Level_1_Core +tags: + - DOM + - NeedsTranslation + - NeedsUpdate + - TopicStub +translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core +--- +

The W3C's DOM Level 1 Core is a powerful object model for changing the content tree of documents. It is supported in all major browsers including Mozilla Firefox and Microsoft Internet Explorer. It is a powerful base for scripting on the web.

+ +

What is a content tree?

+ +

Many HTML authors may think of HTML as something flat -- a bunch of text with tags in the middle. However, it is something much more than that. Any HTML document (or for that matter any SGML document or XML document) is a tree structure. For example, the following document and tree structure are similar (although not identical -- see the notes on whitespace in the DOM):

+ +
<html>
+<head>
+  <title>My Document</title>
+</head>
+<body>
+  <h1>Header</h1>
+  <p>Paragraph</p>
+</body>
+</html>
+
+ +

image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg

+ +

When Mozilla parses a document, it builds a content tree and then uses it to display the document.

+ +

The terms used to describe trees show up often in the DOM Level 1 Core. Each of the boxes I drew in the tree above is a node in the tree. The line above a node expresses a parent-child relationship: the node on top is the parent, and the node on the bottom is the child. Two children of the same parent are therefore siblings. Similarly, one can refer to ancestors and descendants. (Cousins are too messy, though.)

+ +

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:

+ +

HTML Content

+ +
<body>
+<input type="button" value="Change this document." onclick="change()">
+<h2>Header</h2>
+<p>Paragraph</p>
+</body>
+
+ +

JavaScript Content

+ +
  function change() {
+    // document.getElementsByTagName("H2") returns a NodeList of the <h2>
+    // elements in the document, and the first is number 0:
+
+    var header = document.getElementsByTagName("H2").item(0);
+    // the firstChild of the header is a Text node:
+    header.firstChild.data = "A dynamic document";
+    // now the header is "A dynamic document".
+
+    var para = document.getElementsByTagName("P").item(0);
+    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);
+  }
+ +

{{ EmbedLiveSample('A_simple_example', 800, 300) }}

+ +

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.

+ +
+

Original Document Information

+ + +
diff --git a/files/es/web/api/document_object_model/whitespace/index.html b/files/es/web/api/document_object_model/whitespace/index.html new file mode 100644 index 0000000000..a943896180 --- /dev/null +++ b/files/es/web/api/document_object_model/whitespace/index.html @@ -0,0 +1,476 @@ +--- +title: 'Cómo manejan el espacio en blanco HTML, CSS y el DOM' +slug: Referencia_DOM_de_Gecko/Cómo_espacioenblanco +tags: + - CSS + - DOM + - HTML + - JavaScript + - espacioenblanco + - whitespace +translation_of: Web/API/Document_Object_Model/Whitespace +--- +
{{APIRef("DOM")}}
+ +

La presencia de espacios en blanco en el DOM puede causar problemas de diseño y dificultar la manipulación del árbol de contenido de formas inesperadas, dependiendo de dónde se encuentra. Este artículo explora cuándo pueden surgir dificultades y analiza qué se puede hacer para mitigar los problemas resultantes.

+ +

¿Qué es el espacio en blanco?

+ +

El espacio en blanco es cualquier cadena de texto compuesta solo por espacios, tabulaciones o saltos de línea (para ser precisos, secuencias CRLF, retornos de carro o avances de línea). Estos caracteres te permiten formatear tu código de una manera que lo hará fácilmente legible por ti y otras personas. De hecho, gran parte de nuestro código fuente está lleno de estos caracteres de espacio en blanco, y solo tendemos a deshacernos de ellos en un paso de compilación de producción para reducir el tamaño de descarga del código.

+ +

¿HTML ignora en gran medida los espacios en blanco?

+ +

En el caso de HTML, los espacios en blanco se ignoran en gran medida: los espacios en blanco entre palabras se tratan como un solo carácter y los espacios en blanco al principio y al final de los elementos y los elementos externos se ignoran. Tomemos el siguiente ejemplo minimalista:

+ + + +
<!DOCTYPE html>
+
+    <h1>       ¡Hola      mundo!     </h1>
+ +

{{EmbedLiveSample('HTML_largely_ignores_whitespace')}}

+ +

Este código fuente contiene un par de avances de línea después del DOCTYPE y un montón de caracteres de espacio antes, después y dentro del elemento <h1>, pero al navegador no parece importarle en absoluto y solo muestra las palabras "¡Hola mundo!" como si estos caracteres no existieran en absoluto:

+ +

Esto es para que los espacios en blanco no afecten el diseño de tu página. Crear espacio alrededor y dentro de los elementos es el trabajo de CSS.

+ +

¿Qué sucede con los espacios en blanco?

+ +

Sin embargo, no solo desaparecen.

+ +

Cualquier carácter de espacio en blanco que esté fuera de los elementos HTML del documento original se representan en el DOM. Esto es necesario internamente para que el editor pueda preservar el formato de los documentos. Esto significa que:

+ + + +

Tomemos el siguiente documento, por ejemplo:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Mi Documento</title>
+</head>
+<body>
+  <h1>Encabezado</h1>
+  <p>
+    Párrafo
+  </p>
+</body>
+</html>
+
+ +

El árbol del DOM para esto se ve así:

+ +

árbol de dom equivalente al ejemplo de HTML anterior

+ +

Conservar caracteres de espacio en blanco en el DOM es útil de muchas maneras, pero hay ciertos lugares donde esto hace que ciertos diseños sean más difíciles de implementar y causa problemas a los desarrolladores que quieren iterar a través de los nodos del DOM. Veremos estas y algunas soluciones más adelante.

+ +

¿CSS cómo procesa los espacios en blanco?

+ +

La mayoría de los espacios en blanco se ignoran, no todos. En el ejemplo anterior, uno de los espacios entre "!Hola" y "mundo!" todavía existe cuando la página se representa en un navegador. Hay reglas en el motor del navegador que deciden qué caracteres de espacio en blanco son útiles y cuáles no; estos se especifican al menos en parte en el Módulo de texto CSS Nivel 3, y especialmente las partes sobre la propiedad white-space en CSS y detalles de procesamiento del espacio en blanco, pero también ofrecemos una explicación más sencilla a continuación.

+ +

Tomemos otro ejemplo realmente simple. Para hacerlo más fácil, ilustramos todos los espacios con ◦, todas las tabulaciones con ⇥ y todos los saltos de línea con ⏎:

+ +

Este ejemplo:

+ +
<h1>◦◦◦¡Hola◦⏎
+⇥⇥⇥⇥<span>◦mundo!</span>⇥◦◦</h1>
+ +

se representa en el navegador así:

+ + + +

{{EmbedLiveSample('Hidden_example')}}

+ +

El elemento <h1> contiene solo elementos en línea. De hecho contiene:

+ + + +

Debido a esto, establece lo que se llama un {{cssxref("Inline_formatting_context", "contexto de formato en línea")}}. Este es uno de los posibles contextos de representación de diseño con los que funcionan los motores del navegador.

+ +

Dentro de este contexto, el procesamiento de caracteres de espacio en blanco se puede resumir de la siguiente manera:

+ +
    +
  1. +

    Primero, todos los espacios y tabulaciones inmediatamente antes y después de un salto de línea se ignoran, por lo que, si tomamos nuestro marcado de ejemplo anterior y aplicamos esta primera regla, obtenemos:

    + + 
    <h1>◦◦◦¡Hola⏎
+<span>◦mundo!</span>⇥◦◦</h1>
    +
    2. +
  2. +

    A continuación, todos los caracteres de tabulación se tratan como caracteres de espacio, por lo que el ejemplo se convierte en:

    + + 
    <h1>◦◦◦¡Hola⏎
+<span>◦mundo!</span>◦◦◦</h1>
    +
    3. +
  3. +

    A continuación, los saltos de línea se convierten en espacios:

    + + 
    <h1>◦◦◦¡Hola◦<span>◦mundo!</span>◦◦◦</h1>
    +
    4. +
  4. +

    Después de eso, cualquier espacio inmediatamente después de otro espacio (incluso a través de dos elementos en línea separados) se ignora, por lo que terminamos con:

    + + 
    <h1>◦¡Hola◦<span>mundo!</span>◦</h1>
    +
    5. +
  5. +

    Y finalmente, las secuencias de espacios al principio y al final de una línea se eliminan, por lo que eventualmente obtenemos esto:

    + + 
    <h1>¡Hola◦<span>mundo!</span></h1>
    +
    6. +
+ +

Es por eso que las personas que visitan la página web simplemente verán la frase "¡Hola mundo!" muy bien escrita en la parte superior de la página, en lugar de un "!Hola" con una sangría extraña, seguido de un "mundo!" en la línea debajo de esa.

+ +
+

Nota: Firefox DevTools ha admitido el resaltado de nodos de texto desde la versión 52, lo que facilita ver exactamente qué contenido hay dentro de los nodos de espacios en blanco. Los nodos de espacios en blanco puros están marcados con una etiqueta "whitespace".

+
+ +

Espacio en blanco en contextos de formato de bloque

+ +

Anteriormente, solo miramos elementos que contienen elementos en línea y contextos de formato en línea. Si un elemento contiene al menos un elemento de bloque, entonces establece lo que se llama un {{cssxref("Block_formatting_context", "contexto de formato de bloque")}}.

+ +

En este contexto, los espacios en blanco se tratan de manera muy diferente. Veamos un ejemplo para explicar cómo. Hemos marcado los espacios en blanco como antes.

+ +
<body>⏎
+⇥<div>◦◦¡Hola◦◦</div>⏎
+⏎
+◦◦◦<div>◦◦mundo!◦◦</div>◦◦⏎
+</body>
+ +

Tenemos 3 nodos de texto que contienen solo espacios en blanco, uno antes del primer <div>, uno entre los 2 <div>s y uno después del segundo <div>.

+ +

Esto se renderiza así:

+ + + +

{{EmbedLiveSample('Hidden_example_2')}}

+ +

Podemos resumir cómo se maneja el espacio en blanco aquí de la siguiente manera (puede haber algunas pequeñas diferencias en el comportamiento exacto entre los navegadores, pero básicamente, esto funciona):

+ +
    +
  1. +

    Debido a que estamos dentro de un contexto de formato de bloque, todo debe ser un bloque, por lo que nuestros 3 nodos de texto también se convierten en bloques, al igual que los 2 <div>s. Los bloques ocupan todo el ancho disponible y se apilan unos encima de los otros, lo cual significa que terminamos con un diseño compuesto por esta lista de bloques:

    + + 
    <block>⏎⇥</block>
+<block>◦◦¡Hola◦◦</block>
+<block>⏎◦◦◦</block>
+<block>◦◦mundo!◦◦</block>
+<block>◦◦⏎</block>
    +
    2. +
  2. +

    Esto luego se simplifica aún más aplicando las reglas de procesamiento para espacios en blanco en contextos de formato en línea a estos bloques:

    + + 
    <block></block>
+<block>¡Hola</block>
+<block></block>
+<block>mundo!</block>
+<block></block>
    +
    3. +
  3. +

    Los 3 bloques vacíos que tenemos ahora no van a ocupar ningún espacio en el diseño final, porque no contienen nada, así que terminaremos con solo 2 bloques ocupando espacio en la página. Las personas que visitan la página web ven las palabras "!Hola" y "mundo!" en 2 líneas separadas, ya que esperarías que se distribuyeran 2 <div>s. El motor del navegador esencialmente ha ignorado todos los espacios en blanco que se agregaron en el código fuente.

    +
    4. +
+ +

Espacios entre elementos en línea y bloques en línea

+ +

Ahora analicemos algunos problemas que pueden surgir debido a los espacios en blanco y qué se puede hacer al respecto. En primer lugar, veremos qué sucede con los espacios entre los elementos en línea y de bloque en línea. De hecho, ya vimos esto en nuestro primer ejemplo, cuando describimos cómo se procesan los espacios en blanco dentro de los contextos de formato en línea.

+ +

Dijimos que había reglas para ignorar la mayoría de los caracteres, pero que los caracteres que separan palabras permanecen. Cuando solo se trata de elementos a nivel de bloque como <p> que solo contienen elementos en línea como <em>, <strong>, <span>, etc., normalmente no te importa esto porque el espacio en blanco adicional que llega al diseño es útil para separar las palabras en la oración.

+ +

Sin embargo, se vuelve más interesante cuando comienzas a usar elementos inline-block. Estos elementos se comportan como elementos en línea en el exterior y como bloques en el interior, y a menudo se utilizan para mostrar piezas de la IU más complejas que solo texto, una al lado de la otra en la misma línea, por ejemplo, elementos del menú de navegación.

+ +

Debido a que son bloques, muchas personas esperan que se comporten como tales, pero en realidad no es así. Si hay espacios en blanco de formato entre elementos en línea adyacentes, esto dará como resultado un espacio en el diseño, al igual que los espacios entre palabras en el texto.

+ +

Considera este ejemplo (nuevamente, los espacios en blanco en el HTML están marcados para que sean visibles):

+ +
.people-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.people-list li {
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  background: #f06;
+  border: 1px solid;
+}
+
+ +
<ul class="people-list">⏎
+
+◦◦<li></li>⏎
+
+◦◦<li></li>⏎
+
+◦◦<li></li>⏎
+
+◦◦<li></li>⏎
+
+◦◦<li></li>⏎
+
+</ul>
+ +

Esto se traduce de la siguiente manera:

+ + + +

{{EmbedLiveSample('Hidden_example_3')}}

+ +

Probablemente no desees los espacios entre los bloques — dependiendo del caso de uso (¿esta es una lista de avatares o botones de navegación horizontales?), Probablemente desees que los lados del elemento estén alineados entre sí y poder controlar cualquier espacio tú mismo.

+ +

El Inspector HTML de Firefox DevTools resaltará los nodos de texto y también te mostrará exactamente qué áreas están ocupando los elementos, lo que es útil si te preguntas qué está causando el problema y tal vez estés pensando que tienes un margen adicional allí o algo así.

+ +

Espacio en blanco en Devtools

+ +

Hay algunas formas de solucionar este problema:

+ +

Utiliza Flexbox para crear la lista horizontal de elementos en lugar de probar una solución de inline-block. Esto se encarga de todo por ti y definitivamente es la solución preferida:

+ +
ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+ +

Si necesitas confiar en inline-block, puedes establecer el {{cssxref("font-size")}} de la lista a 0. Esto solo trabaja si tus bloques no tienen el tamaño ems (según el font-size, por lo que el tamaño del bloque también terminaría siendo 0). rems sería una buena opción aquí:

+ +
ul {
+  font-size: 0;
+  ...
+}
+
+li {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  ...
+}
+
+ +

O puedes establecer un margen negativo en los elementos de la lista:

+ +
li {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  margin-right: -0.25rem;
+}
+ +

También puedes resolver este problema colocando los elementos de tu lista en la misma línea en la fuente, lo cual hace que los nodos de espacios en blanco no se creen en primer lugar:

+ +
<li></li><li></li><li></li><li></li><li></li>
+ +

Recorrido del DOM y el espacio en blanco

+ +

Al intentar realizar una manipulación del DOM en JavaScript, también puedes encontrar problemas debido a los nodos de espacios en blanco. Por ejemplo, si tienes una referencia a un nodo padre y deseas afectar su primer elemento hijo usando Node.firstChild, si hay un nodo de espacio en blanco deshonesto justo después de la etiqueta de apertura principal, no obtendrás el resultado que esperabas. Se seleccionaría el nodo de texto en lugar del elemento al que deseas afectar.

+ +

Veamos otro ejemplo, si tienes un determinado subconjunto de elementos en los que deseas hacer algo en función de si están vacíos (no tienen nodos secundarios) o, no puedes verificar si cada elemento está vacío usando algo como Node.hasChildNodes(), pero nuevamente, si algún elemento destino contiene nodos de texto, podrías terminar con resultados falsos.

+ +

Funciones auxiliares de espacios en blanco

+ +

El siguiente código JavaScript define varias funciones que facilitan el manejo de espacios en blanco en el DOM:

+ +
/**
+ * En todo, el espacio en blanco se define como uno de los caracteres
+ *  "\t" TAB \u0009
+ *  "\n" LF  \u000A
+ *  "\r" CR  \u000D
+ *  " "  SPC \u0020
+ *
+ * Esto no usa la "\s" de Javascript porque eso incluye
+ * espacios irrompibles (y también algunos otros caracteres).
+ */
+
+
+/**
+ * Determina si el contenido de texto de un nodo es completamente de espacios en blanco.
+ *
+ * @param nod  Un nodo que implementa la interfaz | CharacterData | (es decir,
+ *             un nodo |Text|, |Comment| o |CDATASection|
+ * @return     True si todo el contenido de texto de |nod| es espacio en blanco,
+ *             de lo contrario false.
+ */
+function is_all_ws( nod )
+{
+  // Usa las características de String y RegExp de ECMA-262 Edición 3
+  return !(/[^\t\n\r ]/.test(nod.textContent));
+}
+
+
+/**
+ * Determina si un nodo debe ser ignorado por las funciones del iterador.
+ *
+ * @param nod  Un objeto implementando la interfaz |Node| de DOM1.
+ * @return     true si el nodo es:
+ *                1) Un nodo |Text| en que todo es espacio en blanco
+ *                2) Un nodo |Comment|
+ *             y de lo contrario false.
+ */
+
+function is_ignorable( nod )
+{
+  return ( nod.nodeType == 8) || // Un nodo comment
+         ( (nod.nodeType == 3) && is_all_ws(nod) ); // un nodo text, todo es eeb
+}
+
+/**
+ * Versión de |previousSibling| que omite los nodos que son completamente
+ * espacio en blanco o comentarios.  (Normalmente |previousSibling| es una propiedad
+ * de todos los nodos DOM que devuelve el nodo hermano, el nodo que es
+ * un hijo del mismo padre, que ocurre inmediatamente antes del
+ * nodo de referencia).
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El hermano anterior más cercano a |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function node_before( sib )
+{
+  while ((sib = sib.previousSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Versión de |nextSibling| que omite los nodos que son completamente
+ * espacio en blanco o comentarios.
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El hermano más cercano a |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function node_after( sib )
+{
+  while ((sib = sib.nextSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Versión de |lastChild| que omite los nodos que son completamente
+ * espacio en blanco o comentarios.  (Normalmente |lastChild| es una propiedad
+ * de todos los nodos del DOM que da el último de los nodos contenidos
+ * directamente en el nodo de referencia).
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El último hijo de |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function last_child( par )
+{
+  var res=par.lastChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.previousSibling;
+  }
+  return null;
+}
+
+/**
+ * Versión de |firstChild| que omite los nodos que son completamente
+ * espacios en blanco y comentarios.
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El primer hijo de |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function first_child( par )
+{
+  var res=par.firstChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.nextSibling;
+  }
+  return null;
+}
+
+/**
+ * Versión de |data| que no incluye espacios en blanco al principio
+ * y finaliza y normaliza todos los espacios en blanco a un solo espacio.  (Normalmente
+ * |data| es una propiedad de los nodos de texto que proporciona el texto del nodo).
+ *
+ * @param txt  El nodo de texto cuyos datos se deben devolver
+ * @return     Una cadena que proporciona el contenido del nodo de texto con
+ *             espacios en blanco colapsados.
+ */
+function data_of( txt )
+{
+  var data = txt.textContent;
+  // Usa las características de String y RegExp de ECMA-262 Edición 3
+  data = data.replace(/[\t\n\r ]+/g, " ");
+  if (data.charAt(0) == " ")
+    data = data.substring(1, data.length);
+  if (data.charAt(data.length - 1) == " ")
+    data = data.substring(0, data.length - 1);
+  return data;
+}
+
+ +

Ejemplo

+ +

El siguiente código demuestra el uso de las funciones anteriores. Itera sobre los hijos de un elemento (cuyos hijos son todos elementos) para encontrar aquel cuyo texto es "Este es el tercer párrafo", y luego cambia el atributo de clase y el contenido de ese párrafo.

+ +
var cur = first_child(document.getElementById("test"));
+while (cur)
+{
+  if (data_of(cur.firstChild) == "Este es el tercer párrafo.")
+  {
+    cur.className = "magic";
+    cur.firstChild.textContent = "Este es el párrafo mágico.";
+  }
+  cur = node_after(cur);
+}
+
-- cgit v1.2.3-54-g00ecf