diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/api/node | |
parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
download | translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2 translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip |
initial commit
Diffstat (limited to 'files/es/web/api/node')
22 files changed, 2304 insertions, 0 deletions
diff --git a/files/es/web/api/node/appendchild/index.html b/files/es/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..a72eb7d6c3 --- /dev/null +++ b/files/es/web/api/node/appendchild/index.html @@ -0,0 +1,113 @@ +--- +title: Nodo appendChild +slug: Web/API/Node/appendChild +tags: + - API + - DOM + - Node + - Referencia + - metodo +translation_of: Web/API/Node/appendChild +--- +<div>{{APIRef("DOM")}}</div> + +<p>Agrega un nuevo nodo al final de la lista de un elemento hijo de un elemento padre especificado.</p> + +<p>Si el hijo(Child) <strong>es una referencia</strong>(hace referencia) hacia un nodo existente en el documento actual, este es quitado del padre actual para ser puesto en el nodo padre nuevo. La clave está en <strong>si el (Child) es una referencia a un nodo existente en el documento</strong>.</p> + +<div class="blockIndicator note"> +<p><strong>Nueva API disponible </strong><br> + El método {{domxref("ParentNode.append()")}} soporta varios argumentos y cadenas para adjuntar.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>element</em>.appendChild(<em>aChild</em>);</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><strong>aChild</strong></dt> + <dd>El nodo a adjuntar al nodo padre proporcionado (normalmente un elemento).</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>El valor devuelto es el hijo adjunto excepto cuando el hijo proporcionado es un {{domxref("DocumentFragment")}}, en cuyo caso el {{domxref("DocumentFragment")}} vacío es devuelto.</p> + +<h2 id="Notas">Notas</h2> + +<p>El encadenamiento podría no funcionar como se espera debido a que <code>appendChild()</code> devuelve un elemento hijo:</p> + +<pre class="brush: js">var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</pre> + +<p>Establece <code>aBlock</code> como <code><b></b></code> sólo, que no es probablemente lo que quieras.</p> + +<p>Si el <code>child</code> hace una referencia a un nodo existente en el documento, el método <code>appendChild</code> se mueve de su posición actual a su nueva posición (ej. no existen requerimientos para eliminar el nodo desde su nodo padre antes de añadirlo a cualquier otro nodo).</p> + +<p>Ésto significa también que el nodo no puede estar en dos puntos del documento de manera simultánea. Así que si el nodo ya contiene un padre, primero es eliminado, y después se añade a la nueva posición.</p> + +<p>Se puede usar {{domxref("Node.cloneNode")}} para hacer una copia del nodo antes de añadirlo debajo de su nuevo elemento padre. (Nota: las copias echas con <code>cloneNode</code> no serán guardadas automáticamente en sincronía.)</p> + +<p>Éste método no es permitido para mover nodos entre distintos documentos. Si se quiere añadir un nodo desde un documento diferente (por ejemplo para mostrar los resultados de una petición AJAX) se debe usar primero:<br> + {{domxref("document.importNode")}}.</p> + +<p><code>appendChild()</code> Es uno de los métodos fundamentales de la programación web usando el DOM. El método <code>appendChild()</code> inserta un nuevo nodo dentro de la estructura DOM de un documento, y es la segunda parte del proceso central uno-dos, crear-y-añadir para construir páginas web a base de programación.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush:js">// Crea un nuevo elemento párrafo, y lo agrega al final del cuerpo del documento +var p = document.createElement("p"); +document.body.appendChild(p);</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especifación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Sin cambio desde {{SpecName("DOM3 Core")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Sin cambio desde {{SpecName("DOM2 Core")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Sin cambio desde {{SpecName("DOM1")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("api.Node.appendChild")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("Node.removeChild")}}</li> + <li>{{domxref("Node.replaceChild")}}</li> + <li>{{domxref("Node.insertBefore")}}</li> + <li>{{domxref("Node.hasChildNodes")}}</li> + <li>{{domxref("ParentNode.append()")}}</li> +</ul> diff --git a/files/es/web/api/node/childnodes/index.html b/files/es/web/api/node/childnodes/index.html new file mode 100644 index 0000000000..567cd9fd08 --- /dev/null +++ b/files/es/web/api/node/childnodes/index.html @@ -0,0 +1,103 @@ +--- +title: Node.childNodes +slug: Web/API/Node/childNodes +tags: + - API + - DOM + - Propiedad + - Referencia + - Referência DOM +translation_of: Web/API/Node/childNodes +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>La propiedad de solo lectura <code><strong>Node.childNodes</strong></code> devuelve una colección de hijos {{domxref("Node","nodes")}} del elemento dado donde el primer nodo hijo es asignado un índice 0.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var <var>nodeList</var> = <var>elementNodeReference</var>.childNodes; +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Uso_simple">Uso simple</h3> + +<pre class="brush:js">// parg is an object reference to a <p> element + +// First check that the element has child nodes +if (parg.hasChildNodes()) { + var children = parg.childNodes; + + for (var i = 0; i < children.length; i++) { + // do something with each child as children[i] + // NOTE: List is live, adding or removing children will change the list + } +}</pre> + +<h3 id="Eliminar_todos_los_hijos_de_un_nodo">Eliminar todos los hijos de un nodo</h3> + +<pre class="brush:js">// This is one way to remove all children from a node +// box is an object reference to an element + +while (box.firstChild) { + //The list is LIVE so it will re-index each call + box.removeChild(box.firstChild); +}</pre> + +<h2 id="Notas">Notas</h2> + +<p>Los items en una colección de nodos son objetos y no cadenas de caracteres. Para obtener los datos de los objetos del nodo, use sus propiedades (ej. <code>elementNodeReference.childNodes[1].nodeName</code> para obtener el nombre, etc.).</p> + +<p>El objeto <code>document</code> contiene 2 hijos: la declaración del Doctype y el elemento raíz, generalmente referido como <code>documentElement</code>. (En documentos (X)HTML es el elemento <code>HTML</code>)</p> + +<p><code>childNodes</code> incluye todos los nodos hijos, incluidos los nodos no elementos, como nodos de tipo textos y comentarios. Para obtener una colección de solo elementos, use {{domxref("ParentNode.children")}}.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Sin cambios</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Sin cambios</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Sin cambios</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("api.Node.childNodes")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{domxref("Node.firstChild")}}</li> + <li>{{domxref("Node.lastChild")}}</li> + <li>{{domxref("Node.nextSibling")}}</li> + <li>{{domxref("Node.previousSibling")}}</li> + <li>{{domxref("ParentNode.children")}}</li> +</ul> diff --git a/files/es/web/api/node/clonenode/index.html b/files/es/web/api/node/clonenode/index.html new file mode 100644 index 0000000000..0fb78af5dd --- /dev/null +++ b/files/es/web/api/node/clonenode/index.html @@ -0,0 +1,91 @@ +--- +title: Node.cloneNode() +slug: Web/API/Node/cloneNode +tags: + - API + - DOM + - Referencia + - Referência DOM + - metodo +translation_of: Web/API/Node/cloneNode +--- +<div>{{APIRef("DOM")}}</div> + +<p>El método <strong><code>Node.cloneNode()</code></strong> devuelve un duplicado del nodo en el que este método fue llamado.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var <em><var>dupNode</var></em> = <em><var>node</var></em>.cloneNode(<em><var>deep</var></em>); +</pre> + +<dl> + <dt><em>node</em></dt> + <dd>El nodo que se desea clonar.</dd> + <dt><em>dupNode</em></dt> + <dd>El nuevo nodo que será un clon de <code>node</code></dd> + <dt><em>deep {{optional_inline}}</em></dt> + <dd><code>true</code> si los hijos del nodo también deben ser clonados, o <code>false</code> para clonar únicamente al nodo.</dd> +</dl> + +<div class="note"> +<p><strong>Nota:</strong> En la especificación DOM4 (como se implementó en Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> es un argumento opcional. Si éste se omite, el método actua como si el valor se estableciera en <strong><code>true</code></strong>, estableciendo el uso de la clonación profunda como el comportamiento por defecto. Para crear un clon superficial, <code>deep</code> debe establecerse en <code>false</code>.</p> + +<p>Este comportamiento ha sido modificado en la última especificación, si es omitido, el método se comportará como si <code>deep</code> fuera <strong><code>false</code></strong>. Aunque sigue siendo opcional, usted siempre debería proporcionar el argumento <code>deep</code> tanto para la compatibilidad con las nuevas y anteriores especificaciones. Con Gecko 28.0 {{geckoRelease(28)}}), la consola advierte a los desarrolladores a no omitir el argumento. Desde Gecko 29.0 {{geckoRelease(29)}}), una copia superficial, es el comportamiento por defecto en lugar de una copia profunda.</p> +</div> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: js">var p = document.getElementById("para1"); +var p_prime = p.cloneNode(true); +</pre> + +<h2 id="Notas">Notas</h2> + +<p id="not-event-listeners">Al clonar un nodo se copian todos sus atributos y valores, incluyendo escuchadores intrínsecos (en–línea). No copia los escuchadores de evento añadidos utilizando <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> o aquellos asignados a las propiedades de un elemento. (ej. <code>node.onclick = fn</code>). Además, para un elemento <code><canvas></code>, la imagen pintada no se copia.</p> + +<p>El nodo duplicado devuelto por <code>cloneNode()</code> no formará parte del documento hasta que sea añadido a otro nodo que sea parte del documento utilizando {{domxref("Node.appendChild()")}} o un método similar. Tampoco tiene padre hasta que sea añadido a otro nodo.</p> + +<p>Si <code>deep</code> se establece a <code>false</code>, los elementos hijos no se clonan. Tampoco se clona ningún texto que contenga el nodo, ya que está contenido en uno o más nodos {{domxref("Text")}}.</p> + +<p>Si <code>deep</code> se evalúa a <code>true</code>, el subárbol completo (incluyendo texto que pueda estar en nodos {{domxref("Text")}} hijos) también se copian. En los nodos vacíos (por ejemplo, los elementos {{HTMLElement("img")}} y {{HTMLElement("input")}}) no importa si <code>deep</code> es <code>true</code> o <code>false</code>.</p> + +<div class="warning"><strong>Advertencia:</strong> <code>cloneNode()</code> puede conducir a elementos con ID's duplicados en el documento.</div> + +<p>Si el nodo original tiene un ID el elemento clonado se ubicará en el mismo documento, el ID del clon debería ser modificado para ser único. Los atributos name pueden necesitar ser modificados también, dependiendo de si se esperan nombres duplicados.</p> + +<p>Para clonar un nodo con el fin de agregarlo a un domento distinto, utiliza {{domxref("Document.importNode()")}}.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div> +<p>{{Compat("api.Node.cloneNode")}}</p> +</div> diff --git a/files/es/web/api/node/contains/index.html b/files/es/web/api/node/contains/index.html new file mode 100644 index 0000000000..be0f8848d9 --- /dev/null +++ b/files/es/web/api/node/contains/index.html @@ -0,0 +1,56 @@ +--- +title: Node.contains() +slug: Web/API/Node/contains +tags: + - API + - DOM + - Nodo + - metodo +translation_of: Web/API/Node/contains +--- +<div>{{APIRef("DOM")}}</div> + +<p>El método <strong><code>Node.contains()</code></strong> devuelve un valor {{jsxref("Boolean")}} indicando si un nodo es descendiente de un nodo dado o no, por ejemplo, el propio nodo, uno de sus hijos directos (({{domxref("Node.childNodes", "childNodes")}})), uno de los hijos directos de su nodo hijo, etc.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">node.contains( otroNodo ) +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Esta función verifica si un un elemento esté en el cuerpo de la página. Como <code>contains</code> es inclusivo y determinar si el cuerpo se contiene a sí mismo no es la intención de <code>isInPage</code> este caso explícitamente devuelve <code>false</code>.</p> + +<pre class="brush:js">function isInPage(node) { + return (node === document.body) ? false : document.body.contains(node); +}</pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{Compat("api.Node.contains")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("Node.compareDocumentPosition")}}</li> + <li>{{domxref("Node.hasChildNodes")}}</li> +</ul> diff --git a/files/es/web/api/node/elementopadre/index.html b/files/es/web/api/node/elementopadre/index.html new file mode 100644 index 0000000000..2a2e947a8d --- /dev/null +++ b/files/es/web/api/node/elementopadre/index.html @@ -0,0 +1,46 @@ +--- +title: Node.parentElement +slug: Web/API/Node/elementoPadre +tags: + - API + - DOM + - NecesitaCompatiblidadNavegador + - Nodo + - Propiedad +translation_of: Web/API/Node/parentElement +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>La propiedad de sólo lectura de <code><strong>Nodo.parentElement</strong></code> devuelve el nodo padre del DOM {{domxref("Element")}}, o <code>null</code>, si el nodo no tiene padre o si el padre no es un {{domxref("Element")}} DOM .</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>elementoPadre</em> = <em>node</em>.parentElement</pre> + +<p>El <code>elementoPadre</code> es el padre del nodo actual. Esto es siempre un objecto {{domxref("Element")}} DOM, o <code>null</code>.</p> + +<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2> + +<pre class="brush:js">if (node.parentElement) { + node.parentElement.style.color = "red"; +}</pre> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>En algunos navegadores, la propiedad <code>elementoPadre</code> es solo definida en nodos que ellos mismos son {{domxref("Element")}}. En particular, esto no está definido en nodos de texto.</p> + +<p>{{Compat("api.Node.parentElement")}}</p> + +<h2 id="Especificación" name="Especificación">Especificación</h2> + +<ul> + <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li> +</ul> + +<h2 id="Ver_también" name="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("Node.parentNode")}}</li> +</ul> diff --git a/files/es/web/api/node/haschildnodes/index.html b/files/es/web/api/node/haschildnodes/index.html new file mode 100644 index 0000000000..b5b3bc58b2 --- /dev/null +++ b/files/es/web/api/node/haschildnodes/index.html @@ -0,0 +1,73 @@ +--- +title: Node.hasChildNodes() +slug: Web/API/Node/hasChildNodes +tags: + - API + - DOM + - Nodo + - metodo +translation_of: Web/API/Node/hasChildNodes +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>El método <code><strong>Node.hasChildNodes()</strong></code> devuelve un valor <strong>Boolean</strong> indicando si el {{domxref("Node")}} (nodo) actual tiene <a href="/es/docs/Web/API/Node/childNodes" title="DOM/Node.childNodes">nodos hijos</a> o no.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><em>resultado</em> = <em>node</em>.hasChildNodes();</code></pre> + +<dl> + <dt><code>resultado</code></dt> + <dd>almacena el valor devuelto <code>true</code> o <code>false</code>.</dd> +</dl> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<p>El siguiente ejemplo elimina el primer nodo dentro del elemento con id <code>"foo"</code> si <em>foo</em> tiene nodos hijos.</p> + +<pre class="brush:js">var foo = document.getElementById("foo"); +if (foo.hasChildNodes()) { + // do something with 'foo.childNodes' +} +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush:js">;(function(prototype) { + prototype.hasChildNodes = prototype.hasChildNodes || function() { + return !!this.firstChild; + } +})(Node.prototype); +</pre> + +<h2 id="Resumen">Resumen</h2> + +<p>Hay varias maneras de determinar si el nodo tiene nodos hijos.</p> + +<ul> + <li>node.hasChildNodes()</li> + <li>node.firstChild != null (o sólo node.firstChild)</li> + <li>node.childNodes && node.childNodes.length (o node.childNodes.length > 0)</li> +</ul> + +<h2 id="Especificación" name="Especificación">Especificación</h2> + +<ul> + <li><a href="https://dom.spec.whatwg.org/#dom-node-haschildnodes">WHATWG: hasChildNodes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li> +</ul> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("api.Node.hasChildNodes")}}</p> + +<h2 id="Ver_también" name="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("Node.childNodes")}}</li> + <li>{{domxref("Node.hasAttributes")}}</li> +</ul> diff --git a/files/es/web/api/node/index.html b/files/es/web/api/node/index.html new file mode 100644 index 0000000000..6511274333 --- /dev/null +++ b/files/es/web/api/node/index.html @@ -0,0 +1,371 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - Interfaz + - Nodo + - Referencia +translation_of: Web/API/Node +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Node</code></strong> es una interfaz en la cuál un número de objetos de tipo DOM API heredan. Esta interfaz permite que esos objetos sean tratados similarmente.</p> + +<p>Las siguientes interfaces todas heredan de los metodos y propiedades de <code>Node</code>: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (heredan el {{domxref("Text")}}, el {{domxref("Comment")}}, y {{domxref("CDATASection")}}), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p> + +<p>Estas interfaces pueden retornar null en casos particulares donde los métodos y las propiedades no son relevantes. Pueden retornar una excepción - por ejemplo cuando se agregan hijos a un tipo de node del cuál no puede existir hijos.</p> + +<h2 id="Propiedades">Propiedades</h2> + +<p><em>herendan propiedades de sus padres {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt> + <dd>Retorna un {{domxref("DOMString")}} representando la base de la URL. El concepto de la base de la URL cambia de un lenguaje a otro; en HTML, le corresponde al protocolo, el nombre del dominio y la estructura del directorio, eso es todo hasta el último <code>'/'</code>.</dd> + <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt> + <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd> + <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt> + <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd> + <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{ gecko_minversion_inline("1.9.2") }}<br> + Though recent specifications require <code>localName</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>The namespace URI of this node, or <code>null</code> if it is no namespace. In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}<br> + Though recent specifications require <code>namespaceURI</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd> + <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt> + <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd> + <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt> + <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are: + <table class="standard-table"> + <tbody> + <tr> + <th scope="col">Name</th> + <th scope="col">Value</th> + </tr> + <tr> + <td><code>ELEMENT_NODE</code></td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td> + <td><code>2</code></td> + </tr> + <tr> + <td><code>TEXT_NODE</code></td> + <td><code>3</code></td> + </tr> + <tr> + <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td> + <td><code>4</code></td> + </tr> + <tr> + <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td> + <td><code>6</code></td> + </tr> + <tr> + <td><code>PROCESSING_INSTRUCTION_NODE</code></td> + <td><code>7</code></td> + </tr> + <tr> + <td><code>COMMENT_NODE</code></td> + <td><code>8</code></td> + </tr> + <tr> + <td><code>DOCUMENT_NODE</code></td> + <td><code>9</code></td> + </tr> + <tr> + <td><code>DOCUMENT_TYPE_NODE</code></td> + <td><code>10</code></td> + </tr> + <tr> + <td><code>DOCUMENT_FRAGMENT_NODE</code></td> + <td><code>11</code></td> + </tr> + <tr> + <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td> + <td><code>12</code></td> + </tr> + </tbody> + </table> + </dd> + <dt>{{domxref("Node.nodeValue")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the value of an object. For most <code>Node</code> type, this returns <code>null</code> and any set operation is ignored. For nodes of type <code>TEXT_NODE</code> ({{domxref("Text")}} objects), <code>COMMENT_NODE</code> ({{domxref("Comment")}} objects), and <code>PROCESSING_INSTRUCTION_NODE</code> ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.</dd> + <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt> + <dd>Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns <code>null</code>.</dd> + <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd> + <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt> + <dd>Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns <code>null</code>.</dd> + <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.<br> + Though recent specifications require <code>prefix</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{domxref("Node.textContent")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{domxref("Node.appendChild()")}}</dt> + <dd>Insert a {{domxref("Node")}} as the last child node of this element.</dd> + <dt>{{domxref("Node.cloneNode()")}}</dt> + <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd> + <dt>{{domxref("Node.compareDocumentPosition()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.contains()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt> + <dd>...</dd> + <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt> + <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd> + <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating if the element has any attributes, or not.</dd> + <dt>{{domxref("Node.hasChildNodes()")}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating if the element has any child nodes, or not.</dd> + <dt>{{domxref("Node.insertBefore()")}}</dt> + <dd>Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.</dd> + <dt>{{domxref("Node.isDefaultNamespace()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.isEqualNode()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.isSameNode()")}} {{obsolete_inline}}</dt> + <dd> </dd> + <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt> + <dd>Returns a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a> flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd> + <dt>{{domxref("Node.lookupPrefix()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.normalize()")}}</dt> + <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd> + <dt>{{domxref("Node.removeChild()")}}</dt> + <dd>Removes a child node from the current element, which must be a child of the current node.</dd> + <dt>{{domxref("Node.replaceChild()")}}</dt> + <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd> + <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt> + <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd> + <dd> </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Browse_all_child_nodes">Browse all child nodes</h3> + +<p>The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).</p> + +<pre class="brush: js">function DOMComb (oParent, oCallback) { + if (oParent.hasChildNodes()) { + for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) { + DOMComb(oNode, oCallback); + } + } + oCallback.call(oParent); +}</pre> + +<h4 id="Syntax">Syntax</h4> + +<pre>DOMComb(parentNode, callbackFunction);</pre> + +<h4 id="Description">Description</h4> + +<p>Recursively cycle all child nodes of <code>parentNode</code> and <code>parentNode</code> itself and execute the <code>callbackFunction</code> upon them as <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a> objects.</p> + +<h4 id="Parameters">Parameters</h4> + +<dl> + <dt><code>parentNode</code></dt> + <dd>The parent node (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd> + <dt><code>callbackFunction</code></dt> + <dd>The callback function (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd> +</dl> + +<h4 id="Sample_usage">Sample usage</h4> + +<p>The following example send to the <code>console.log</code> the text content of the body:</p> + +<pre class="brush: js">function printContent () { + if (this.nodeValue) { console.log(this.nodeValue); } +} + +onload = function () { + DOMComb(document.body, printContent); +};</pre> + +<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3> + +<pre class="brush: js">Element.prototype.removeAll = function () { + while (this.firstChild) { this.removeChild(this.firstChild); } + return this; +};</pre> + +<h4 id="Sample_usage_2">Sample usage</h4> + +<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */ +document.body.removeAll();</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>isSameNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br> + The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br> + Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br> + Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br> + Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>getFeature()</code>{{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br> + Removed in {{CompatGeckoDesktop("7.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>getUserData()</code>, <code>setUserData()</code> and <code>hasAttributes()</code> {{deprecated_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> + Removed in {{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>isSameNode()</code> {{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("9.0")}}.<br> + Removed in {{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>isSupported()</code> {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> + Removed in {{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>attributes</code></td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> + Moved to {{domxref("Element")}} in {{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>getFeature()</code>{{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br> + Removed in {{CompatGeckoDesktop("7.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Webkit and Blink incorrectly do not make <code>Node</code> inherit from {{domxref("EventTarget")}}.</p> diff --git a/files/es/web/api/node/insertarantes/index.html b/files/es/web/api/node/insertarantes/index.html new file mode 100644 index 0000000000..102d4dfbdd --- /dev/null +++ b/files/es/web/api/node/insertarantes/index.html @@ -0,0 +1,172 @@ +--- +title: Node.insertBefore() +slug: Web/API/Node/insertarAntes +tags: + - API + - DOM + - Nodo + - Referencia + - metodo +translation_of: Web/API/Node/insertBefore +--- +<div>{{APIRef("DOM")}}</div> + +<p>El método <strong><code>Node.insertBefore()</code></strong> inserta un nodo antes del nodo de referencia como hijo de un nodo padre indicado. Si el nodo hijo es una referencia a un nodo ya existente en el documento, <code>insertBefore()</code> lo mueve de la posición actual a la nueva posición (no hay necesidad de eliminar el nodo de su nodo padre antes de agregarlo al algún nodo nuevo).</p> + +<p>Esto significa que el nodo no puede estar en dos puntos del documento al simultáneamente. Por lo que si el nodo ya tiene un padre, primero se elimina el nodo, y luego se inserta en la nueva posición. {{domxref("Node.cloneNode()")}} puede utilizarse para hacer una copia de un nodo antes de insertarlo en un nuevo padre. Ten en cuenta que las copias hechas con <code>cloneNode()</code> no se mantendrán sincronizadas automáticamente.</p> + +<p>Si el nodo de referencia es <code>null</code>, el nodo indicado se añadirá al final de la lista de hijos del nodo padre especificado.</p> + +<p>Si el hijo proporcionado es un {{domxref("DocumentFragment")}}, el contenido completo del <code>DocumentFragment</code> se moverá a la lista de hijos del nodo padre indicado.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var <em>insertedNode</em> = <em>parentNode</em>.insertBefore(<em>newNode</em>, <em>referenceNode</em>); +</pre> + +<ul> + <li><code>insertedNode</code> El nodo que esta siendo insertado, es decir, <code>newNode</code></li> + <li><code>parentNode</code> El padre del nodo recién insertado.</li> + <li><code>newNode</code> El nodo a insertar.</li> + <li><code>referenceNode</code> El nodo antes del cual se inserta <code>newNode</code>.</li> +</ul> + +<p>Si <code>referenceNode</code> es <code>null</code>, el <code>newNode</code> se insertará al final de la lista de nodos hijos.</p> + +<div class="note"> +<p><code>referenceNode</code> <strong>no</strong> es un parámetro opcional -- debes pasar explícitamente un <code>Node</code> o <code>null</code>. No proporcionándolo o pasando valores no válidos podría provocar un <a href="https://code.google.com/p/chromium/issues/detail?id=419780">comportamiento</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119489">distinto</a> en diferentes versiones de navegadores.</p> +</div> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>El valor devuelto es el hijo añadido excepto cuando <code>newNode</code> es un {{domxref("DocumentFragment")}}, en cuyo caso se devuelve un {{domxref("DocumentFragment")}}.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Ejemplo_1">Ejemplo 1</h3> + +<pre class="brush: html"><div id="parentElement"> + <span id="childElement">foo bar</span> +</div> + +<script> +// Crear el nodo a insertar +var newNode = document.createElement("span"); + +// Obtener una referencia al nodo padre +var parentDiv = document.getElementById("childElement").parentNode; + +// Comienzo del test [ 1 ] : Existe un childElement --> Todo funciona correctamente +var sp2 = document.getElementById("childElement"); +parentDiv.insertBefore(newNode, sp2); +// Fin del test [ 1 ] + +// Comienzo del test [ 2 ] : childElement no es del tipo undefined +var sp2 = undefined; // No existe un nodo con id "childElement" +parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node +// Fin del test [ 2 ] + +// Comienzo del test [ 3 ] : childElement es de Tipo "undefined" ( string ) +var sp2 = "undefined"; // No existe un nodo con id "childElement" +parentDiv.insertBefore(newNode, sp2); // Genera "Type Error: Invalid Argument" +// Fin del test [ 3 ] +</script> +</pre> + +<h3 id="Ejemplo_2">Ejemplo 2</h3> + +<pre class="brush:html"><div id="parentElement"> + <span id="childElement">foo bar</span> +</div> + +<script> +// Crea un nuevo, elemento <span> +var sp1 = document.createElement("span"); + +// Obtener una referencia al elemento, antes de donde queremos insertar el elemento +var sp2 = document.getElementById("childElement"); +// Obtener una referencia al nodo padre +var parentDiv = sp2.parentNode; + +// Inserta un nuevo elemento en el DOM antes de sp2 +parentDiv.insertBefore(sp1, sp2); +</script> +</pre> + +<p>No existe el método <code>insertAfter()</code>. Puede ser emulado mediante la combinación del método con {{domxref("Node.nextSibling()")}}.</p> + +<p>En el ejemplo anterior, <code>sp1</code> podría insertarse después de <code>sp2</code> usando:</p> + +<pre class="brush: js"><code>parentDiv.insertBefore(sp1, sp2.nextSibling);</code></pre> + +<p>Si <code>sp2</code> no tiene ningún hermano depués de él, entonces debe ser el último hijo — <code>sp2.nextSibling</code> devuelve <code>null</code>, y <code>sp1</code> se inserta al final de la lista de nodos hijos (inmediatamente después de <code>sp2</code>).</p> + +<h3 id="Ejemplo_3">Ejemplo 3</h3> + +<p>Inserta un elemento antes del primer elemento hijo, utilizando la propiedad <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a>.</p> + +<pre class="brush:js">// Obtener una referencia al elemento en el que se quiere insertar un nuevo nodo +var parentElement = document.getElementById('parentElement'); +// Obtener una referencia al primer hijo +var theFirstChild = parentElement.firstChild; + +// Crear un nuevo elemento +var newElement = document.createElement("div"); + +// Insertar el nuevo elemento antes que el primer hijo +parentElement.insertBefore(newElement, theFirstChild); +</pre> + +<p>Cuando el elemento no tiene ub primer hijo, entonces <code style="font-style: normal; line-height: 1.5;">firstChild</code><span style="line-height: 1.5;"> es </span><code style="font-style: normal; line-height: 1.5;">null</code><span style="line-height: 1.5;">. Aun así, el elemento se añade al padre después del último hijo. Puesto que el elemento padre no tenía primer hijo, tampoco tiene último hijo. Por tanto, el nuevo elemento es el único elemento después de ser insertado.</span></p> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{Compat("api.Node.insertBefore")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Corrige errores en el algoritmo de inserción</td> + </tr> + <tr> + <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td>Describe el algoritmo con mayor detalle</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Sin cambios notables</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Sin cambios notables</td> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Introducido</td> + </tr> + </tbody> +</table> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("ParentNode.prepend()")}}</li> +</ul> diff --git a/files/es/web/api/node/issamenode/index.html b/files/es/web/api/node/issamenode/index.html new file mode 100644 index 0000000000..205b6fd222 --- /dev/null +++ b/files/es/web/api/node/issamenode/index.html @@ -0,0 +1,110 @@ +--- +title: Node.isSameNode() +slug: Web/API/Node/isSameNode +translation_of: Web/API/Node/isSameNode +--- +<div>{{APIRef("DOM")}} {{Obsolete_header}}</div> + +<p><code><strong>Node.isSameNode()</strong></code> comprueba si dos nodos son iguales, es decir si hacen referencia al mismo objecto.</p> + +<div class="note"> +<p><strong>Warning:</strong> This method is no longer implemented in recent browsers.</p> + +<pre class="brush:js">// Instead of using +node1.isSameNode(node2) + +// use +node1 === node2 // or +node1 == node2</pre> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var <em>isSameNode</em> = <em>node</em>.isSameNode(<em>other</em>); +</pre> + +<ul> + <li><code>other</code> El nodo contra el cual se realiza la comparación.</li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Eliminado de la especificación.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#Node3-isSameNode', 'Node.isSameNode()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<br> + {{CompatNo}} {{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}<br> + {{CompatNo}} {{CompatGeckoMobile("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{domxref("Node.isEqualNode()")}}</li> +</ul> diff --git a/files/es/web/api/node/lastchild/index.html b/files/es/web/api/node/lastchild/index.html new file mode 100644 index 0000000000..0228c3264c --- /dev/null +++ b/files/es/web/api/node/lastchild/index.html @@ -0,0 +1,65 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +tags: + - API + - DOM + - NecesitaCompatibilidadNavegador + - Propiedad + - Referencia +translation_of: Web/API/Node/lastChild +--- +<div>{{APIRef("DOM")}}</div> + +<p>La propiedad de sólo lectura <code><strong>Node.lastChild</strong></code> devuelve el último hijo del nodo. Si su padre es un elemento, entonces el hijo es generalmente un nodo de element, nodo de texto o un nodo de comentario. Devuelve <code>null</code> si no hay elementos hijos.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var <em>nodoHijo</em>= <var>nodo</var>.lastChild; +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: js">var tr = document.getElementById("row1"); +var corner_td = tr.lastChild; +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-lastchild', 'Node.lastChild')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Sin cambio</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Sin cambio</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Sin cambio</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-61AD09FB', 'Node.lastChild')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegador">Compatibilidad en navegador</h2> + + + +<p>{{Compat("api.Node.lastChild")}}</p> diff --git a/files/es/web/api/node/namespaceuri/index.html b/files/es/web/api/node/namespaceuri/index.html new file mode 100644 index 0000000000..f24b54d713 --- /dev/null +++ b/files/es/web/api/node/namespaceuri/index.html @@ -0,0 +1,145 @@ +--- +title: Node.namespaceURI +slug: Web/API/Node/namespaceURI +tags: + - API + - DOM + - NecesitaCompatilibidadNavegador + - Propiedad + - Referencia + - obsoleta +translation_of: Web/API/Node/namespaceURI +--- +<div>{{APIRef("DOM")}}{{obsolete_header}}</div> + +<p>La propiedad de solo lectura <code><strong>Nodo.namespaceURI</strong></code> devuelve la URI del nodo, o null en caso de que el nodo no tenga espacio de nombres. Cuando el nodo es un documento, este devuelve el espacio de nombres del XML para el documento actual.</p> + +<div class="warning"> +<p>En DOM4 esta API fué movida desde <code>Node</code> a las interficies {{domxref("Element")}} y {{domxref("Attr")}}.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>namespace</var> = <var>node</var>.namespaceURI</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>En este fragmento, un nodo esá siendo examinado por su {{domxref("Node.localName")}} y <code>namespaceURI</code>. Si el <code>namespaceURI</code> devuelve el nombre de espaciosXUL y el <code>localName</code> devuelve "browser", entonces el nodo es entendido a ser un XUL <code><browser/></code>.</p> + +<pre class="brush:js">if (node.localName == "browser" && + node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { + // Este es un navegador XUL +}</pre> + +<h2 id="Notas">Notas</h2> + +<p>Este no es un valor calculado que es el resultado de una búsqueda del espacio de nombres basada en la examinación de las declaraciones de un espacio de nombres en el ámbito. El espacio de nombres URI de un nodo es congelado ene l momento de su creación.</p> + +<p>En Firefox 3.5 y anteriores, el espacio de nombres URI para los elementos HTML en los Documents HTML es <code>null</code>. En versiones psoteriores, en conformidad con HTML5, es <code><a class="external" href="https://www.w3.org/1999/xhtml" rel="freelink">https://www.w3.org/1999/xhtml</a></code> como en XHTML. {{gecko_minversion_inline("1.9.2")}}</p> + +<p>Para nodos de cualquier {{domxref("Node.nodeType")}} distintos de <code>ELEMENT_NODE</code> y <code>ATTRIBUTE_NODE</code> el valor de <code>namespaceURI</code> es siempre <code>null</code>.</p> + +<p>Puedes crear un elemento con un <code>namespaceURI</code> concreto creando un método DOM de nivel 2 {{domxref("Document.createElementNS")}} y atributos con el método {{domxref("Element.setAttributeNS")}}.</p> + +<p>Para la especificación <a class="external" href="https://www.w3.org/TR/xml-names11/">Namespaces in XML</a>, un atributo no hereda su espacio de nombres del elemento al que está sujeto. Si un atributo no es dado de manera explícita como espacio de nombres, entonces no los tiene.</p> + +<p>El DOM no controla ni impone la validación del espacio de nombres. Depende de la aplicación DOM de hacer cualquier tipo de validación necesaria. Destacar también que el prefijo de espacio de nombre, una vez es asociado a un nodo enparticular, no puede ser modificado.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>Specifies the behavior when it's set to <code>null</code>.</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#Namespaces-Considerations", "DOM Level 2 Core: XML Namespaces")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}<br> + {{CompatNo}}46.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup><br> + {{CompatNo}} {{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup><br> + {{CompatNo}} {{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Esta API fue movida a las APIs {{domxref("Element")}} y {{domxref("Attr")}} de acuerdo con el standard de DOM4.</p> + +<p>[2] Antes de Gecko 5.0 {{geckoRelease("5.0")}}, esta propiedad era de lectura-escritura; empezando con Gecko 5.0 es sólo lectura, siguiendo la especificación.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("Node.localName")}}</li> + <li>{{domxref("Node.prefix")}}</li> + <li>{{domxref("Element.namespaceURI")}}</li> + <li>{{domxref("Attr.namespaceURI")}}</li> +</ul> diff --git a/files/es/web/api/node/nextsibling/index.html b/files/es/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..188357f9c6 --- /dev/null +++ b/files/es/web/api/node/nextsibling/index.html @@ -0,0 +1,87 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +tags: + - API + - DOM + - Gecko + - Nodo + - Propiedad +translation_of: Web/API/Node/nextSibling +--- +<div>{{APIRef("DOM")}}</div> + +<p>La propiedad de sólo lectura <strong><code>Node.nextSibling</code></strong> devuelve el siguiente nodo con respecto al indicado en la lista de nodos ({{domxref("Node.childNodes","childNodes")}}) a la que este pertenece o <code>null</code> si el nodo especificado es el último en dicha lista.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><var>siguienteNodo</var> = <var>node</var>.nextSibling +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<div> + +<div><p>Gecko-based browsers insert text nodes into a document to represent whitespace in the source markup. + Therefore a node obtained, for example, using <a href="/es/docs/Web/API/Node/firstChild" title="The Node.firstChild read-only property returns the node's first child in the tree, or null if the node has no children."><code>Node.firstChild</code></a> or <a href="/es/docs/Web/API/Node/previousSibling" title="La propiedad de sólo-lectura Node.previousSibling devuelve el nodo inmediatamente anterior al especificado en la lista de nodos childNodes de su padre, o null si el nodo especificado es el primero en dicha lista."><code>Node.previousSibling</code></a> may refer to a + whitespace text node rather than the actual element the author intended to get.</p> + + <p>See <a href="/en-US/docs/Web/Guide/DOM/Whitespace_in_the_DOM">Whitespace in the DOM</a> and + <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a> + for more information.</p></div> + +<p>{{domxref("Element.nextElementSibling")}} debe ser utilizado para obtener el siguiente elemento ignorando cualquier nodo en blanco.</p> +</div> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="brush:html"><div id="div-01">Este es el div-01</div> +<div id="div-02">Este es el div-02</div> + +<script type="text/javascript"> +var el = document.getElementById('div-01').nextSibling, + i = 1; + +console.log('Hermanos de div-01:'); + +while (el) { + console.log(i + '. ' + el.nodeName); + el = el.nextSibling; + i++; +} + +</script> + +/************************************************** + Lo siguiente se escribe en la consola cuando carga: + + Nodos hermanos del div-01 + + 1. #text + 2. DIV + 3. #text + 4. SCRIPT + +**************************************************/ +</pre> + +<p>En el ejemplo anterior, se puede observar que los nodos <code>#text</code> se insertan en el DOM, donde se produce un espacio en blanco en el marcado entre las etiquetas (es decir, después de la etiqueta de cierre de un elemento y antes de la etiqueta de apertura del siguiente). No se crea ningún espacio en blanco entre los elementos insertados por la sentencia <code>document.write</code>.</p> + +<p>La posible inclusión de los nodos de texto en el DOM se debe permitir cuando se atraviese el DOM utilizando <code>nextSibling</code>. Vea los recursos en la sección Notas.</p> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a></li> +</ul> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{Compat("api.Node.nextSibling")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("Element.nextElementSibling")}}</li> +</ul> diff --git a/files/es/web/api/node/nodename/index.html b/files/es/web/api/node/nodename/index.html new file mode 100644 index 0000000000..5865b21e21 --- /dev/null +++ b/files/es/web/api/node/nodename/index.html @@ -0,0 +1,107 @@ +--- +title: element.nodeName +slug: Web/API/Node/nodeName +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Node/nodeName +--- +<div>{{APIRef("DOM")}}</div> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>Devuelve el nombre del nodo actual, en forma de cadena.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">var<em>str</em> =<em>node</em>.nodeName; +</pre> + +<p><code>str</code> es una variable de cadena en la que se almacena el nombre del elemento actual.</p> + +<p><code>nodeName</code> es un atributo de solo-lectura.</p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>Aquí tenemos el valor devuelto por varios tipos de nodo.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th class="header" style="text-align: center;">Interfaz</th> + <th class="header" style="text-align: center;">nodeName</th> + </tr> + <tr> + <td><a href="es/DOM/Attr">Attr</a></td> + <td>igual que <code><a href="es/DOM/Attr.name">Attr.name</a></code></td> + </tr> + <tr> + <td><a href="es/DOM/CDATASection">CDATASection</a></td> + <td>"#cdata-section"</td> + </tr> + <tr> + <td><a href="es/DOM/Comment">Comment</a></td> + <td>"#comment"</td> + </tr> + <tr> + <td><a href="es/DOM/document">Document</a></td> + <td>"#document"</td> + </tr> + <tr> + <td><a href="es/DOM/DocumentFragment">DocumentFragment</a></td> + <td>"#document-fragment"</td> + </tr> + <tr> + <td><a href="es/DOM/DocumentType">DocumentType</a></td> + <td>igual que <code><a href="es/DOM/DocumentType.name">DocumentType.name</a></code></td> + </tr> + <tr> + <td><a href="es/DOM/element">Element</a></td> + <td>igual que <code><a href="es/DOM/element.tagName">Element.tagName</a></code></td> + </tr> + <tr> + <td><a href="es/DOM/Entity">Entity</a></td> + <td>nombre de entity</td> + </tr> + <tr> + <td><a href="es/DOM/EntityReference">EntityReference</a></td> + <td>nombre de la identidad de referencia</td> + </tr> + <tr> + <td><a href="es/DOM/Notation">Notation</a></td> + <td>nombre de la notación</td> + </tr> + <tr> + <td><a href="es/DOM/ProcessingInstruction">ProcessingInstruction</a></td> + <td>igual que <code><a href="es/DOM/ProcessingInstruction.target">ProcessingInstruction.target</a></code></td> + </tr> + <tr> + <td>Text</td> + <td>"#text"</td> + </tr> + </tbody> +</table> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<p>Dado el siguiente código:</p> + +<pre><div id="d1">hola mundo</div> +<input type="text" id="t"/> +</pre> + +<p>y el siguiente script:</p> + +<pre>var div1 = document.getElementById("d1"); +var text_field = document.getElementById("t"); +text_field.value = div1.nodeName; +</pre> + +<p>En XHTML (o alguna otra forma de XML) el valor de <code>text_field</code> será "div". Sin embargo, en HTML, el valor de <code>text_field</code> sería "DIV".</p> + +<p>Ten en cuenta que podríamos haber usado la propiedad <code><a href="es/DOM/element.tagName">tagName</a></code> en su lugar, ya que <code>nodeName</code> tiene el mismo valor que <code>tagName</code> para un elemento. Presta atención, sin embargo, a que <code>nodeName</code> devolverá <code>#text</code> para los nodos de texto, mientras que <code>tagName</code> devolverá <code>undefined</code>.</p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></p> diff --git a/files/es/web/api/node/nodetype/index.html b/files/es/web/api/node/nodetype/index.html new file mode 100644 index 0000000000..1a1f28ac39 --- /dev/null +++ b/files/es/web/api/node/nodetype/index.html @@ -0,0 +1,95 @@ +--- +title: Node.nodeType +slug: Web/API/Node/nodeType +translation_of: Web/API/Node/nodeType +--- +<div> +<div>{{APIRef("DOM")}}</div> + +<div>La propiedad de solo lectura <code style="font-style: normal;"><strong>Node.nodeType</strong></code> retornará un valor positivo entero representando el tipo de nodo.</div> + +<div> </div> +</div> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox">var <var>type</var> = <var>node</var>.nodeType; +</pre> + +<p>la variable type será un entero positivo con alguno de los siguientes valores:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Name</th> + <th scope="col">Value</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/API/Element"><code>ELEMENT_NODE</code></a></td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td> + <td><code>2</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/API/Text"><code>TEXT_NODE</code></a></td> + <td><code>3</code></td> + </tr> + <tr> + <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td> + <td><code>4</code></td> + </tr> + <tr> + <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td> + <td><code>6</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/API/ProcessingInstruction"><code>PROCESSING_INSTRUCTION_NODE</code></a></td> + <td><code>7</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/API/document.createComment"><code>COMMENT_NODE</code></a></td> + <td><code>8</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/HTML/Element/html"><code>DOCUMENT_NODE</code></a></td> + <td><code>9</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/API/document.doctype"><code>DOCUMENT_TYPE_NODE</code></a></td> + <td><code>10</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/API/DocumentFragment"><code>DOCUMENT_FRAGMENT_NODE</code></a></td> + <td><code>11</code></td> + </tr> + <tr> + <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td> + <td><code>12</code></td> + </tr> + </tbody> +</table> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<p>Este es un ejemplo que verifica si el primer nodo dentro de un elemento tipo documento (document) es un comentario nodo, y si no lo es, muestra un mensaje.</p> + +<pre class="brush: js">var node = document.documentElement.firstChild; +if (node.nodeType != Node.COMMENT_NODE) + console.log("You should comment your code well!"); +</pre> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-111237558">DOM Level 2 Core: Node.nodeType</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-111237558">DOM Level 3 Core: Node.nodeType</a></li> + <li><a class="external" href="http://dom.spec.whatwg.org/#node">DOM Standard</a></li> +</ul> diff --git a/files/es/web/api/node/nodevalue/index.html b/files/es/web/api/node/nodevalue/index.html new file mode 100644 index 0000000000..418cecdb77 --- /dev/null +++ b/files/es/web/api/node/nodevalue/index.html @@ -0,0 +1,86 @@ +--- +title: Node.nodeValue +slug: Web/API/Node/nodeValue +translation_of: Web/API/Node/nodeValue +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>La propiedad <code><strong>Nodo.nodeValue</strong></code> devuelve o actualiza el valor del nodo actual.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><em>valor</em>= <var>nodo</var>.nodeValue; +</pre> + +<p><code>valor</code> es una cadena contenedora del valor del nodo actual, si es que tiene alguno.</p> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Para el nodo en si, <code>nodeValue</code> devuelve <code>null</code>. Para texto, comentarios, y nodos CDATA, <code>nodeValue</code> devuelve el contenido de dicho nodo. Para nodos atributos, el valor del atributo es devuelto.</p> + +<p>La siguiente table muestra los distintos valores retornados por los diferentes elementos.</p> + +<table> + <thead> + <tr> + <th>Atributo</th> + <th>valor del atributo</th> + </tr> + </thead> + <tbody> + <tr> + <td>CDATASection</td> + <td>contenido de la sección CDATA</td> + </tr> + <tr> + <td>Comment</td> + <td>Contenido del comentario</td> + </tr> + <tr> + <td>Document</td> + <td>null</td> + </tr> + <tr> + <td>DocumentFragment</td> + <td>null</td> + </tr> + <tr> + <td>DocumentType</td> + <td>null</td> + </tr> + <tr> + <td>Element</td> + <td>null</td> + </tr> + <tr> + <td>NamedNodeMap</td> + <td>null</td> + </tr> + <tr> + <td>EntityReference</td> + <td>null</td> + </tr> + <tr> + <td>Notation</td> + <td>null</td> + </tr> + <tr> + <td>ProcessingInstruction</td> + <td>Todo el contexto excluyendo el objetivo</td> + </tr> + <tr> + <td>Text</td> + <td>Contenido del nodo de texto</td> + </tr> + </tbody> +</table> + +<p>Cuando <code>nodeValue</code> es definido como <code>null</code>, actualizarlo no tiene efecto.</p> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a></li> +</ul> diff --git a/files/es/web/api/node/nodoprincipal/index.html b/files/es/web/api/node/nodoprincipal/index.html new file mode 100644 index 0000000000..55f02037bb --- /dev/null +++ b/files/es/web/api/node/nodoprincipal/index.html @@ -0,0 +1,33 @@ +--- +title: Nodo.nodoPrincipal +slug: Web/API/Node/nodoPrincipal +tags: + - API + - DOM + - Gecko + - Propiedad +translation_of: Web/API/Node +--- +<div> +<div>{{APIRef("DOM")}}</div> +{{Non-standard_header}} + +<p>La propiedad de solo loctura de <code><strong>Nodo.nodePrincipal</strong></code> devuelve el objeto {{Interface("nsIPrincipal")}} representando el contexto de seguridad del nodo actual.</p> + +<p>{{Note("This property exists on all nodes (HTML, XUL, SVG, MathML, etc.), but only if the script trying to use it has chrome privileges.")}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><em>principalObj</em> = element.nodePrincipal +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Esta propiedad es de solo lectura; Si intentamos editarla nos lanzará una excepción. Además, esta propiedad tan solo debería ser accesible desde código privilegiado</p> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<p>No hay especificaciones.</p> +</div> + +<p> </p> diff --git a/files/es/web/api/node/ownerdocument/index.html b/files/es/web/api/node/ownerdocument/index.html new file mode 100644 index 0000000000..b1213ac818 --- /dev/null +++ b/files/es/web/api/node/ownerdocument/index.html @@ -0,0 +1,118 @@ +--- +title: Node.ownerDocument +slug: Web/API/Node/ownerDocument +tags: + - API + - DOM + - Nodo + - Propiedad + - Referencia +translation_of: Web/API/Node/ownerDocument +--- +<div>{{APIRef("DOM")}}</div> + +<p>La propiedad de lectura <code><strong>ownerDocument</strong></code> de la interfaz {{domxref("Node")}} devuelve el objeto Document de más alto nivel/jerarquia para ese nodo.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>var document</var> = <var>element</var>.ownerDocument; +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p><code>document</code> es el objeto {{domxref("Document")}} de más alto nivel, con el que todos los nodos descendientes se crean. Si la propiedad se usa en un nodo que el mismo es un Document, el resultado es <code>null</code>.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush:js">// dado un nodo "p", coge el hijo que tenga la más alta jerarquia +// del objeto Document + +var d = p.ownerDocument; +var html = d.documentElement; + +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Especificación</th> + <th>Estado</th> + <th>Comentario</th> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>6.0<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Starting in Gecko 9.0 {{geckoRelease("9.0")}}, the <code>ownerDocument</code> of doctype nodes (that is, nodes for which {{domxref("Node.nodeType")}} is <code>Node.DOCUMENT_TYPE_NODE</code> or 10) is no longer <code>null</code>. Instead, the <code>ownerDocument</code> is the document on which <a href="/en-US/docs/DOM/DOMImplementation.createDocumentType"><code>document.implementation.createDocumentType()</code></a> was called.</p> + +<p>[2] <a href="http://msdn.microsoft.com/en-us/library/ie/ms534315(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/ms534315(v=vs.85).aspx</a></p> diff --git a/files/es/web/api/node/parentnode/index.html b/files/es/web/api/node/parentnode/index.html new file mode 100644 index 0000000000..62bf77c4ff --- /dev/null +++ b/files/es/web/api/node/parentnode/index.html @@ -0,0 +1,105 @@ +--- +title: Node.parentNode +slug: Web/API/Node/parentNode +translation_of: Web/API/Node/parentNode +--- +<div> +<div>{{APIRef("DOM")}}</div> + +<div> </div> +</div> + +<p>La propiedad de sólo lectura <code><strong>node.parentNode</strong></code> devuelve el padre del nodo especificado en el árbol.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre><em>parentNode</em> = <em>node</em>.parentNode</pre> + +<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">parentNode</span></font> es el padre del nodo actual. El padre de un elemento es un nodo del tipo <code>Element</code>, un nodo <code>Document</code>, o un nodo <code>DocumentFragment.</code></p> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="brush:js">if (node.parentNode) { + // Borra un nodo del árbol a no ser que + // esté ya en el árbol + node.parentNode.removeChild(node); +}</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Los nodos del tipo <code>Document</code> y <code>DocumentFragment</code> nunca van a tener un elemento padre, <code>parentNode</code> devolverá siempre <code>null</code>.</p> + +<p>También devuelve <code>null</code> si el nodo acaba de ser creado y no está atado/incorporado al árbol.</p> + +<h2 id="Compatiblidad_de_navegador">Compatiblidad de navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>0.2</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li> +</ul> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{Domxref("Node.firstChild")}}</li> + <li>{{Domxref("Node.lastChild")}}</li> + <li>{{Domxref("Node.childNodes")}}</li> + <li>{{Domxref("Node.nextSibling")}}</li> + <li>{{Domxref("Node.parentElement")}}</li> + <li>{{Domxref("Node.previousSibling")}}</li> + <li>{{Domxref("Node.removeChild")}}</li> +</ul> diff --git a/files/es/web/api/node/previoussibling/index.html b/files/es/web/api/node/previoussibling/index.html new file mode 100644 index 0000000000..e537d09a23 --- /dev/null +++ b/files/es/web/api/node/previoussibling/index.html @@ -0,0 +1,63 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +tags: + - API + - DOM + - Gecko + - Propiedad +translation_of: Web/API/Node/previousSibling +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>La propiedad de sólo-lectura <code><strong>Node.previousSibling</strong></code> devuelve el nodo inmediatamente anterior al especificado en la lista de nodos {{domxref("Node.childNodes", "childNodes")}} de su padre, o <code>null</code> si el nodo especificado es el primero en dicha lista.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><var>nodoAnterior</var> = <em>nodo</em>.previousSibling; +</pre> + +<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2> + +<pre class="brush: html"><img id="b0"> +<img id="b1"> +<img id="b2"></pre> + +<pre class="brush:js">console.log(document.getElementById("b1").previousSibling); // <img id="b0"> +console.log(document.getElementById("b2").previousSibling.id); // "b1" +</pre> + +<h2 id="Notas" name="Notas">Notas</h2> + + +<div><p>Gecko-based browsers insert text nodes into a document to represent whitespace in the source markup. + Therefore a node obtained, for example, using <a href="/es/docs/Web/API/Node/firstChild" title="The Node.firstChild read-only property returns the node's first child in the tree, or null if the node has no children."><code>Node.firstChild</code></a> or <a href="/es/docs/Web/API/Node/previousSibling" title="La propiedad de sólo-lectura Node.previousSibling devuelve el nodo inmediatamente anterior al especificado en la lista de nodos childNodes de su padre, o null si el nodo especificado es el primero en dicha lista."><code>Node.previousSibling</code></a> may refer to a + whitespace text node rather than the actual element the author intended to get.</p> + + <p>See <a href="/en-US/docs/Web/Guide/DOM/Whitespace_in_the_DOM">Whitespace in the DOM</a> and + <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a> + for more information.</p></div> + +<p>Para navegar en el sentido opuesto de la lista de nodos hijos se utiliza <a href="/en-US/docs/Web/API/Node.nextSibling" title="DOM/Node.nextSibling">Node.nextSibling</a>.</p> + +<h2 id="Especificación" name="Especificación">Especificación</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li> +</ul> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("api.Node.previousSibling")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("Node.nextSibling")}}</li> +</ul> diff --git a/files/es/web/api/node/removechild/index.html b/files/es/web/api/node/removechild/index.html new file mode 100644 index 0000000000..423d482bb6 --- /dev/null +++ b/files/es/web/api/node/removechild/index.html @@ -0,0 +1,94 @@ +--- +title: Node.removeChild() +slug: Web/API/Node/removeChild +translation_of: Web/API/Node/removeChild +--- +<div> +<div><font><font><font><font><font><font><font><font><font><font>{{APIRef ( "DOM")}}</font></font></font></font></font></font></font></font></font></font></div> + +<p class="syntaxbox">El método <strong><code>Node.removeChild() </code></strong>elimina un nodo hijo del DOM y puede devolver el nodo eliminado.</p> + +<h2 class="syntaxbox" id="Sintaxis">Sintaxis</h2> + +<div> +<pre class="syntaxbox"><em>var antiguoHijo </em>= <em>elemento</em>.removeChild(child); +<strong>O</strong> +<em>elemento</em>.removeChild(<code>child</code>);</pre> +</div> +</div> + +<ul> + <li><code>child</code> <code> </code>es el nodo hijo a eliminar del DOM.</li> + <li><code>elemento </code>es el nodo padre de <code>hijo</code>.(ver nota mas abajo)</li> + <li><code>antiguoHijo</code> tiene una referencia al hijo eliminado. <code>antiguoHijo === </code> <code>child</code>.</li> +</ul> + +<p>El hijo(child) eliminado aún existe en memoria pero ya no es parte del DOM. Con la primera forma de sintaxis mostrada, se puede reutilizar el nodo eliminado más tarde en el código, por medio de la referencia al objeto <code>antiguoHijo</code>. Sin embargo, en la segunda forma, la referencia a <code>antiguoHijo</code> se pierde, y suponiendo que el código no mantenga una referencia a ese objeto en alguna otra parte, inmediatamente será inutilizable e irrecuperable y será <a href="es/docs/Web/JavaScript/Gestion_de_Memoria">eliminada automáticamente </a>de memoria después de poco tiempo.</p> + +<p>Si hijo(<code>child)</code> no es en realidad hijo del nodo <code>elemento</code>, el método lanza una excepción. Esto también sucederá si <code>child </code>es en realidad hijo de <code>elemento </code>al momento de llamar al método, pero fue eliminado por un controlador(manejador) de eventos(event handler) invocado en el curso de tratar de eliminar el elemento. (e.g. blur).</p> + +<p>Por lo tanto el método removeChild(child) lanza una excepción de 2 casos diferentes: </p> + +<p style="margin-left: 36.0pt; text-indent: -18.0pt;"><span style="">1.<span style='font: 7.0pt "Times New Roman";'> </span></span>Si child es un hijo del elemento y por lo tanto existe en el DOM, pero se retiró el método lanza la siguiente excepción:</p> + +<p style="margin-left: 36.0pt;"><code><span lang="EN-US" style='font-family: "Cambria Math","serif"; font-size: 10.0pt;'></span></code><code><span lang="EN-US" style="font-size: 10.0pt;">Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node</span></code><span lang="EN-US" style=""><font><font>.</font></font></span></p> + +<p style="margin-left: 36.0pt; text-indent: -18.0pt;"><span style="">2.<span style='font: 7.0pt "Times New Roman";'> </span></span>Si <code><span style="font-size: 10.0pt;">child</span></code> no existe en el DOM de la página, el método emite la siguiente excepción:<br> + <br> + <code><span style="font-size: 10.0pt;">Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.</span></code></p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><!--Ejemplo 1 HTML--> +<div id="top" align="center"> </div></pre> + +<pre class="brush: js"><!--Javascript--> +// El método lanza la excepción correspondiente al (caso 2) +var top = document.getElementById("top"); +var nested = document.getElementById("nested"); +var garbage = top.removeChild(nested);</pre> + +<pre class="brush: html"><font><font><font><font><font><font><font><font><!--Ejemplo 2 </font></font></font></font></font><font><font><font><font><font>HTML--> +</font></font></font></font><font><font><font><font><font><font><div id="top"</font></font></font></font></font></font></font></font></font></font><font><font><font><font><font><font><font><font><font><font>></font></font></font></font><font><font> + <div id="anidados"></div> </font></font></font></font></font></font></font></font><font><font><font><font><font><font><font><font> +</div></font></font></font></font></font></font></font></font></pre> + +<pre class="brush: js"><font><font><!--Javascript--></font></font> +// Eliminando un elemento específico cuando se conoce su nodo padre<font><font> +var d = document.getElementById("top");</font></font><font><font> +var d_nested = document.getElementById("anidados");</font></font><font><font> +var throwawayNode = d.removeChild(d_nested);</font></font></pre> + +<pre class="brush:js"><font><font><!--Javascript--></font></font> +// Eliminando un elemento específico utilizando la propiedad parentNode, que siempre hace referencia al nodo padre de un nodo <strong>(nodoHijo.parentNode.)</strong>. +<font><font>nodo var = document.getElementById("anidados");</font></font><font><font> +if (node.parentNode) {</font></font><font><font> + node.parentNode.removeChild(nodo);</font></font> +}</pre> + +<pre class="brush:js"><font><font><!--Javascript--></font></font> +// Eliminando todos los hijos de un elemento<font><font> +elemento var = document.getElementById("top");</font></font><font><font> +while (element.firstChild) {</font></font><font><font> + element.removeChild(element.firstChild);</font></font><font><font> +}</font></font></pre> + +<h2 id="Notas"><strong><font><font>Notas:</font></font></strong></h2> + +<p><code><strong>removeChild()</strong></code> se debe invocar sobre el nodo padre del nodo que se va a eliminar.</p> + +<h2 id="Especificación">Especificación</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild"><font><font>DOM Nivel 1 Core: removeChild</font></font></a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066"><font><font>DOM Nivel 2 Core: removeChild</font></font></a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066"><font><font>DOM Nivel 3 Core: removeChild</font></font></a></li> +</ul> + +<h2 id="See_also" name="See_also">Vea también</h2> + +<ul> + <li><font><font><font><font><font><font><font><font><font><font>{{Domxref ( "Node.replaceChild")}}</font></font></font></font></font></font></font></font></font></font></li> + <li><font><font><font><font><font><font><font><font><font><font>{{Domxref ( "Node.parentNode")}}</font></font></font></font></font></font></font></font></font></font></li> + <li><font><font><font><font><font><font><font><font><font><font>{{Domxref ( "ChildNode.remove")}}</font></font></font></font></font></font></font></font></font></font></li> +</ul> diff --git a/files/es/web/api/node/replacechild/index.html b/files/es/web/api/node/replacechild/index.html new file mode 100644 index 0000000000..e93f025bd9 --- /dev/null +++ b/files/es/web/api/node/replacechild/index.html @@ -0,0 +1,73 @@ +--- +title: Node.replaceChild() +slug: Web/API/Node/replaceChild +tags: + - API + - DOM + - Nodo + - Referencia + - metodo +translation_of: Web/API/Node/replaceChild +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>El método <strong><code>Node.replaceChild()</code></strong> reemplaza un nodo hijo del elemento especificado por otro.</p> + +<h2 id="Syntax" name="Syntax">Sintáxis</h2> + +<pre class="syntaxbox"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>); +</pre> + +<ul> + <li><code>newChild</code> es el nuevo nodo con el que reemplazar <code>oldChild</code>. Si ya existe en el DOM, será eliminado previamente.</li> + <li><code>oldChild</code> es el nodo existente para ser reemplazado.</li> + <li><code>replacedNode</code> es el nodo reemplazado. Es el mismo nodo que <code>oldChild</code>.</li> +</ul> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="brush:js">// <div> +// <span id="childSpan">foo bar</span> +// </div> + +// crear un nodo con un elemento vacío +// sin ID, atributos, ni contenido +var sp1 = document.createElement("span"); + +// darle un atributo id llamado 'newSpan' +sp1.setAttribute("id", "newSpan"); + +// crear algún contenido para el nuevo elemento +var sp1_content = document.createTextNode("Nuevo elemento span para reemplazo."); + +// aplicar dicho contenido al nuevo elemento +sp1.appendChild(sp1_content); + +// construir una referencia al nodo existente que va a ser reemplazado +var sp2 = document.getElementById("childSpan"); +var parentDiv = sp2.parentNode; + +// reemplazar el nodo sp2 existente con el nuevo elemento span sp1 +parentDiv.replaceChild(sp1, sp2); + +// resultado: +// <div> +// <span id="newSpan">Nuevo elemento span para reemplazo.</span> +// </div> +</pre> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li> +</ul> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{domxref("Node.removeChild")}}</li> +</ul> diff --git a/files/es/web/api/node/textcontent/index.html b/files/es/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..46586e89d5 --- /dev/null +++ b/files/es/web/api/node/textcontent/index.html @@ -0,0 +1,98 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +translation_of: Web/API/Node/textContent +--- +<div>{{APIRef("DOM")}}</div> + +<p>La propiedad <strong><code>textContent</code></strong> de la interfaz {{domxref("Node")}} representa el contenido de texto de un nodo y sus dencendientes.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> <code>textContent</code> y {{domxref("HTMLElement.innerText")}} son confundidos con facilidad, pero <a href="#Diferencias_con_innerText">ambos son diferentes en varias formas importantes</a>.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var <em>text</em> = <em>Node</em>.textContent; +<em>Node</em>.textContent = <em>string</em>; +</pre> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Una cadena de texto o <code>null</code></p> + +<h2 id="Descripción">Descripción</h2> + +<p>Al obtener esta propiedad:</p> + +<ul> + <li>Si el nodo es un <a href="/es/docs/Web/API/Document">documento</a>, un <a href="/es/docs/Glossary/Doctype">DOCTYPE</a>, o una <a href="/en-US/docs/Web/API/Notation">notation</a>, <code>textContent</code> devuelve <code>null</code>. (Para obtener todo el texto y los datos de <a href="/en-US/docs/Web/API/CDATASection">CDATA data</a> del documento completo, uno podría usar <code><a href="/en-US/docs/DOM/document.documentElement">document.documentElement</a>.textContent</code>.)</li> + <li>Si el nodo es una <a href="/en-US/docs/Web/API/CDATASection">sección CDATA</a>, un comentario, una <a href="/en-US/docs/Web/API/ProcessingInstruction">instrucción de procesamiento</a>, o un <a href="/es/docs/Web/API/Document/createTextNode">nodo de texto</a>, <code>textContent</code> devuelve el texto dentro del nodo, por ejemplo, el {{domxref("Node.nodeValue")}}.</li> + <li>Para otros tipos de nodos, <code>textContent</code> retorna la concatenación del atributo <code>textContent</code> de todos los nodos hijos, excluyendo los nodos comentario y los nodos de instrucciones. Esto es una cadena vacía si el nodo no tiene hijos.</li> +</ul> + +<p>Estableciendo <code>textContent</code> en un nodo elimina todos sus hijos y los reemplaza con un solo nodo de texto con el valor dado.</p> + +<h3 id="Diferencias_con_innerText">Diferencias con innerText</h3> + +<p>Internet Explorer introdujo <code>elemento.innerText</code>. La intención es muy parecida, con un par de diferencias:</p> + +<ul> + <li>Note que mientras <code>textContent</code> lee el contenido de todos los elementos, incluyendo los elementos {{HTMLElement("script")}} y {{HTMLElement("style")}}, <code>innerText</code>, no.</li> + <li><code>innerText</code> también tiene en cuenta el estilo y no retornará el texto de elementos escondidos, mientras que <code>textContent</code> sí lo hará.</li> + <li>Como <code>innerText</code> tiene en cuenta el estilo CSS, escribirlo disparará un reflow, mientras que <code>textContent</code> no lo hará.</li> +</ul> + +<h3 id="Diferencias_con_innerHTML">Diferencias con innerHTML</h3> + +<p><code>innerHTML</code> retorna el HTML como su nombre indica. Con bastante frecuencia, para leer o escribir texto en un elemento, la gente usa <code>innerHTML</code>. <code>textContent</code> debería usarse en su lugar. Ya que el texto no es procesado es más probable que tenga mejor rendimiento. Además, esto evita un vector de ataques XSS.</p> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="brush: js">// Dado el siguiente fragmento HTML: +// <div id="divA">Esto <span>es</span>un texto</div> + +// Lee el contenido textual: +var text = document.getElementById("divA").textContent; +// |text| contiene la cadena "Esto es un texto". + +// Escribe el contenido textual: +document.getElementById("divA").textContent = "Esto es un nuevo texto"; +// El HTML "divA" ahora contiene una nueva cadena: +// <div id="divA">Esto es un nuevo texto</div> +</pre> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("api.Node.textContent")}}</p> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Sin cambios desde DOM 4</td> + </tr> + <tr> + <td>{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Introducido</td> + </tr> + </tbody> +</table> + +<p> </p> |