diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2021-07-06 12:07:28 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-07-06 12:07:28 -0400 |
| commit | 4f70db6399a732ca7571c6c8cb952be7c9a85763 (patch) | |
| tree | 3a8b67ddf3790f32902d686e4939abedb7c97578 /files/es/orphaned/web/api | |
| parent | a0526cb59dfc2de8f87f12e09d9fa6bf2fca6c92 (diff) | |
| download | translated-content-4f70db6399a732ca7571c6c8cb952be7c9a85763.tar.gz translated-content-4f70db6399a732ca7571c6c8cb952be7c9a85763.tar.bz2 translated-content-4f70db6399a732ca7571c6c8cb952be7c9a85763.zip | |
delete conflicting/orphaned in es (#1418)
Diffstat (limited to 'files/es/orphaned/web/api')
23 files changed, 0 insertions, 2964 deletions
diff --git a/files/es/orphaned/web/api/abstractworker/index.html b/files/es/orphaned/web/api/abstractworker/index.html deleted file mode 100644 index a2ffb4c950..0000000000 --- a/files/es/orphaned/web/api/abstractworker/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: AbstractWorker -slug: orphaned/Web/API/AbstractWorker -translation_of: Web/API/AbstractWorker -original_slug: Web/API/AbstractWorker ---- -<p>{{ APIRef("Web Workers API") }}</p> - -<p>La interfaz <strong><code>AbstractWorker</code></strong> de la <a href="/en-US/docs/Web/API/Web_Workers_API">API de Web Workers</a> es una interfaz abstracta que define propiedades métodos comunes a toda clase de workers, no sólo al {{domxref("Worker")}} básico sino también el {{domxref("ServiceWorker")}} y el {{domxref("SharedWorker")}}.<br> - Al ser una clase abstracta, usted no interactúa directamente con el <code>AbstractWorker</code>.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<p><em>La interfaz <code>AbstractWorker</code></em><em> no hereda ninguna propiedad.</em></p> - -<h3 id="Gestor_de_eventos">Gestor de eventos</h3> - -<dl> - <dt>{{domxref("AbstractWorker.onerror")}}</dt> - <dd>Es un {{ domxref("EventListener") }} el cual es invocado siempre que un {{domxref("ErrorEvent")}} de tipo <code>error</code> se gatilla através del worker.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<p><em>La interfaz <code>AbstractWorker</code></em><em> no implementa o hereda ningún método.</em></p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>Note que usted no estará usando la interfaz <code>AbstractWorker</code> diractamente en su código — cuando es invocada, {{domxref("Worker")}} y {{domxref("SharedWorker")}} heredan sus propiedades.</p> - -<p>El siguiente fragmento de código muestra la creación de un objeto {{domxref("Worker")}} usando el constructor {{domxref("Worker.Worker", "Worker()")}} , junto con la forma de uso del objeto creado:</p> - -<pre class="brush: js">var myWorker = new Worker("worker.js"); - -first.onchange = function() { - myWorker.postMessage([first.value,second.value]); - console.log('Mensaje enviado al worker'); -}</pre> - -<p>El código del worker se carga desde el archivo <code>"worker.js"</code>. Éste código asume que hay un elemento del tipo {{HTMLElement("input")}} representado como <code>first</code>; un gestor de evento para el evento {{domxref("change")}} se define para que cuando el usuario cambie el valor de <code>first</code>, un mensaje se enviará al worker haciendoselo saber.</p> - -<p>Para ejemplos completos, visitar:</p> - -<ul> - <li><a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</li> - <li><a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>).</li> -</ul> - -<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("HTML WHATWG", "#the-abstractworker-abstract-interface", "AbstractWorker")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>No existen cambios para {{SpecName("Web Workers")}}.</td> - </tr> - <tr> - <td>{{SpecName("Web Workers", "#the-abstractworker-abstract-interface", "AbstractWorker")}}</td> - <td>{{Spec2("Web Workers")}}</td> - <td>Definición inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2> - -<div>{{CompatibilityTable()}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatChrome(4)}}</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>10</td> - <td>10.6</td> - <td>4</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>4.4</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>1.0.1</td> - <td>10</td> - <td>11.5</td> - <td>5.1</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Vease_también">Vease también</h2> - -<ul> - <li>Las interfaces de {{domxref("Worker")}}, {{domxref("ServiceWorker")}} y {{domxref("SharedWorker")}}, que están basadas en el <code>AbstractWorker</code> .</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Usando Web Workers</a></li> -</ul> diff --git a/files/es/orphaned/web/api/ambient_light_events/index.html b/files/es/orphaned/web/api/ambient_light_events/index.html deleted file mode 100644 index 79f4c1ef65..0000000000 --- a/files/es/orphaned/web/api/ambient_light_events/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Luz Ambiental Eventos -slug: orphaned/Web/API/Ambient_Light_Events -translation_of: Web/API/Ambient_Light_Events -original_slug: Web/API/Ambient_Light_Events ---- -<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div> - -<p>Los eventos de luz ambiental son una forma práctica de hacer una página web o una aplicación al tanto de cualquier cambio en la intensidad de la luz. Se les permite reaccionar a un cambio de este tipo, por ejemplo, cambiando el contraste de color de la interfaz de usuario (UI) o cambiando la exposición necesaria para tomar una foto.</p> - -<h2 id="Eventos_de_luz"><span class="short_text" id="result_box" lang="es"><span>Eventos</span> <span>de luz</span></span></h2> - -<p>Cuando el sensor de luz de un dispositivo detecta un cambio en el nivel de luz, notifica al navegador de ese cambio. Cuando el navegador recibe dicha notificación, se dispara un {{domxref ( "DeviceLightEvent")}} evento que proporciona información sobre la intensidad de la luz exacta.</p> - -<p>Este evento puede ser capturado en el plano objeto de la ventana mediante el uso de la {{domxref ( "EventTarget.addEventListener", "addEventListener")}} El método (usando el {{event( "devicelight")}} nombre del evento) o adjuntando una controlador de eventos al {{domxref ( "window.ondevicelight")}} propiedad.</p> - -<p>Una vez capturado, el objeto de evento da acceso a la intensidad de la luz expresada en lux a través de la {{domxref ( "DeviceLightEvent.value")}} propiedad.</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<pre class="brush: js">if ('ondevicelight' in window) { - window.addEventListener('devicelight', function(event) { - var body = document.querySelector('body'); - if (event.value < 50) { - body.classList.add('darklight'); - body.classList.remove('brightlight'); - } else { - body.classList.add('brightlight'); - body.classList.remove('darklight'); - } - }); -} else { - console.log('devicelight event not supported'); -} -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <td>Especificaciones</td> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("AmbientLight", "", "Ambient Light Events")}}</td> - <td>{{Spec2("AmbientLight")}}</td> - <td>definición inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_del_Navegador">Compatibilidad del Navegador</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>{{domxref("DeviceLightEvent")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("22.0")}}<sup>[1]</sup></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>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{domxref("DeviceLightEvent")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("15.0")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] The {{event("devicelight")}} event is implemented and preference enabled by default in Firefox Mobile for Android (15.0) and in Firefox OS (B2G). Starting with Gecko 22.0 {{geckoRelease("22.0")}} a desktop implementation for Mac OS X is also available. Support for Windows 7 is in progress (see {{bug(754199)}}).</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("DeviceLightEvent")}}</li> - <li>{{event("devicelight")}}</li> -</ul> diff --git a/files/es/orphaned/web/api/body/formdata/index.html b/files/es/orphaned/web/api/body/formdata/index.html deleted file mode 100644 index a7cb72413c..0000000000 --- a/files/es/orphaned/web/api/body/formdata/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Body.formData() -slug: orphaned/Web/API/Body/formData -tags: - - API - - BODY - - Experimental - - Fetch - - Fetch API - - FormData - - Method - - NeedsExample - - Reference -translation_of: Web/API/Body/formData -original_slug: Web/API/Body/formData ---- -<div>{{APIRef("Fetch")}}</div> - -<p>El método <strong><code>formData()</code></strong> de {{domxref("Body")}} mixin toma una cadena {{domxref("Response")}} y la lee completamente. Esto devuelve una promesa que resuelve con un objeto {{domxref("FormData")}}.</p> - -<div class="note"> -<p><strong>Nota</strong>: Esto es principalmente relevante en <a href="/en-US/docs/Web/API/ServiceWorker_API">service workers</a>. Si un usuario envia un formulario y un service worker intercepta el request, tu por ejemplo podrás llamar a <code>formData()</code> para obtener un mapeo del tipo llave-valor, modificar algunos campos, luego enviar el formulario al servidor (o utilizarlo localmente).</p> -</div> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">response.formData() -.then(function(formdata) { - // hacer algo con tu formdata -});</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<p>Ninguno.</p> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<p>Una {{domxref("Promise")}} que resuelve con un objeto {{domxref("FormData")}}.</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>TBD.</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#dom-body-formdata','formData()')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - - - -<p>{{Compat("api.Body.formData")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/es/orphaned/web/api/body/index.html b/files/es/orphaned/web/api/body/index.html deleted file mode 100644 index 346e7b2286..0000000000 --- a/files/es/orphaned/web/api/body/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Body -slug: orphaned/Web/API/Body -tags: - - API - - BODY - - Experimental - - Fetch - - Fetch API - - Interface - - NeedsTranslation - - Reference - - TopicStub - - request -translation_of: Web/API/Body -original_slug: Web/API/Body ---- -<div>{{ APIRef("Fetch") }}</div> - -<p><span class="seoSummary">The <strong><code>Body</code></strong> {{glossary("mixin")}} of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.</span></p> - -<p><code>Body</code> is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated <dfn>body</dfn> (a <a href="/en-US/docs/Web/API/Streams_API">stream</a>), a <dfn>used flag</dfn> (initially unset), and a <dfn>MIME type</dfn> (initially the empty byte sequence).</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> - <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd> - <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> - <dd>A {{domxref("Boolean")}} that indicates whether the body has been read.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{domxref("Body.arrayBuffer()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd> - <dt>{{domxref("Body.blob()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd> - <dt>{{domxref("Body.formData()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd> - <dt>{{domxref("Body.json()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.</dd> - <dt>{{domxref("Body.text()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is <em>always</em> decoded using UTF-8.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.</p> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> -</pre> - -<h3 id="JS_Content">JS Content</h3> - -<pre class="brush: js">const myImage = document.querySelector('.my-image'); -fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg') - .then(res => res.blob()) - .then(res => { - const objectURL = URL.createObjectURL(res); - myImage.src = objectURL; -});</pre> - -<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#body-mixin','Body')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Body")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> - -<p> </p> diff --git a/files/es/orphaned/web/api/body/json/index.html b/files/es/orphaned/web/api/body/json/index.html deleted file mode 100644 index 35f7811df3..0000000000 --- a/files/es/orphaned/web/api/body/json/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Body.json() -slug: orphaned/Web/API/Body/json -translation_of: Web/API/Body/json -original_slug: Web/API/Body/json ---- -<div>{{APIRef("Fetch API")}}</div> - -<p>El método <strong><code>json()</code></strong> de {{DOMxRef("Body")}} recibe un flujo de datos {{DOMxRef("Response")}} y lo lee a término. Devuelve una promesa con el cuerpo del texto transformado a {{JSxRef("JSON")}}.</p> - -<h2 id="Sintáxis">Sintáxis</h2> - -<pre class="syntaxbox"><em>response</em>.json().then(<em>data</em> => { - // do something with your data -});</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<p>No.</p> - -<h3 id="Valor_devuelto">Valor devuelto</h3> - -<p>Una {{jsxref("Promise")}} que se resuelve a un objeto JavaScript. Este objeto puede ser cualquier cosa que pueda ser representada por JSON (un objeto, un array, una cadena de caracteres, un número...).</p> - -<h2 id="Example">Example</h2> - -<p>In our <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json example</a> (run <a href="http://mdn.github.io/fetch-examples/fetch-json/">fetch json live</a>), we create a new request using the {{DOMxRef("Request.Request", "Request()")}} constructor, then use it to fetch a <code>.json</code> file. When the fetch is successful, we read and parse the data using <code>json()</code>, then read values out of the resulting objects as you'd expect and insert them into list items to display our product data.</p> - -<pre class="brush: js highlight[5]">const myList = document.querySelector('ul'); -const myRequest = new Request('products.json'); - -fetch(myRequest) - .then(response => response.json()) - .then(data => { - for (const product of data.products) { - let listItem = document.createElement('li'); - listItem.appendChild( - document.createElement('strong') - ).textContent = product.Name; - listItem.append( - ` can be found in ${ - product.Location - }. Cost: ` - ); - listItem.appendChild( - document.createElement('strong') - ).textContent = `£${product.Price}`; - myList.appendChild(listItem); - } - });</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("Fetch", "#dom-body-json", "Body.json()")}}</td> - <td>{{Spec2("Fetch")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Body.json")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/es/orphaned/web/api/childnode/after/index.html b/files/es/orphaned/web/api/childnode/after/index.html deleted file mode 100644 index 468dfd58ae..0000000000 --- a/files/es/orphaned/web/api/childnode/after/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: ChildNode.after() -slug: orphaned/Web/API/ChildNode/after -tags: - - API - - DOM - - Experimental - - Nodo - - Referencia - - metodo -translation_of: Web/API/ChildNode/after -original_slug: Web/API/ChildNode/after ---- -<p>{{APIRef("DOM")}} {{SeeCompatTable}}<br> - <span lang="es"><span>El método <code><strong>ChildNode.after()</strong></code> inserta un conjunto de objetos {{domxref("Node")}} o {{domxref("DOMString")}} en la lista de hijos de este <code>ChildNode</code> del padre, justo después de este <code>ChildNode</code>.</span> <span>Los objetos {{domxref("DOMString")}} se insertan como nodos equivalentes {{domxref("Text")}}.</span></span></p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">[Throws, Unscopable] -void ChildNode.after((Node o DOMString)... nodes); -</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd><span id="result_box" lang="es"><span>Un conjunto de objetos </span></span><span lang="es"><span>{{domxref("Node")}} o </span></span>{{domxref("DOMString")}}<span lang="es"><span> para insertar.</span></span></dd> -</dl> - -<h3 id="Excepciones">Excepciones</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: No se puede insertar nodo en el punto especificado de la jerarquía.</li> -</ul> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Insertando_un_elemento">Insertando un elemento</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.after(span); - -console.log(parent.outerHTML); -// "<div><p></p><span></span></div>" -</pre> - -<h3 id="Insertando_texto">Insertando texto</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); - -child.after("Text"); - -console.log(parent.outerHTML); -// "<div><p></p>Text</div>"</pre> - -<h3 id="Insertando_un_elemento_y_texto">Insertando un elemento y texto</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.after(span, "Text"); - -console.log(parent.outerHTML); -// "<div><p></p><span></span>Text</div>"</pre> - -<h3 id="ChildNode.after_es_unscopable"><code>ChildNode.after()</code> es unscopable</h3> - -<p>El método <code>after()</code> no está incluido en la declaración <code>with</code>.Consulte {{jsxref("Symbol.unscopables")}} para obtener más información.</p> - -<pre class="brush: js">with(node) { - after("foo"); -} -// ReferenceError: after is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>Puedes usar un polyfill del método <code>after()</code> en Internet Explorer 9 y superiores con el siguente código:</p> - -<pre class="brush: js">// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('after')) { - return; - } - Object.defineProperty(item, 'after', { - configurable: true, - enumerable: true, - writable: true, - value: function after() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.parentNode.insertBefore(docFrag, this.nextSibling); - } - }); - }); -})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> - -<h3 id="Otro_polyfill">Otro polyfill</h3> - -<pre class="brush: js">// from: https://github.com/FabioVergani/js-Polyfill_Element.prototype.after/blob/master/after.js - -(function(x){ - var o=x.prototype,p='after'; - if(!o[p]){ - o[p]=function(){ - var e, m=arguments, l=m.length, i=0, t=this, p=t.parentNode, n=Node, s=String, d=document; - if(p!==null){ - while(i<l){ - e=m[i]; - if(e instanceof n){ - t=t.nextSibling; - if(t!==null){ - p.insertBefore(e,t); - }else{ - p.appendChild(e); - }; - }else{ - p.appendChild(d.createTextNode(s(e))); - }; - ++i; - }; - }; - }; - }; -})(Element); - - - -/* -minified: - -(function(x){ - var o=x.prototype; - o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentNode,n=Node,s=String,d=document;if(p!==null){while(i<l){((e=m[i]) instanceof n)?(((t=t.nextSibling )!==null)?p.insertBefore(e,t):p.appendChild(e)):p.appendChild(d.createTextNode(s(e)));++i;}}}); -}(Element)); -*/ -</pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="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-childnode-after', 'ChildNode.after()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definición Inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{Compat("api.ChildNode.after")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{domxref("ChildNode")}} y {{domxref("ParentNode")}}</li> - <li>{{domxref("ChildNode.before()")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/es/orphaned/web/api/childnode/before/index.html b/files/es/orphaned/web/api/childnode/before/index.html deleted file mode 100644 index cfede06158..0000000000 --- a/files/es/orphaned/web/api/childnode/before/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: ChildNode.before() -slug: orphaned/Web/API/ChildNode/before -tags: - - API - - DOM - - Experimental - - Nodo - - Referencia - - metodo -translation_of: Web/API/ChildNode/before -original_slug: Web/API/ChildNode/before ---- -<p><textarea></textarea></p> - -<div id="gt-input-tool"> -<div id="itamenu"> </div> -</div> - -<div class="g-unit" id="gt-src-c"> -<div id="gt-src-p"> </div> -</div> - -<div id="gt-res-content"> -<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span>{{APIRef ( "DOM")}} {{SeeCompatTable}}</span><br> -<br> -<span>El método <strong>ChildNode.before</strong> inserta un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} en la lista de hijos de este ChildNode del padre, justo antes de este ChildNode.</span> <span>Los objetos {{domxref ( "DOMString")}} se insertan como nodos equivalentes {{domxref ( "Text")}}.</span></span></div> -</div> - -<h2 id="Síntasix">Síntasix</h2> - -<pre class="syntaxbox">[Throws, Unscopable] -void ChildNode.before((Node or DOMString)... nodes); -</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt><code>nodos</code></dt> - <dd><span id="result_box" lang="es"><span>Un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} para insertar.</span></span></dd> -</dl> - -<h3 id="Excepciones">Excepciones</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: Node cannot be inserted at the specified point in the hierarchy.</li> -</ul> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Insertando_un_elemento">Insertando un elemento</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.before(span); - -console.log(parent.outerHTML); -// "<div><span></span><p></p></div>" -</pre> - -<h3 id="Insertando_texto">Insertando texto</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); - -child.before("Text"); - -console.log(parent.outerHTML); -// "<div>Text<p></p></div>"</pre> - -<h3 id="Insertando_un_elemento_y_texto">Insertando un elemento y texto</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.before(span, "Text"); - -console.log(parent.outerHTML); -// "<div><span></span>Text<p></p></div>"</pre> - -<h3 id="ChildNode.before()_es_unscopable"><code>ChildNode.before()</code> es unscopable</h3> - -<p><span id="result_box" lang="es"><span>El método before () no está definido en la declaración <em>with</em>.</span> <span>Consulte {{jsxref ( "Symbol.unscopables")}} para obtener más información.</span></span></p> - -<pre class="brush: js">with(node) { - before("foo"); -} -// ReferenceError: before is not defined </pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="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-childnode-before', 'ChildNode.before()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definición Inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoDesktop(49)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(39)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoMobile(49)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(39)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(54.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{domxref("ChildNode")}} and {{domxref("ParentNode")}}</li> - <li>{{domxref("ChildNode.after()")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/es/orphaned/web/api/childnode/index.html b/files/es/orphaned/web/api/childnode/index.html deleted file mode 100644 index 2cdd1c573b..0000000000 --- a/files/es/orphaned/web/api/childnode/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: ChildNode -slug: orphaned/Web/API/ChildNode -tags: - - API - - DOM - - Experimental - - Interface - - NeedsTranslation - - Node - - TopicStub -translation_of: Web/API/ChildNode -original_slug: Web/API/ChildNode ---- -<div>{{APIRef("DOM")}}</div> - -<p>The <code><strong>ChildNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent.</p> - -<p><code>ChildNode</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("DocumentType")}}, and {{domxref("CharacterData")}} objects.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>There are neither inherited, nor specific properties.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>There are no inherited methods.</em></p> - -<dl> - <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt> - <dd>Removes this <code>ChildNode</code> from the children list of its parent.</dd> - <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt> - <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just before this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> - <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt> - <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just after this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> - <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt> - <dd>Replaces this <code>ChildNode</code> in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Split the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}} and <code>ChildNode</code>. <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the <code>remove()</code>, <code>before()</code>, <code>after()</code> and <code>replaceWith()</code> methods.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Polyfill">Polyfill</h2> - -<p>External on github: <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></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 (on {{domxref("Element")}})</td> - <td>{{CompatChrome(1.0)}}</td> - <td>{{CompatGeckoDesktop(23)}}</td> - <td>9.0</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td> - <td>{{CompatChrome(23.0)}}</td> - <td>{{CompatGeckoDesktop(23)}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>remove()</code>{{experimental_inline}}</td> - <td>{{CompatChrome(29.0)}}</td> - <td>{{CompatGeckoDesktop(23)}}</td> - <td>Edge</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoDesktop(49)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOpera(39)}}</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>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support (on {{domxref("Element")}})</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(23)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(23)}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>remove()</code>{{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(23)}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoMobile(49)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOperaMobile(39)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(54.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("ParentNode")}} pure interface.</li> - <li> - <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div> - </li> -</ul> diff --git a/files/es/orphaned/web/api/childnode/remove/index.html b/files/es/orphaned/web/api/childnode/remove/index.html deleted file mode 100644 index 069ed69160..0000000000 --- a/files/es/orphaned/web/api/childnode/remove/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: ChildNode.remove() -slug: orphaned/Web/API/ChildNode/remove -tags: - - API - - ChildNode - - DOM - - Experimental - - metodo -translation_of: Web/API/ChildNode/remove -original_slug: Web/API/ChildNode/remove ---- -<p><span id="result_box" lang="es"><span>{{APIRef ( "DOM")}}</span><br> - <span>El método<strong> ChildNode.remove ( ) </strong>elimina el objeto del árbol al que pertenece.</span></span></p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><em>node</em>.remove(); -</pre> - -<h2 id="Ejemplo">Ejemplo</h2> - -<h3 id="Utilizando_remove">Utilizando <code>remove()</code></h3> - -<pre class="brush: html"><div id="div-01">Este es el div-01</div> -<div id="div-02">Este es el div-02</div> -<div id="div-03">Este es el div-03</div> -</pre> - -<pre class="brush: js">var el = document.getElementById('div-02'); -el.nextElementSibling.remove(); // Elimina el div con el id 'div-03' -</pre> - -<h3 id="ChildNode.remove_es_unscopable"><code>ChildNode.remove()</code> es unscopable</h3> - -<p><span id="result_box" lang="es"><span>El método <code>remove()</code> no está definido en el contexto de las declaración <code>with</code>.</span> <span>Consulte {{jsxref ("Symbol.unscopables")}} para obtener más información.</span></span></p> - -<pre class="brush: js">with(node) { - remove(); -} -// ReferenceError: remove is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>El código a continuación es un polyfill del método <code>remove()</code> para Internet Explorer 9 y superiores:</p> - -<pre class="brush: js">// from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('remove')) { - return; - } - Object.defineProperty(item, 'remove', { - configurable: true, - enumerable: true, - writable: true, - value: function remove() { - if (this.parentNode !== null) - this.parentNode.removeChild(this); - } - }); - }); -})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="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-childnode-remove', 'ChildNode.remove')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definición inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_los_navegadores">Compatibilidad en los navegadores</h2> - -<div> -<p>{{Compat("api.ChildNode.remove")}}</p> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><span class="short_text" id="result_box" lang="es"><span>La interfaz pura {{domxref ( "ChildNode")}} .</span></span></li> - <li> - <div class="syntaxbox"><span id="result_box" lang="es"><span>Tipos de objetos que implementan esta interfaz pura: {{domxref ( "CharacterData")}}, {{domxref ( "Elemento")}} y {{domxref ( "DocumentType")}}.</span></span></div> - </li> -</ul> diff --git a/files/es/orphaned/web/api/childnode/replacewith/index.html b/files/es/orphaned/web/api/childnode/replacewith/index.html deleted file mode 100644 index a9aa23ce79..0000000000 --- a/files/es/orphaned/web/api/childnode/replacewith/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: ChildNode.replaceWith() -slug: orphaned/Web/API/ChildNode/replaceWith -tags: - - API - - DOM - - Experimental - - Nodo - - Referencia - - metodo -translation_of: Web/API/ChildNode/replaceWith -original_slug: Web/API/ChildNode/replaceWith ---- -<p><span id="result_box" lang="es"><span>{{APIRef ( "DOM")}} {{SeeCompatTable}}</span><br> - <br> - <span>El método <strong>ChildNode.replaceWith () </strong>reemplaza este ChildNode en la lista de hijos de su padre con un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}}.</span> <span>Los objetos {{domxref ( "DOMString")}} se insertan como nodos equivalentes {{domxref ( "Text")}}.</span></span></p> - -<p> </p> - -<h2 id="Síntasix">Síntasix</h2> - -<p> </p> - -<pre class="syntaxbox">[Throws, Unscopable] -void ChildNode.replaceWith((Node or DOMString)... nodes); -</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt><code>nodos</code></dt> - <dd><span id="result_box" lang="es"><span>Un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} para reemplazar.</span></span></dd> -</dl> - -<h3 id="Excepciones">Excepciones</h3> - -<ul> - <li><span id="result_box" lang="es"><span>{{Domxref ( "HierarchyRequestError")}}: No se puede insertar nodo en el punto especificado de la jerarquía.</span></span></li> -</ul> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Utilizando_replaceWith()">Utilizando <code>replaceWith()</code></h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.replaceWith(span); - -console.log(parent.outerHTML); -// "<div><span></span></div>" -</pre> - -<h3 id="ChildNode.replaceWith()_es_unscopable"><code>ChildNode.replaceWith()</code> es unscopable</h3> - -<p><span id="result_box" lang="es"><span>El método replaceWith () no está incluido en la declaracion <em><code>with</code>.</em></span> <span>Consulte {{jsxref ( "Symbol.unscopables")}} para obtener más información.</span></span></p> - -<pre class="brush: js">with(node) { - replaceWith("foo"); -} -// ReferenceError: replaceWith is not defined </pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="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-childnode-replacewith', 'ChildNode.replacewith()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definición Inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoDesktop(49)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(39)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Mobile</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoMobile(49)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOperaMobile(39)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(54.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_También">Ver También</h2> - -<ul> - <li>{{domxref("ChildNode")}} and {{domxref("ParentNode")}}</li> - <li>{{domxref("Node.replaceChild()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/es/orphaned/web/api/detecting_device_orientation/index.html b/files/es/orphaned/web/api/detecting_device_orientation/index.html deleted file mode 100644 index 96afd861e0..0000000000 --- a/files/es/orphaned/web/api/detecting_device_orientation/index.html +++ /dev/null @@ -1,279 +0,0 @@ ---- -title: Detectando la orientación del dispositivo -slug: orphaned/Web/API/Detecting_device_orientation -translation_of: Web/API/Detecting_device_orientation -original_slug: Web/API/Detecting_device_orientation ---- -<div>{{SeeCompatTable}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>Cada vez más, los dispositivos habilitados para la web son capaces de determinar su <strong>orientación</strong>; esto hace que estos puedan reportar datos indicando los cambios de su orientación con relación a la fuerza de gravedad. In particular, dispositivos de mano como los teléfonos móviles pueden usar esta información para rotar la pantalla automaticamente para mostrar información en de forma vertical, presentando un vista extendida del contenido de la web cuando el dispositivo de forma que el ancho es mayor que el alto. </p> - -<p>Hay dos eventos JavaScript que manejan la información de orientación. El primero es {{domxref("DeviceOrientationEvent")}}, que es enviado cuando el aceleromentro detecta un cambio de orientación del dispositivo. Recibiendo y procesando los datos reportados por el evento es posible responder interactivamente a la rotación y aplicar cambios correspondientes al movimiento del dispositivo.</p> - -<p>El segundo evento es {{domxref("DeviceMotionEvent")}}, que es enviado cuando un cambio de la aceleración fue añadido. Esto es diferente de {{domxref("DeviceOrientationEvent")}} por que está escuchando cambios de aceleración mas no de orientación. Los sensores son comunmente capaces de detetar {{domxref("DeviceMotionEvent")}} incluso aquellos sensores de laptops que protegen del movimiento a los disposivitos de almacenamiento. {{domxref("DeviceOrientationEvent")}} es comunmente encontrado en dispositivos móviles.</p> - -<h2 id="Trabajando_con_eventos_de_orientación">Trabajando con eventos de orientación</h2> - -<p>Todo lo que necesitas hacer para empezar a recibir cambios de orientación es escuchar el evento {{ event("deviceorientation") }}:</p> - -<pre class="brush: js notranslate">window.addEventListener("deviceorientation", handleOrientation, true); -</pre> - -<p>Después de registrar el evento de escucha (en este caso, una función de JavaScript llamada handleOrientation()), tu función de escucha periodicamente será invocada con una actualización de datos.</p> - -<p>La información del evento contiene 4 valores:</p> - -<ul> - <li>{{ domxref("DeviceOrientationEvent.absolute") }}</li> - <li>{{ domxref("DeviceOrientationEvent.alpha") }}</li> - <li>{{ domxref("DeviceOrientationEvent.beta") }}</li> - <li>{{ domxref("DeviceOrientationEvent.gamma") }}</li> -</ul> - -<p>El manejador del evento puede ser similar a lo siguiente:</p> - -<pre class="brush: js notranslate">function handleOrientation(event) { - var absolute = event.absolute; - var alpha = event.alpha; - var beta = event.beta; - var gamma = event.gamma; - - // Do stuff with the new orientation data -} -</pre> - -<h3 id="Explicación_de_los_Valores_de_Orientación">Explicación de los Valores de Orientación</h3> - -<p>El valor reportado para cada eje indica la cantidad de rotación alrededor de un eje dado, con referencia a un estandar marco de coordenadas. El siguiente enlace describe con mayor detalle la <a href="/en-US/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientacíon y datos del movimiento explicado</a> que es resumido abajo. </p> - -<ul> - <li>{{ domxref("DeviceOrientationEvent.alpha") }} representa el movimiento alrededor del eje z, representado en grados con valores que van desde 0 a 360.</li> - <li>{{ domxref("DeviceOrientationEvent.beta") }} representa el movimiento del dispositivo alrededor del eje x, representado en grados con valores que van desde -180 a 180. Esto representa un movimiento de frente hacia atrás del dispositivo.</li> - <li>{{ domxref("DeviceOrientationEvent.gamma") }} representa el movimiento del dispositivo alrededor del eje y, representado en grados con valores que van de -90 a 90. Esto representa un movimiento de izquierda a derecha del dispositivo.</li> -</ul> - -<h3 id="Ejemplo_de_orientación">Ejemplo de orientación</h3> - -<p>Este ejemplo va a funcionar en cualquier nevegador que soporte el evento {{event("deviceorientation")}} y funcione en un dispositivo con capacidades de detectar la orientación.</p> - -<p>Imaginemos una pelota en un jardin:</p> - -<pre class="brush: html notranslate"><div class="garden"> - <div class="ball"></div> -</div> - -<pre class="output"></pre> -</pre> - -<p>Este jardin tiene 200 pixeles de ancho (Si, es uno pequeño), y la pelota esta en el centro:</p> - -<pre class="brush: css notranslate">.garden { - position: relative; - width : 200px; - height: 200px; - border: 5px solid #CCC; - border-radius: 10px; -} - -.ball { - position: absolute; - top : 90px; - left : 90px; - width : 20px; - height: 20px; - background: green; - border-radius: 100%; -} -</pre> - -<p>Ahora, si nosotros movemos nuestro dispositivo, la pelota va a moverse acorde a este:</p> - -<pre class="brush: js notranslate">var ball = document.querySelector('.ball'); -var garden = document.querySelector('.garden'); -var output = document.querySelector('.output'); - -var maxX = garden.clientWidth - ball.clientWidth; -var maxY = garden.clientHeight - ball.clientHeight; - -function handleOrientation(event) { - var x = event.beta; // In degree in the range [-180,180] - var y = event.gamma; // In degree in the range [-90,90] - - output.innerHTML = "beta : " + x + "\n"; - output.innerHTML += "gamma: " + y + "\n"; - - // Because we don't want to have the device upside down - // We constrain the x value to the range [-90,90] - if (x > 90) { x = 90}; - if (x < -90) { x = -90}; - - // To make computation easier we shift the range of - // x and y to [0,180] - x += 90; - y += 90; - - // 10 is half the size of the ball - // It center the positioning point to the center of the ball - ball.style.top = (maxX*x/180 - 10) + "px"; - ball.style.left = (maxY*y/180 - 10) + "px"; -} - -window.addEventListener('deviceorientation', handleOrientation); -</pre> - -<p>Aqui el resultado en vivo:</p> - -<div>{{ EmbedLiveSample('Orientation_example', '230', '260') }}</div> - -<div class="warning"> -<p><strong>Tener en cuenta:</strong> Chrome y Firefox no manejan los angulos de la misma forma, asi que en algunos ejes la dirección se invierte.</p> -</div> - -<h2 id="Procesando_eventos_de_movimiento">Procesando eventos de movimiento</h2> - -<p>Eventos de movimiento son manejados de la misma manera que la orientación, con la excepción de que estos tienen sus propios nombres de evento: {{ event("devicemotion") }}</p> - -<pre class="brush: js notranslate">window.addEventListener("devicemotion", <em>handleMotion</em>, true);</pre> - -<p>Lo que realmente ha cambiado es la información proporcionada en {{ domxref("DeviceMotionEvent") }} objeto pasado como parametro de la función <em>HandleMotion.</em></p> - -<p>El evento de movimiento tiene cuatro propiedades:</p> - -<ul> - <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li> - <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li> - <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li> - <li>{{ domxref("DeviceMotionEvent.interval") }}</li> -</ul> - -<h3 id="Valores_de_movimiento_explicados">Valores de movimiento explicados</h3> - -<p>{{ domxref("DeviceMotionEvent") }} proporciona a los desarrolladores web información sobre la velocidad de los cambios de la posición y orientación del dispositivo. Los cambios son proporcionados por sus tres ejes (ver <a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Datos de orientación y movimiento explicados</a> por más detalles).</p> - -<p>Para {{domxref("DeviceMotionEvent.acceleration","acceleration")}} y {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, los ejes corresponden a lo siguiente:</p> - -<ul> - <li><code>x</code>: Representa el eje de oeste a este.</li> - <li><code>y</code>: Representa el eje de sur a norte.</li> - <li><code>z</code>: Representa el eje perpendicular al suelo.</li> -</ul> - -<p>Para {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, la situación es un poco diferente; la información corresponde a lo siguiente en cada caso:</p> - -<ul> - <li><code>alpha</code>: Representa la velocidad de rotación a lo largo del eje perpendicular a la pantalla ( teclado para desktop).</li> - <li><code>beta</code>: Representa la velocidad de rotación a lo largo del eje que va de la izquierda a la derecha del plano de la pantalla (o teclado para desktop).</li> - <li><code>gamma</code>: Representa la velocidad de rotación a lo largo del eje que va desde la parte inferior a la parte superrior del plano de la pantalla (o teclado para desktop).</li> -</ul> - -<p>Finalmente, {{domxref("DeviceMotionEvent.interval","interval")}} representa el intervalo de tiempo, en milisegundos, en el que los datos han sido obtenidos del dispositivo.</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('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td>Especificación inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>{{domxref("DeviceOrientationEvent")}}</td> - <td>7.0</td> - <td>3.6<sup>[1]</sup><br> - 6</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>{{domxref("DeviceMotionEvent")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>6</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 Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{domxref("DeviceOrientationEvent")}}</td> - <td>3.0</td> - <td>3.6<sup>[1]</sup><br> - 6</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>4.2</td> - </tr> - <tr> - <td>{{domxref("DeviceMotionEvent")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>6</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div class="note"> -<p><strong>Note</strong>: <a href="https://github.com/dorukeker/gyronorm.js">gyronorm.js</a> es un <em>polyfill</em> para normalizar los datos del acelerómetro y giroscopio en dispositivos móviles. Esto es útil para superar algunas de las diferencias en la compatibilidad del dispositivo con la orientación del dispositivo..</p> -</div> - -<h3 id="Gecko_implementation_notes">Gecko implementation notes</h3> - -<ol> - <li>Firefox 3.6, 4, and 5 supported <a href="/en-US/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>versus the standard {{domxref("DeviceOrientationEvent")}} event</li> -</ol> - -<h2 id="Vea_también">Vea también</h2> - -<ul> - <li>{{domxref("DeviceOrientationEvent")}}</li> - <li>{{domxref("DeviceMotionEvent")}}</li> - <li>The legacy <code><a href="/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li> - <li><a href="/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation" title="2D maze game with device orientation">Cyber Orb: 2D maze game with device orientation</a></li> -</ul> diff --git a/files/es/orphaned/web/api/document_object_model/events/index.html b/files/es/orphaned/web/api/document_object_model/events/index.html deleted file mode 100644 index b40c7ce7ae..0000000000 --- a/files/es/orphaned/web/api/document_object_model/events/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Eventos y el DOM -slug: orphaned/Web/API/Document_Object_Model/Events -tags: - - DOM - - Guía -translation_of: Web/API/Document_Object_Model/Events -original_slug: Web/API/Document_Object_Model/Events ---- -<h2 id="Introduction" name="Introduction">Introducción</h2> - -<p>Este capítulo describe el Modelo de Eventos del DOM. Se describe la interfaz <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a>, así como las interfaces para el registro de eventos en los nodos del DOM, y los <a href="/en-US/docs/Web/API/EventTarget.addEventListener">oyentes de eventos</a>, y varios ejemplos más largos muestran cómo se relacionan entre sí las diversas interfaces de eventos.</p> - -<p>Hay un diagrama excelente que explica claramente las tres fases del flujo de eventos a través del DOM en el borrador <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events</a>.</p> - -<p>Vea también el <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Ejemplo 5: Propagación de eventos</a> en el capítulo de Ejemplos para un ejemplo más detallado de cómo los eventos se mueven a través del DOM.</p> - -<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Registrando oyentes de eventos</h2> - -<p>Hay 3 formas de registrar gestores de eventos para un elemento DOM.</p> - -<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener"><a href="/en-US/docs/Web/API/EventTarget.addEventListener"><code>EventTarget.addEventListener</code></a></h3> - -<pre class="brush: js">// Se supone que myButton es un elemento de botón -myButton.addEventListener('click', function(){alert('Hello world');}, false); -</pre> - -<p>Este es el método que debe usar en las páginas web modernas. </p> - -<p>Nota: Internet Explorer 6-8 no admite este método, ofreciendo una API similar {{domxref("EventTarget.attachEvent")}} en su lugar. Para la compatibilidad entre navegadores utilice una de las muchas bibliotecas de JavaScript disponibles.</p> - -<p>Se pueden encontrar más detalles en la página de referencia {{domxref("EventTarget.addEventListener")}}.</p> - -<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">Atributo HTML</a></h3> - -<pre class="brush: html"><button onclick="alert('Hello world!')"> -</pre> - -<p>El código de JavaScript en el atributo pasa el objeto Event por medio del parámetro <code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">El valor de retorno se trata de una manera especial, descrita en la especificación HTML</a>.</p> - -<p>Debe evitarse esta forma. Hace que el marcado sea más grande y menos legible. El comitido del contenido/estructura y del comportamiento no están bien separadas, por lo que es más difícil encontrar un error.</p> - -<h3 id="DOM_element_properties" name="DOM_element_properties">Propiedades del elemento DOM</h3> - -<pre class="brush: js">// Se supone que myButton es un elemento de botón -myButton.onclick = function(event){alert('Hello world');}; -</pre> - -<p>La función se puede defirnir para que tome un parámetro <code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">El valor de retorno se trata de una manera especial, descrita en la especificación HTML</a>.</p> - -<p>El problema con este método es que solo se puede establecer un gestor por elemento y por evento.</p> - -<h2 id="Accediendo_a_las_Interfaces_de_eventos">Accediendo a las Interfaces de eventos</h2> - -<p>Los controladores de eventos se pueden adjuntar a varios objetos, incluidos los elementos DOM, documentos, al <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">objeto window</a>, etc. Cuando se produce un evento, se crea un objeto de evento y se pasa secuencialmente a los oyentes del evento.</p> - -<p>Se puede acceder a la interfaz {{domxref ("Evento")}} desde la función del gestor, a través del objeto de evento pasado como primer argumento. El siguiente ejemplo simple muestra cómo se pasa un objeto de evento a la función del controlador de eventos, y se puede usar desde dentro de una de esas funciones.</p> - -<pre class="brush: js">function foo(evt) { - // al parámetro evt se le asigna automáticamente el objeto event - alert(evt); -} -table_el.onclick = foo; -</pre> - -<h2 id="Subnav">Subnav</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> -</ul> diff --git a/files/es/orphaned/web/api/element/currentstyle/index.html b/files/es/orphaned/web/api/element/currentstyle/index.html deleted file mode 100644 index 0b329e5d0e..0000000000 --- a/files/es/orphaned/web/api/element/currentstyle/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Element.currentStyle -slug: orphaned/Web/API/Element/currentStyle -tags: - - API - - Compatibilidad en los navegadores móviles - - Property -translation_of: Web/API/Element/currentStyle -original_slug: Web/API/Element/currentStyle ---- -<div>{{APIRef("DOM")}}</div> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="Sumario">Sumario</h2> - -<p><strong><code>Element.currentStyle </code></strong><span lang="es"><span>es</span> <span>una propiedad</span> <span>que es una</span> <span>alternativa propietaria</span> <span>del método estandarizado</span></span> {{domxref("window.getComputedStyle")}} . <span id="result_box" lang="es"><span>Está disponible en</span> <span>las versiones anteriores de</span> <span>Microsoft</span> <span>Internet Explorer</span><span>.</span></span></p> - -<h2 id="Especificación">Especificación</h2> - -<p>No forma parte de ninguna especificación.</p> - -<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx">tiene una descripción MSDN</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad en los Navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Microsoft Edge</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</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>Función</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_También">Ver También</h2> - -<ul> - <li>{{domxref("Element.runtimeStyle")}} </li> -</ul> diff --git a/files/es/orphaned/web/api/element/runtimestyle/index.html b/files/es/orphaned/web/api/element/runtimestyle/index.html deleted file mode 100644 index 71ff184062..0000000000 --- a/files/es/orphaned/web/api/element/runtimestyle/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Element.runtimeStyle -slug: orphaned/Web/API/Element/runtimeStyle -tags: - - API - - Necesidad de compatibilidad de los navegadores - - Necesidad de compatibilidad de los navegadores móviles - - Necesidad de ejemplo - - Propiedad -translation_of: Web/API/Element/runtimeStyle -original_slug: Web/API/Element/runtimeStyle ---- -<div>{{APIRef("DOM")}}</div> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="Sumario">Sumario</h2> - -<p><span id="result_box" lang="es"><strong><span>Element.runtimeStyle</span></strong> <span>es una</span> <span>propiedad exclusiva</span> <span>similar a</span> <span>{</span><span>{</span><span>domxref</span> <span>(</span><span>"</span><span>HTMLElement.style</span><span>"</span><span>)</span><span>}</span><span>}</span><span>, excepto</span> <span>sus</span> <span>estilos,</span> <span>que tienen</span> <span>mayor precedencia</span> <span>y</span> <span>modificaciön.It</span> <span>no modifica</span> <span>el contenido del atributo</span> </span><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style">style</a></code> <span lang="es"><span>.</span> <span>Está disponible en</span> <span>las versiones anteriores de</span> <span>Microsoft</span> <span>Internet Explorer</span><span>.</span></span></p> - -<h2 id="especificación">especificación</h2> - -<p>No forma parte de ninguna especificación.</p> - -<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535889(v=vs.85).aspx">tiene una descripción en MSDN</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de los Navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Microsoft Edge</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</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>Función</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{domxref("Element.currentStyle")}} </li> -</ul> diff --git a/files/es/orphaned/web/api/elementcssinlinestyle/style/index.html b/files/es/orphaned/web/api/elementcssinlinestyle/style/index.html deleted file mode 100644 index add3fa5480..0000000000 --- a/files/es/orphaned/web/api/elementcssinlinestyle/style/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Element.style -slug: orphaned/Web/API/ElementCSSInlineStyle/style -translation_of: Web/API/ElementCSSInlineStyle/style -original_slug: Web/API/ElementCSSInlineStyle/style ---- -<p>{{ ApiRef("HTML DOM") }}</p> - -<h3 id="Summary" name="Summary">Resumen</h3> - -<p>Devuelve un objeto que representa el atributo <code>style </code>del elemento.</p> - -<h3 id="Example" name="Example">Ejemplo</h3> - -<pre class="eval">var div = document.getElementById("div1"); -div.style.marginTop = ".25in"; -</pre> - -<h3 id="Notes" name="Notes">Notas</h3> - -<p>Ya que la propiedad <code>style </code>tiene la misma (y más alta) prioridad en la cascada CSS que las declaraciones <em>in-line</em> hechas mediante el atributo style, resulta muy útil para establecer el estilo en un elemento específico. </p> - -<p>Sin embargo, no resulta útil para aprender acerca del estilo original de un elemento, ya que representa sólo la declaración CSS en el atributo style <em>in-line</em> y no aquellos atributos que vienen de alguna otra parte, como las declaraciones en la sección <head> o en hojas de estilo.</p> - -<p>Para recoger los valores de todas las propiedades CSS de un elemento, deberías usar <a href="/Es/DOM/Window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a> en su lugar.</p> - -<p>Mira la lista de Propiedades CSS del DOM (<a href="/es/DOM/CSS" title="en/DOM/CSS">DOM CSS Properties List</a>) para tener una lista completa de las propiedades CSS que están disponibles en el Gecko DOM.</p> - -<p>Generalmente es mejor usarla propiedad <code>style </code>que usar <code>elt.setAttribute('style', '...')</code>, ya que el uso de la propiedad <code>style </code>no reemplazará otras propiedades CSS que puedan especificarse en el atributo <code>style</code>.</p> - -<p>Los estilos <em>no</em> pueden establecerse asignando una cadena a la propiedad (solo lectura) style, como en <code>elt.style = "color: blue;"</code>. Esto es porque el atributo <code>style </code>devuelve un objeto del tipo <code>CSSStyleDeclaration</code>. En su lugar, pueds establecer las propiedades como:</p> - -<pre class="eval">elt.style.color = "blue"; // Asignación directa - -var st = elt.style; -st.color = "blue"; // Asignación Indirecta -</pre> - -<p>El siguiente código presenta los nombres de todas las propiedades style, los valores se establecen de forma explícita para los elementos<code> elt </code>y sus valores heredados: </p> - -<pre class="eval">var elt = document.getElementById("elementIdHere"); -var out = ""; -var st = elt.style; -var cs = window.getComputedStyle(elt, null); -for (x in st) - out += " " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n"; -</pre> - -<p> </p> - -<h3 id="Specification" name="Specification">Especificación</h3> - -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p> diff --git a/files/es/orphaned/web/api/htmlorforeignelement/dataset/index.html b/files/es/orphaned/web/api/htmlorforeignelement/dataset/index.html deleted file mode 100644 index 7fb7d2a62e..0000000000 --- a/files/es/orphaned/web/api/htmlorforeignelement/dataset/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: HTMLElement.dataset -slug: orphaned/Web/API/HTMLOrForeignElement/dataset -translation_of: Web/API/HTMLOrForeignElement/dataset -original_slug: Web/API/HTMLOrForeignElement/dataset ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p><span class="seoSummary">La propiedad <code><strong>dataset</strong></code> en {{domxref("HTMLElement")}} proporciona una interfaz lectura/escritura para obtener todos los <a href="/es/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">atributos de datos personalizados</a> (<code>data-*</code>) de cada uno de los elementos.</span> Está disponible el acceso en HTML y en el DOM. Dentro del <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">map of DOMString</a>, aparece una entrada por cada atributo de datos. Hay que tener en cuenta que la propiedad<strong> </strong><code>dataset</code><strong> </strong>puede leerse, pero no modificarse directamente. En vez de eso, las escrituras deben ser realizadas a través de cada propiedad individual del <code>dataset</code>, que representan a cada atributo correspondiente. Además un HTML <code><strong>data-</strong></code><em>attribute</em> y su correspondiente DOM<strong> </strong><code>dataset.</code><em>property</em> no comparten el mismo nombre, pero son siempre similares:</p> - -<ul> - <li>El nombre de un attributo de datos comienza en HTML con <code>data-</code>. Sólo puede estar formado por letras minúsculas, números y los caracteres: guión (<code>-</code>), punto (<code>.</code>), dos puntos (<code>:</code>) y guión bajo (<code>_</code>) -- NUNCA una letra mayúscula (A a Z).</li> - <li>El nombre del atributo en JavaScript será el del correspondiente atributo HTML pero en camelCase, sin guiones, puntos, etc.</li> -</ul> - -<p>Adicionalmente, encontrarás una guía de como usar los atributos data de HTML en nuestro articulo <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes.</a></p> - -<h3 id="Conversion_de_nombres">Conversion de nombres</h3> - -<p><code>dash-style</code> a <code>camelCase</code>: Un atributo de datos personalizado se transforma en una clave para la entrada {{ domxref("DOMStringMap") }} con las siguientes reglas</p> - -<ul> - <li>el prefijo <code>data-</code> es eliminado (incluyendo el guión);</li> - <li>por cada guión (<code>U+002D</code>) seguido de un caracter ASCII que sea una letra en minuscula<span style="line-height: 1.5;"> </span><code>a</code><span style="line-height: 1.5;"> a la </span><code>z</code><span style="line-height: 1.5;">, el guión es removido y la letra se transforma en su contraparte en mayuscula;</span></li> - <li>otros caracteres (incluyendo otros guines) se mantienen intactos.</li> -</ul> - -<p><code>camelCase</code> a <code>dash-style</code>: La conversión opuesta, mapea una clave en un nombre de atributo, usa las siguientes reglas:</p> - -<ul> - <li>Restricción: Un guión no debe ser inmediatamente seguido por un un caracter ASCII que sea una letra minuscula de la <code>a</code> a la <code>z</code> (antes de la conversión);</li> - <li>se agrega el prefijo <code>data-</code>;</li> - <li>cualquier caracter ASCII que sea una letra mayuscula de la <code>A</code> a la <code>Z</code> se convierte en un guión seguido de se contraparte en minuscula;</li> - <li>otros caracteres se mantienen intactos.</li> -</ul> - -<p>La restricción en las reglas anteriores aseguran que las dos conversiones sean inversas una a la otra.</p> - -<p>Por ejemplo, el atributo nombrado <code>data-abc-def</code> corresponde a la clave <code>abcDef</code>.</p> - -<ul> -</ul> - -<h3 id="Accediendo_valores">Accediendo valores</h3> - -<ul> - <li>Los atributos pueden ser definidos y obtenidos usando el nombre camelCase (la clave) como la propiedad de un objeto del dataset, como en <code>element.dataset.keyname</code></li> - <li>Los atributos tambien pueden ser definidos y obtenidos usando la sintaxis de corchetes, como en <code>element.dataset[keyname]</code></li> - <li>El <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">operador <code>in</code></a> puede ser usado para checar si un atributo dado existe.</li> -</ul> - -<h3 id="Definiendo_valores">Definiendo valores</h3> - -<ul> - <li>Cuando un atributo es definido, su valor siempre se convierte a string. Por ejemplo, <code>null</code> siempre se convierte en el string "null".</li> - <li>Cuando quieras remover un atributo, puedes usar el <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">operador <code>delete</code></a>.</li> -</ul> - -<h2 id="Sintaxis">Sintaxis</h2> - -<ul> - <li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li> - <li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li> - <br> - <li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li> - <li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li> - <br> - <li><em>Custom data attributes can also be set directly on HTML elements, but attribute names must use the data- syntax above. </em></li> -</ul> - -<h2 id="Ejemplos">Ejemplos</h2> - -<pre class="brush: html"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div></pre> - -<pre class="brush: js">const el = document.querySelector('#user'); - -// el.id == 'user' -// el.dataset.id === '1234567890' -// el.dataset.user === 'johndoe' -// el.dataset.dateOfBirth === '' - -// set the data attribute -el.dataset.dateOfBirth = '1960-10-03'; -// Result: el.dataset.dateOfBirth === 1960-10-03 - -delete el.dataset.dateOfBirth; -// Result: el.dataset.dateOfBirth === undefined - -// 'someDataAttr' in el.dataset === false -el.dataset.someDataAttr = 'mydata'; -// Result: 'someDataAttr' in el.dataset === true -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - - - -<p>{{Compat("api.HTMLElement.dataset")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>The HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a></code> class of global attributes.</li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a></li> - <li>{{domxref("Element.getAttribute()")}} and {{domxref("Element.setAttribute()")}}</li> -</ul> diff --git a/files/es/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/es/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html deleted file mode 100644 index 81bfcf5693..0000000000 --- a/files/es/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html +++ /dev/null @@ -1,217 +0,0 @@ ---- -title: Conceptos Básicos -slug: orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -original_slug: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB ---- -<p><strong>IndexedDB</strong> es una manera de almacenar datos de manera persistente en el navegador. Dado que permite la creación de aplicaciones web con capacidades de consulta mejoradas, éstas pueden funcionar tanto en línea como fuera de línea. IndexedDB es útil para aplicaciones que almacenan una gran cantidad de datos (catálogos de DVDs en una biblioteca, por ejemplo) y para aplicaciones que no necesitan de una conexión permanente a internet para funcionar (clientes de correo, listas de tareas y blocs de notas, por ejemplo).</p> - -<h2 id="Sobre_este_documento">Sobre este documento</h2> - -<p>Esta introducción discute conceptos y terminologías fundamentales en IndexedDB. Provee una visión general y orienta sobre los conceptos clave. Para aprender más sobre los términos relacionados con IndexedDB, vea la sección de <a href="#definitions">Definiciones</a>.</p> - -<p>Para un tutorial sobre cómo usar la API, vea <a href="/es/IndexedDB/Usando_IndexedDB" title="en/IndexedDB/IndexedDB primer">Usando IndexedDB</a>. Para ver la documentación de referencia sobre la API de IndexedDB, vea el artículo <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a> y sus sub-páginas, que documentan los tipos de objetos utilizados por IndexedDB, así como los métodos de las API síncrona y asíncrona.</p> - -<h2 id="Visión_general_de_IndexedDB">Visión general de IndexedDB</h2> - -<p>IndexedDB le permite almacenar y obtener objetos indizados a partir de una "llave". Todos los cambios realizados a la base de datos ocurren dentro de transacciones. Como la mayoría de las soluciones de almacenamiento web, IndexedDB sigue una <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">política de mismo origen</a>, por lo que aún cuando se puede acceder a datos almacenados en un dominio, no se pueden acceder a datos a través de distintos dominios.</p> - -<p>La API incluye una variante <a href="/en/IndexedDB#Asynchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Asynchronous_API">asíncrona</a> y una <a href="/en/IndexedDB#Synchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Synchronous_API">síncrona</a>. La variante asíncrona puede ser utilizada en la mayoría de los casos, incluyendo <a href="/En/DOM/Using_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">WebWorkers</a>, mientras la variante síncrona está diseñada para ser utilizada solo con WebWorkers. Actualmente, ninguno de los navegadores principales soportan la API síncrona. Sin embargo, aún cuando la API síncrona sea soportada, en la mayoría de los casos de uso de IndexedDB lo más probable es que se utilice la API asíncrona.</p> - -<p>IndexedDB es una alternativa a WebSQL, que fue marcada como obsoleta por W3C el 18 de Noviembre de 2010. Aún cuando IndexedDB y WebSQL son soluciones para el almacenamiento, éstas no ofrecen las mismas funcionalidades. WebSQL es un sistema relacional de acceso a datos, mientras que IndexedDB es un sistema de tablas indizadas.</p> - -<h2 id="concepts" name="concepts">Conceptos principales</h2> - -<p>Si usted tiene alguna idea de cómo trabajan otros tipos de bases de datos, podría tener algún conflicto de conceptos al trabajar con IndexedDB. Por esta razón mantenga los siguientes conceptos importantes en mente:</p> - -<ul> - <li> - <p><strong>IndexedDB almacena pares llave-valor.</strong> Los valores pueden ser objetos con estructuras complejas, y las llaves pueden ser propiedades de esos objetos. Se pueden crear índices que usan cualquier propiedad de los objetos para realizar búsquedas rápidas o enumeraciones ordenadas.</p> - </li> - <li> - <p><strong>IndexedDB está hecho sobre un modelo de base de datos transaccional.</strong> Todo lo que usted haga en IndexedDB siempre ocurre en el contexto de una <a href="#gloss_transaction">transacción</a>. La API de IndexedDB provee una gran cantidad de objetos que representan índices, tablas, cursores, y más, pero cada uno de ellos están atados a una transacción particular. Así, usted no puede ejecutar ningún comando o abrir un cursor fuera de una transacción.</p> - - <p>Las transacciones tienen un período de vida bien definido. Por esta razón, cualquier intento de utilizar una transacción que ya se ha completado ocasionará excepciones. Igualmente, las transacciones aplican los cambios automáticamente y no se puede hacer <em>commit</em> automáticamente.</p> - - <p>Este modelo de transacciones es realmente útil cuando se considera qué podría pasar si un usuario abre dos instancias de una aplicación simultáneamente en dos pestañas. Sin operaciones transaccionales, las dos instancias podrían hacer que los cambios se <em>pisen</em> o se sobreescriban entre sí. Si no está familiarizado con el concepto de transacción en una base de datos, lea el <a class="link-https" href="https://es.wikipedia.org/wiki/Transacci%C3%B3n_%28base_de_datos%29" title="https://secure.wikimedia.org/wikipedia/en/wiki/Database_transaction">artículo correspondiente en la Wikipedia</a> y <a href="#gloss_transaction">transacción</a> en la sección de definiciones.</p> - </li> - <li> - <p><strong>La API de IndexedDB es mayormente asincrona.</strong> La API no devuelve datos regresando un valor; en cambio, es necesario pasarle una funcion como <em>callback</em>. Usted no "guarda" un valor en la base de datos, o "lee" un valor de la misma por medios síncronos. En cambio, usted "solicita" una operación a la base de datos. Un evento del DOM es utilizado para notificarle que la operación terminó, y el tipo de evento recibido le permite saber si ésta falló o si fue exitosa. Esto puede sonar complicado al comienzo, pero hay algunas medidas de sanidad incluidas por defecto. Esto no es muy distinto de cómo funciona <a href="/es/DOM/XMLHttpRequest" title="https://developer.mozilla.org/en/xmlhttprequest">XMLHttpRequest</a>.</p> - </li> - <li> - <p><strong>IndexedDB usa solicitudes en todos lados. </strong>Las solicitudes (<em>requests</em>) son objetos que reciben los eventos del DOM mencionados previamente. Éstas cuentan con las propiedades <code style="font-size: 14px;">onsuccess</code> y <code style="font-size: 14px;">onerror</code>, sobre las cuales se puede aplicar <code style="font-size: 14px;">addEventListener()</code> y <code style="font-size: 14px;">removeEventListener()</code>. Estas también tienen las propiedades <code style="font-size: 14px;">readyState</code>, <code style="font-size: 14px;">result</code>, y <code style="font-size: 14px;">errorCode</code> que permiten conocer el estado de la solicitud. La propiedad <code style="font-size: 14px;">result</code> es particularmente mágica, dado que puede ser muchas cosas distintas, dependiendo de cómo se generó la solicitud (por ejemplo, una instancia de <code>IDBCursor</code>, o la llave de un valor recién insertado en la base de datos).</p> - </li> - <li> - <p><strong>IndexedDB usa eventos DOM para notificar cuando los resultados están disponibles.</strong> Los eventos del DOM siempre tienen una propiedad <code style="font-size: 14px;">type</code> (en IndexedDB, ésta es generalmente <code style="font-size: 14px;">"success"</code> o <code style="font-size: 14px;">"error"</code>). Los eventos del DOM también tienen una propiedad <code style="font-size: 14px;">target</code> que dice a dónde apunta el evento. En la mayoría de los casos, el <code style="font-size: 14px;">target</code> de un evento es el objeto <code style="font-size: 14px;">IDBRequest</code> que se generó como resultado de una operación sobre la base de datos. Los eventos exitosos no son pasados a los padres y no pueden ser cancelados. Por otro lado, los eventos de error son pasados a los padres del target y pueden cancelarse. Esto es importante, dado que los eventos de error cancelan cualquier transacción sobre la que estén corriendo a menos que sean cancelados.</p> - </li> - <li> - <p><strong>IndexedDB es orientada a objetos.</strong> IndexedDB no es una base de datos relacional, con tablas, filas y columnas. Esta diferencia fundamental e importante afecta la manera como usted diseña e implementa sus aplicaciones.</p> - - <p>En un almacén de datos relacional, usted podría tener una tabla que almacena una colección de filas de datos y columnas de tipos de datos con un nombre. IndexedDB, por otro lado, necesita que usted cree un almacén de objetos para un tipo de datos y sencillamente almacena objetos JavaScript en ese almacén. Cada almacén de objetos puede tener una colección de índices que hacen que la iteración y la búsqueda de elementos sea más eficiente. Si usted no está familiarizado con los sistemas de manejo de datos orientados a objetos, lea el <a class="external" href="https://es.wikipedia.org/wiki/Base_de_datos_orientada_a_objetos" title="http://en.wikipedia.org/wiki/Object_database">artículo de la Wikipedia sobre bases de datos orientadas a objetos</a>.</p> - </li> - <li> - <p><strong>IndexedDB no utiliza SQL (</strong><strong>Structured Query Language).</strong> En cambio usa consultas sobre un índice que producen un cursor. Éste puede utilizarse para iterar sobre el conjunto de resultados. Si no está familiarizado con sistemas NoSQL, lea el <a class="external" href="https://es.wikipedia.org/wiki/NoSQL" title="http://en.wikipedia.org/wiki/NoSQL">artículo de Wikipedia sobre NoSQL</a>.</p> - </li> - <li> - <p><a name="origin"><strong>IndexedDB se adhiere a una política de mismo origen</strong></a>. Un orígen es el dominio, protocolo de la capa de aplicación, y el puerto de la URL del documento donde se está ejecutando la aplicación. Cada orígen tiene su propio conjunto de bases de datos asociado. Cada base de datos tiene un nombre que la identifica dentro de un orígen.</p> - - <p>El límite de seguridad impuesto en IndexedDB prevé que las aplicaciones puedan acceder a datos de un orígen diferente. Por ejemplo, mientras una aplicación en <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.example.com/app/</a> puede obtener datos desde <a class="external" href="http://www.example.com/dir/" rel="freelink">http://www.example.com/dir/</a>, debido a que comparten un mismo orígen, esta no puede leer datos desde <a class="external" href="http://www.example.com:8080/dir/" rel="freelink">http://www.example.com:8080/dir/</a> (puerto distinto) o desde <a class="link-https" href="https://www.example.com/dir/" rel="freelink">https://www.example.com/dir/</a> (protocolo distinto), debido a que tienen distintos orígenes.</p> - </li> -</ul> - -<h2 id="definitions" name="definitions">Definiciones</h2> - -<p>Esta sección define y explica los términos utilizados en la API de IndexedDB.</p> - -<h3 id="database" name="database">Base de Datos</h3> - -<dl> - <dt><a name="gloss_database">base de datos</a></dt> - <dd>Un repositorio de información, típicamente compuesto de uno o más <a href="#gloss_object_store" title="#gloss_object_store"><em>almacenes de objetos</em></a>. Cada base de datos debe tener: - <ul> - <li><strong>Nombre</strong>. Identifica la base de datos dentro de un mismo origen y no cambia a lo largo de la existencia de ésta. El nombre puede ser cualquier cadena de caracteres (incluyendo una vacía).</li> - <li> - <p><strong><a href="#gloss_version"><em>Versión</em></a> actual</strong>. Cuando una base de datos se crea por primera vez, la versión es el número entero 1 si no se indica otra cosa. Cada base de datos puede tener una y sólo una versión en cualquier momento.</p> - </li> - </ul> - </dd> - <dt><a name="gloss_object_store">almacén de objetos</a></dt> - <dd> - <p>El mecanismo a través del cual los datos son almacenados en la base de datos. El almacén de objetos mantiene registros de manera persistente, que son pares de llave-valor. Los registros dentro de un almacén de objetos son ordenados de acuerdo con las <em><a href="#gloss_key">llaves</a></em> en orden ascendente.</p> - - <p>Todo almacén de objetos debe tener un nombre que es único a lo largo de su base de datos. Opcionalmente puede tener un <em><a href="#gloss_keygenerator">generador de llaves</a></em> y una <em><a href="#gloss_keypath">ruta de llaves</a></em>. Si el almacén tiene una ruta de llaves, éste utiliza <em><a href="#gloss_inline_key">llaves en línea</a></em>; si no, utiliza <em><a href="#gloss_outofline_key">llaves fuera de línea</a></em>.</p> - - <p>Para documentación de referencia sobre los almacenes de objetos, vew <a href="../../../../en/IndexedDB/IDBObjectStore" rel="internal">IDBObjectStore</a> o <a href="../../../../en/IndexedDB/IDBObjectStoreSync" rel="internal">IDBObjectStoreSync</a>.</p> - </dd> - <dt><a name="gloss_version">versión</a></dt> - <dd>Cuando una base de datos es creada por primera vez, su versión es 1. Cada base de datos tiene una versión en cualquier momento y no puede tener varias versiones al mismo tiempo. La única manera de cambiar la versión es abrir la base de datos con una versión mayor a la actual. Esto arranca una <em>transacción</em> <code>versionchang<em>e</em></code> y dispara el evento <code>upgradeneeded</code>. El único momento cuando se puede actualizar el esquema de la base de datos es dentro del manejador de este evento.</dd> - <dd>Nota: Esta definición describe la <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">especificación más actual</a>, que solo está implementada por las versiones más nuevas de los navegadores. Los navegadores más antiguos implementaron el método <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="/en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a>, que ya ha sido marcado obsoleto y removido.</dd> - <dt><a name="gloss_database_connection">conexión a la base de datos</a></dt> - <dd>Una operación creada al abrir una <em><a href="#gloss_database">base de datos</a></em>. Una base de datos puede tener múltiples conexiónes al mismo tiempo.</dd> - <dt><a name="gloss_transaction">transacción</a></dt> - <dd> - <p>Un conjunto atómico y durable de operaciónes de acceso y modificación de datos sobre una base de datos particular. Esta es la manera cómo se interactúa con los datos de una base de datos. De hecho, cualquier lectura o modificación de datos en la base de datos debe ocurrir dentro de una transacción.</p> - - <p>Una conexión a la base de datos puede tener varias transacciones activas, siempre que las operaciones de escrituras no tengan <a href="#scope"><em>ámbitos</em></a> que se solapen. El ámbito de las transacciones, que es definido al momento en que éstas son creadas, determina con qué almacenes de datos puede interactuar ésta y permanece constante a lo largo de su existencia. Así, por ejemplo, si una conexión tiene una transacción escribiendo con un ámbito que abarca solo el almacén <code>flyingMonkey</code>, se puede iniciar una segunda que tenga como ámbito los almacenes <code>unicornCentaur</code> y <code>unicornPegasus</code>. En el caso de las transacciones de lectura, se pueden tener varias aún cuando se solapen.</p> - - <p>Se espera que las transacciones tengan una existencia corta, de manera que el navegador puede cancelar una transacción que tome demasiado tiempo para liberar recursos que la misma tenga bloqueados. Usted puede abortar la transacción, lo que deshace los cambios hechos a la base de datos durante la misma. Ni siquiera es necesario esperar a que la transacción inicie para abortarla.</p> - - <p>Los tres modos de transacción son: <code>readwrite</code>, <code>readonly</code>, y <code>versionchange</code>. La única manera de crear y borrar almacenes es usar una transacción <code>versionchange</code>. Para aprender más sobre los tipos de transacción, vea al artículo de referencia de <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a>.</p> - - <p>Debido a que todo sucede dentro de una transacción, este es un concepto muy importante. Para aprender más sobre las transacciones, especialmente sobre como se relacionan con el versionado, vea <a href="../../../../en/IndexedDB/IDBTransaction" rel="internal">IDBTransaction</a>, que también cuenta con documentación de referencia. Para la documentación sobre la API asíncrona, vea <a href="../../../../en/IndexedDB/IDBTransactionSync" rel="internal">IDBTransactionSync</a>.</p> - </dd> - <dt><a name="gloss_request">solicitud</a></dt> - <dd>La operación por medio de la cual se lee o se escribe en una base de datos. Toda solicitud representa una y solo una operación de lectura o escritura.</dd> - <dt><a name="gloss_index">índice</a></dt> - <dd> - <p>Un almacén especializado para buscar registros en otro almacén, llamado <em>almacén de objetos referenciado</em>. El índice es un almacenamiento persistente llave-valor donde el valor es una llave del almacén referenciado. Los registros en un índice son rellenados automáticamente cada vez que se modifican los registros del almacén referenciado. Cada registro en un índice puede apuntar solo a un registro de su almacén referenciado, pero varios índices pueden apuntar al mismo almacén.</p> - - <p>Alternativamente, se pueden realizar búsquedas en un almacén de objetos usando la <a href="#gloss_key">llave</a><em>.</em></p> - - <p>Para aprender más sobre el uso de los índices, vea <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index" title="en/IndexedDB/Using_IndexedDB#Using_an_index">Usando IndexedDB</a>. Para documentación de referencia, vea <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p> - </dd> -</dl> - -<h3 id="key" name="key">Llave y valor</h3> - -<dl> - <dt><a name="gloss_key">llave</a></dt> - <dd> - <p>Es uno de los atributos del objeto a partir del cual los demás objetos son organizados y obtenidos desde el almacén de objetos. El almacén puede derivar una llave desde uno de tres orígenes: un <em><a href="#gloss_keygenerator">generador de llaves</a></em>, una <em><a href="#gloss_keypath">ruta de llave</a></em><a>, y un valor indicado de forma explícita. La llave debe ser de un tipo de datos que tenga un número creciente en relación con los objetos almacenados previamente. Cada registro en un almacén de datos debe tener una llave única en el almacén, de manera que no se pueden tener varios objetos con la misma llave en un almacén de objetos dado.</a></p> - <a> </a> - - <p><a>Una llave puede ser de uno de los siguientes tipos: </a><a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String" title="String">String</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date" title="Date">Date</a>, float, y <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array" title="Array">Array</a>. Para los arreglos, la llave puede tener un rango desde un valor vacío hasta infinito, y puede incluirse un arreglo dentro de otro. No se requiere usar solo cadenas o enteros para las llaves.</p> - - <p>Como alternativa, se pueden realizar búsquedas de objetos usando un <em><a href="#gloss_index">índice</a>.</em></p> - </dd> - <dt><a name="gloss_keygenerator">generador de llaves</a></dt> - <dd>Es un mecanismo para producir nuevas llaves en una secuencia ordenada. Si un almacén de objetos no tiene un generador de llaves, entonces la aplicación debe proveer llaves para los registros que se almacenen. Los generadores no son compartidos entre almacenes. Esto es un detalle de implementación de los navegadores, porque en desarrollo web, realmente no se crea o se accede a un generador de llaves.</dd> - <dt><a name="gloss_inline_key">llaves en línea</a></dt> - <dd>Es una llave que se almacena como parte del valor almacenado. La manera como se determina cuál es la llave es utilizando una <em>ruta de llave</em>. Una llave en línea puede obtenerse con un generador. Después de que la llave ha sido generada, esta puede almacenarse en el valor usando la ruta del atributo o puede ser usada directamente como llave.</dd> - <dt><a name="gloss_outofline_key">llave fuera de línea</a></dt> - <dd>Una llave que se almacena separada del valor.</dd> - <dt><a name="gloss_keypath">ruta de llave</a></dt> - <dd>Define de dónde se debe extraer la llave desde un valor en el almacén o en un índice. Una ruta de llave válida puede incluir alguno de los siguientes: una cadena vacía, un identificador de JavaScript, o múltiples identificadores de JavaScript separados con puntos. No puede incluir espacios.</dd> - <dt><a name="gloss_value">valor</a></dt> - <dd> - <p>Cada registro tiene un valor, el cual puede ser cualquier cosa que pueda ser expresada en JavaScript, incluyendo: <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Boolean" rel="internal" title="Boolean">booleanos</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number" rel="internal" title="Number">números</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String" title="String">cadenas</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date" title="Date">fechas</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object" title="Object">objetos</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array" rel="internal" title="Array">arreglos</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/RegExp" rel="internal" title="RegExp">expresiones regulares</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/undefined" title="undefined">undefined</a>, y null.</p> - - <p>Cuando un objeto o un arreglo es almacenado, las propiedades y valores en ese objeto o arreglo pueden ser cualquier cosa que sea un valor válido.</p> - - <p>Se pueden almacenar <a href="/en/DOM/Blob" title="en/DOM/Blob">Blobs</a> y archivos. cf. <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">especificación</a>.</p> - </dd> -</dl> - -<h3 id="range" name="range">Rango y ámbito</h3> - -<dl> - <dt>ámbito</dt> - <dd>El conjunto de almacenes de objetos e índices en los que una transacción aplica. Los ámbitos de varias transacciones de solo lectura pueden solaparse y ejecutarse al mismo tiempo. En cambio, los ámbitos de transacciones de escritura no pueden solaparse. Aún así se pueden crear varias transacciones con el mismo ámbito al mismo tiempo, pero éstas serán manejadas por una cola y ejecutadas una detrás de otra.</dd> - <dt>cursor</dt> - <dd>Un mecanismo para iterar a través de múltiples registros con un <em>rango de llaves</em>. El cursor tiene un orígen que indica que índice o almacén de datos está iterando. El cursor tiene una posición dentro del rango, y se mueve en dirección creciente o decreciente en el orden de las llaves de cada registro. Para obtener documentación de referencia sobre cursores, vea <a href="../../../../en/IndexedDB/IDBCursor" rel="internal">IDBCursor</a> o <a href="../../../../en/IndexedDB/IDBCursorSync" rel="internal">IDBCursorSync</a>.</dd> - <dt>rango de llaves</dt> - <dd> - <p>Un intervalo continuo sobre algún tipo de datos utilizado para las llaves. Los registros pueden obtenerse desde los almacenes e índices usando llaves o un rango de llaves. Los rangos pueden limitarse o filtrarse con umbrales inferiores y superiores. Por ejemplo, se puede iterar sobre todos los valores de una llave desde x hasta y.</p> - - <p>Para documentación de referencia sobre los rangos de llaves, vea <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p> - </dd> -</dl> - -<h2 id="limitations" name="limitations">Limitaciones</h2> - -<p>IndexedDB está diseñado para cubrir la mayoría de los casos en los que se necesita almacenamiento del lado del cliente. Sin embargo, no están contemplados en su diseño unos pocos casos como los siguientes:</p> - -<ul> - <li>Ordenamiento internacionalizado. No todos los idiomas ordenan las cadenas de la misma forma, por lo que el ordenamiento internacionalizado no está soportado. Aún cuando la base de datos no puede ordenar los datos respetando su idioma, usted puede ordenar los datos obtenidos de la base de datos por su cuenta.</li> - <li>Sincronización. La API no está diseñada para tomar en cuenta la sincronización con una base de datos del lado del servidor. Usted debe escribir el código de sincronización para estos casos.</li> - <li>Búsqueda de Texto Completo. La API no ofrece un equivalente al operador <span style="direction: ltr;"><code>LIKE</code> en SQL. </span></li> -</ul> - -<p>Adicionalmente, tenga en cuenta que los navegadores podrían eliminar la base de datos, como en las siguientes condiciones:</p> - -<ul> - <li>El usuario pide borrar los datos del navegador.<br> - Muchos navegadores tienen opciones que permiten al usuario eliminar todos los datos almacenados de un sitio, incluyendo cookies, marcadores, contraseñas, y datos de IndexedDB.</li> - <li>El navegador está en modo de navegación privada.<br> - Algunos navegadores tienen modos de "navegación privada" (Firefox) o "incógnito" (Chrome). Al final de la sesión, el navegador elimina la base de datos.</li> - <li>Se alcanza el límite de espacio en disco.</li> - <li>Los datos se corrompen.</li> - <li>Se realiza un cambio incompatible a ésta característica.</li> -</ul> - -<p>Las circunstancias exactas y capacidades de los navegadores cambian con el tiempo, pero la filosofía de los navegadores es, en general, hacer lo posible por conservar los datos.</p> - -<div class="warning"> -<p><strong>Advertencia:</strong> Al momento, debido a errores o a propósito, es imposible abrir una base de datos IndexedDB desde un <a href="https://developer.mozilla.org/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets">Web App</a>. Esto requiere mayor investigación para documentarlo.</p> -</div> - -<h2 id="next" name="next">Próximo paso</h2> - -<p>Ok, ahora con estos conceptos generales bajo nuestros cinturones, podemos seguir a cosas más concretas. Para un tutorial sobre como utilizar la API, vea <a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Usando IndexedDB</a>.</p> - -<h2 id="Vea_también">Vea también</h2> - -<p>Especificación</p> - -<ul> - <li><a href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/"><span style="direction: ltr;">Especificación de la API de IndexedDB</span></a></li> -</ul> - -<p>Referencia</p> - -<ul> - <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">Referencia de la API de IndexedDB</a></li> -</ul> - -<p>Tutoriales</p> - -<ul> - <li><a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Usando IndexedDB</a></li> - <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">Una lista de tareas sencilla usando HTML5 e IndexedDB</a><span class="external">. </span><span class="external"> {{ Note("Este ejemplo usa una versión antigua de la especificación y no funciona en las versiones más recientes de los navegadores principales (aún utiliza el método <code>setVersion()</code>, que fue removido.") }}</span></li> -</ul> - -<p>Artículo relacionado</p> - -<ul> - <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — El almacén en su navegador</a></li> -</ul> diff --git a/files/es/orphaned/web/api/parentnode/append/index.html b/files/es/orphaned/web/api/parentnode/append/index.html deleted file mode 100644 index 4944a7fe68..0000000000 --- a/files/es/orphaned/web/api/parentnode/append/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: ParentNode.append() -slug: orphaned/Web/API/ParentNode/append -translation_of: Web/API/ParentNode/append -original_slug: Web/API/ParentNode/append ---- -<div>{{APIRef("DOM")}}</div> - -<p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">El método </span></font><strong>ParentNode.append()</strong></code> inserta un conjunto de objetos de tipo {{domxref("Node")}} u objetos de tipo {{domxref("DOMString")}} después del último hijo de <code>ParentNode</code>. Los objetos {{domxref("DOMString")}} son insertados como nodos {{domxref("Text")}} equivalentes.</p> - -<p>Diferencias con {{domxref("Node.appendChild()")}}:</p> - -<ul> - <li><code>ParentNode.append()</code> te permite también agregar objetos {{domxref("DOMString")}}, mientras que <code>Node.appendChild()</code> solo acepta objetos {{domxref("Node")}}.</li> - <li><code>ParentNode.append()</code> no tiene valor de retorno, en cambio, <code>Node.appendChild()</code> devuelve el objeto {{domxref("Node")}} agregado.</li> - <li><code>ParentNode.append()</code> puede agregar varios nodos y cadenas, mientras que <code>Node.appendChild()</code> sólo puede agregar uno.</li> -</ul> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">[Throws, Unscopable] -void ParentNode.append((Node or DOMString)... nodes); -</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd>Un conjunto de {{domxref("Node")}} u objetos {{domxref("DOMString")}} a agegar.</dd> -</dl> - -<h3 id="Exceptions">Exceptions</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: Node cannot be inserted at the specified point in the hierarchy.</li> -</ul> - -<h2 id="Examples">Examples</h2> - -<h3 id="Appending_an_element">Appending an element</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -parent.append(p); - -console.log(parent.childNodes); // NodeList [ <p> ] -</pre> - -<h3 id="Appending_text">Appending text</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -parent.append("Some text"); - -console.log(parent.textContent); // "Some text"</pre> - -<h3 id="Appending_an_element_and_text">Appending an element and text</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -parent.append("Some text", p); - -console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]</pre> - -<h3 id="ParentNode.append_is_unscopable"><code>ParentNode.append()</code> is unscopable</h3> - -<p>The <code>append()</code> method is not scoped into the <code>with</code> statement. See {{jsxref("Symbol.unscopables")}} for more information.</p> - -<pre class="brush: js">var parent = document.createElement("div"); - -with(parent) { - append("foo"); -} -// ReferenceError: append is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>You can polyfill the <code>append() method</code> in Internet Explorer 9 and higher with the following code:</p> - -<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('append')) { - return; - } - Object.defineProperty(item, 'append', { - configurable: true, - enumerable: true, - writable: true, - value: function append() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.appendChild(docFrag); - } - }); - }); -})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre> - -<h2 id="Specification">Specification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.ParentNode.append")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li> - <li>{{domxref("ParentNode.prepend()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("ChildNode.after()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/es/orphaned/web/api/parentnode/children/index.html b/files/es/orphaned/web/api/parentnode/children/index.html deleted file mode 100644 index f8ae9e5831..0000000000 --- a/files/es/orphaned/web/api/parentnode/children/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: ParentNode.children -slug: orphaned/Web/API/ParentNode/children -tags: - - API - - DOM - - ParentNode - - Propiedad -translation_of: Web/API/ParentNode/children -original_slug: Web/API/ParentNode/children ---- -<p>{{ APIRef("DOM") }}</p> - -<p><code><strong>Node.children</strong></code> es una propiedad de sólo lectura que retorna una {{domxref("HTMLCollection")}} "viva" de los elementos hijos de un <code>Node</code>.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">var <em>children</em> = <em>node</em>.children; </pre> - -<p><code><var>children</var></code> es una {{ domxref("HTMLCollection") }}, que es una colección ordenada de los elementos DOM que son hijos <code>de <em>node</em></code>. Si no hay elementos hijos, entonces <code><var>children</var></code> no contendrá elementos y su longitud ( <code>length</code> ) será <code>0</code>.</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<pre class="brush: js">var foo = document.getElementById('foo'); -for (var i = 0; i < foo.children.length; i++) { - console.log(foo.children[i].tagName); -} -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<pre class="brush: js">// Sobrescribe el prototipo 'children' nativo. -// Añade soporte para Document y DocumentFragment en IE9 y Safari. -// Devuelve un array en lugar de HTMLCollection. -;(function(constructor) { - if (constructor && - constructor.prototype && - constructor.prototype.children == null) { - Object.defineProperty(constructor.prototype, 'children', { - get: function() { - var i = 0, node, nodes = this.childNodes, children = []; - while (node = nodes[i++]) { - if (node.nodeType === 1) { - children.push(node); - } - } - return children; - } - }); - } -})(window.Node || window.Element); -</pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observaciones</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definición Inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Edge</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0 [1]</td> - <td>38.0</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>29.0</td> - <td>{{CompatGeckoDesktop("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Soporte en {{domxref("SVGElement")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td>Soporte básico {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Internet Explorer 6, 7 y 8 lo soportan, pero incluyen nodos {{domxref("Comment")}} de manera errónea.</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>Las interfaces {{domxref("ParentNode")}} y {{domxref("ChildNode")}}.</li> - <li> - <div class="syntaxbox">Tipos e objetos que implementan este interfaz: {{domxref("Document")}}, {{domxref("Element")}}, y {{domxref("DocumentFragment")}}.</div> - </li> -</ul> diff --git a/files/es/orphaned/web/api/parentnode/firstelementchild/index.html b/files/es/orphaned/web/api/parentnode/firstelementchild/index.html deleted file mode 100644 index c809951fdf..0000000000 --- a/files/es/orphaned/web/api/parentnode/firstelementchild/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: ParentNode.firstElementChild -slug: orphaned/Web/API/ParentNode/firstElementChild -translation_of: Web/API/ParentNode/firstElementChild -original_slug: Web/API/ParentNode/firstElementChild ---- -<p>{{ APIRef("DOM") }}</p> - -<p><span style="font-family: verdana,tahoma,sans-serif;">La propiedad de sólo lectura </span><strong><code>ParentNode.firstElementChild</code></strong> retorna el primer hijo del objeto {{domxref("Element")}}, o bien <code>null</code> si no existen elementos hijos.</p> - -<div class="note"> -<p>Esta propiedada fue definida inicialmente en el interfaz puro {{domxref("ElementTraversal")}}. Como este interfaz contenía dos juegos distintos de propiedades, uno orientado a {{domxref("Node")}} que tenía hijos, y otro a aquellos que eran hijos, se trasladaron a dos interfaces puros separados, {{domxref("ParentNode")}} y {{domxref("ChildNode")}}. En este caso, <code>firstElementChild</code> fue movido a {{domxref("ParentNode")}}. Es un cambio de carácter estrictamente técnico que no debería afectar a la compatibilidad.</p> -</div> - -<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxis</h2> - -<pre class="syntaxbox">var <em>childNode</em> = elementNodeReference.firstElementChild; -</pre> - -<h2 id="Example" name="Example">Ejemplo</h2> - -<pre class="brush: html"><p id="para-01"> - <span>First span</span> -</p> - -<script type="text/javascript"> - var p01 = document.getElementById('para-01'); - alert(p01.firstElementChild.nodeName) -</script></pre> - -<p>En este ejemlpo, la alerta muestra 'span', que es el nombre de la etiqueta del primer nodo hijo dele elemento párrafo.</p> - -<h2 id="Polyfill_para_Internet_Explorer_8">Polyfill para Internet Explorer 8</h2> - -<p>Esta propiedad no está soportada con anterioridad a IE9, así que el siguiente fragmento puede ser usado para añadir el soporte a IE8:</p> - -<pre class="brush: js">// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js -if(!("firstElementChild" in document.documentElement)){ - Object.defineProperty(Element.prototype, "firstElementChild", { - get: function(){ - for(var nodes = this.children, n, i = 0, l = nodes.length; i < l; ++i) - if(n = nodes[i], 1 === n.nodeType) return n; - return null; - } - }); -}</pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observaciones</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Dividido el interfaz <code>ElementTraversal</code> en {{domxref("ChildNode")}} y <code>ParentNode</code>. Este método queda definido ahora en el segundo.<br> - Los {{domxref("Document")}} y {{domxref("DocumentFragment")}} implementaron los nuevos interfaces.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Añadida su definición inicial al interfaz puro <code>ElementTraversal</code> y lo usa en {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>29.0</td> - <td>{{CompatGeckoDesktop("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>Los interfaces puros {{domxref("ParentNode")}} y {{domxref("ChildNode")}}.</li> - <li> - <div class="syntaxbox">Objetos que implementan estos interfaces puros: {{domxref("Document")}}, {{domxref("Element")}}, y {{domxref("DocumentFragment")}}.</div> - </li> -</ul> diff --git a/files/es/orphaned/web/api/parentnode/index.html b/files/es/orphaned/web/api/parentnode/index.html deleted file mode 100644 index 726bd7d0f5..0000000000 --- a/files/es/orphaned/web/api/parentnode/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: ParentNode -slug: orphaned/Web/API/ParentNode -tags: - - API DOM Tab - - NeedsTranslation - - TopicStub -translation_of: Web/API/ParentNode -original_slug: Web/API/ParentNode ---- -<p>{{ APIRef("DOM") }}</p> - -<p>The <code><strong>ParentNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have children.</p> - -<p><code>ParentNode</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("Document")}}, and {{domxref("DocumentFragment")}} objects.</p> - -<p> </p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{ domxref("ParentNode.children") }} {{experimental_inline}} {{readonlyInline}}</dt> - <dd>Returns a live {{domxref("HTMLCollection")}} containing all objects of type {{domxref("Element")}} that are children of this <code>ParentNode</code>.</dd> - <dt>{{ domxref("ParentNode.firstElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("Element")}} that is the first child of this <code>ParentNode</code>, or <code>null</code> if there is none.</dd> - <dt>{{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("Element")}} that is the last child of this <code>ParentNode</code>, or <code>null</code> if there is none.</dd> - <dt>{{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}</dt> - <dd>Returns an <code>unsigned long</code> giving the amount of children that the object has.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>There is no inherited or specific and implemented methods.</em></p> - -<h2 id="Specification">Specification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. The <code>firstElementChild</code>, <code>lastElementChild</code>, and <code>childElementCount</code> properties are now defined on the latter.<br> - The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.<br> - Added the <code>children</code> property.<br> - Added the <code>append()</code> and <code>prepend()</code> methods.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<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 (on {{domxref("Element")}})</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0 [1]</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>29.0</td> - <td>{{CompatGeckoDesktop("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>append()</code> and <code>prepend()</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</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 (on {{domxref("Element")}})</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>append()</code> and <code>prepend()</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Internet Explorer 6, 7 and 8 supported it, but erroneously returns {{domxref("Comment")}} nodes as part of the results.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("ChildNode")}} pure interface.</li> - <li> - <div class="syntaxbox">Object types implementing this pure interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div> - </li> -</ul> diff --git a/files/es/orphaned/web/api/parentnode/lastelementchild/index.html b/files/es/orphaned/web/api/parentnode/lastelementchild/index.html deleted file mode 100644 index 621e139fb8..0000000000 --- a/files/es/orphaned/web/api/parentnode/lastelementchild/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: ParentNode.lastElementChild -slug: orphaned/Web/API/ParentNode/lastElementChild -translation_of: Web/API/ParentNode/lastElementChild -original_slug: Web/API/ParentNode/lastElementChild ---- -<p>{{ APIRef("DOM") }}</p> - -<p>La propiedad de sólo lectura <code><strong>ParentNode.lastElementChild</strong></code> retorna el último hijo del objeto {{domxref("Element")}} o bien <code>null</code> si no hay elementos hijos.</p> - -<div class="note"> -<p>Esta propiedad fue inicialmente definida en el interfaz puro {{domxref("ElementTraversal")}}. Dado que este interfaz contenía dos juegos distintos de propiedades, uno dirigido al nodo {{domxref("Node")}} que tiene hijos, y otro a aquellos que son hijos, se han trasladado a dos interfaces puros separados, {{domxref("ParentNode")}} y {{domxref("ChildNode")}}. En este caso, <code>lastElementChild</code> fue movido a {{domxref("ParentNode")}}. Este es un cambio de carácter técnico que no debería afectar a la compatibilidad.</p> -</div> - -<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxis</h2> - -<pre class="syntaxbox">var <em>childNode</em> = elementNodeReference.lastElementChild; </pre> - -<h2 id="Example" name="Example">Ejemplo</h2> - -<pre class="brush: html"><p id="para-01"> - <span>First span</span> - <b>bold</b> -</p> - -<script type="text/javascript"> - var p01 = document.getElementById('para-01'); - alert(p01.lastElementChild.nodeName) -</script> -</pre> - -<p>En este ejemplo, la alerta muestra "B", que es el nombre de etiqueta del último nodo hijo del elemento párrafo ("P").</p> - -<h2 id="Polyfill_para_Internet_Explorer_8">Polyfill para Internet Explorer 8</h2> - -<p>Esta propiedad no está soportada con anterioridad a IE9, así que el siguiente códigopuede ser usado para añadir el soporte a IE8:</p> - -<pre class="brush: js">// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js -if(!("lastElementChild" in document.documentElement)){ - Object.defineProperty(Element.prototype, "lastElementChild", { - get: function(){ - for(var nodes = this.children, n, i = nodes.length - 1; i >= 0; --i) - if(n = nodes[i], 1 === n.nodeType) return n; - return null; - } - }); -}</pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observaciones</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Dividido el interfaz <code>ElementTraversal</code> en {{domxref("ChildNode")}} y <code>ParentNode</code>. Este método queda ahora definido en el segundo.<br> - {{domxref("Document")}} y {{domxref("DocumentFragment")}} implementaron los nuevos interfaces.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Añadida su definición inicial al interfaz puro <code>ElementTraversal</code> y lo usa en {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>29.0</td> - <td>{{CompatGeckoDesktop("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>Los interfaces puros {{domxref("ParentNode")}} y {{domxref("ChildNode")}}.</li> - <li> - <div class="syntaxbox">Tipos de objetos que implementan este interfaz puro: {{domxref("Document")}}, {{domxref("Element")}}, y {{domxref("DocumentFragment")}}.</div> - </li> -</ul> diff --git a/files/es/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html b/files/es/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html deleted file mode 100644 index 6ff8e52560..0000000000 --- a/files/es/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Verificando la autenticidad usando contraseña -slug: orphaned/Web/API/Web_Crypto_API/Checking_authenticity_with_password -translation_of: Web/API/Web_Crypto_API/Checking_authenticity_with_password -original_slug: Web/API/Web_Crypto_API/Checking_authenticity_with_password ---- -<p>{{APIRef("Web Crypto API")}}{{draft}}</p> - -<p>La autenticidad del mensaje puede ser verificada usando el API Crypto Web. En este artículo mostrarémos como crear y controlar una firma digital utilizando una contraseña y una función hash.</p> - -<p>Un algoritmo HMAC toma una llave y genera un código digerido de la llave y los datos a firmar. Posteriormente, cualquiera con la llave puede volver a generar el mismo código digerido para verificar si los datos han sido alterados. Además, mediante el conocimiento de una clave secreta, permite almacenar juntos el código digerido y los datos: un atacante no podrá generar un código digerido sobre datos manipulados si no conoce la clave secreta.</p> - -<p>Note that this algorithm doesn't carry any information about the person owning the data, nor its unicity: the mere knowledge of the key is enough to alter the data.</p> - -<p>Let's assume that the data is stored on the computer. To access it, both for writing and reading, we will use <code>localforage.js</code> a small library wrapping the different storages capabilities of a browser in the same interface. This library is not an essential component of this use case and is used here for convenience, to keep focused on what really matter, the cryptographic part.</p> - -<p>The data we want to access is of the form:</p> - -<p> </p> - -<p>where <code>data</code><em> </em>is the information to guarantee the integrity and <code>signature</code> the information used to verify it.</p> - -<p>Cryptographic keys can't be remembered by heart by human, and passwords, or passphrases, make bad, that is unsecure, cryptographic key. To solve this problem, cryptographers have designed algorithms generating cryptographically-sound keys from password. Knowing the password allowed to regenerate the same key and to use it.</p> - -<p>We ask the user for a password, and we use it to generate the key:</p> - -<pre> </pre> - -<p>With that key, we will be able to compute the <em>mac</em> of the data.</p> - -<pre> </pre> |