diff options
Diffstat (limited to 'files/es/web/api/document')
55 files changed, 5262 insertions, 0 deletions
diff --git a/files/es/web/api/document/abrir/index.html b/files/es/web/api/document/abrir/index.html new file mode 100644 index 0000000000..13b541561d --- /dev/null +++ b/files/es/web/api/document/abrir/index.html @@ -0,0 +1,109 @@ +--- +title: Document.open() +slug: Web/API/Document/abrir +translation_of: Web/API/Document/open +--- +<div>{{APIRef("DOM")}}</div> + +<p>El método <strong><code>Document.open()</code></strong> abre un documento para escritura (<a href="/en-US/docs/Web/API/Document/write" title="en/DOM/document.write">writing</a>)</p> + +<p>Esto viene con algunos efectos secundarios. Por ejemplo:</p> + +<ul> + <li>Todos las atenciones de eventos actualmente registrados en el documento, los nodos dentro del documento o la ventana del documento son eliminados.</li> + <li>Todos los nodos existentes se eliminan del documento.</li> +</ul> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox notranslate">document.open(); +</pre> + +<h3 id="Parametros">Parametros</h3> + +<p>Ninguno.</p> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Una instancia del objeto Document (<code>Document)</code>.</p> + +<h2 id="Example" name="Example">Ejemplos</h2> + +<p>El código simple a continuación abre el documento y reemplaza su contenido con un número de diferentes fragmentos HTML antes de cerrarlo nuevamente.</p> + +<pre class="notranslate">document.open(); +document.write("<p>Hola mundo!</p>"); +document.write("<p>Soy un pez</p>"); +document.write("<p>El numero es 42</p>"); +document.close();</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<div class="blockIndicator note"> +<p>Traducción pendiente para el texto que sigue</p> +</div> + +<p>An automatic <code>document.open()</code> call happens when {{domxref("document.write()")}} is called after the page has loaded.</p> + +<p>For years Firefox and Internet Explorer additionally erased all JavaScript variables, etc., in addition to removing all nodes. This is no longer the case.<span class="comment">document non-spec'ed parameters to document.open</span></p> + +<h3 id="Gecko-specific_notes">Gecko-specific notes</h3> + +<p>Starting with Gecko 1.9, this method is subject to the same same-origin policy as other properties, and does not work if doing so would change the document's origin.</p> + +<p>Starting with Gecko 1.9.2, <code>document.open()</code> uses the <a href="/docs/Security_check_basics">principal</a> of the document whose URI it uses, instead of fetching the principal off the stack. As a result, you can no longer call {{domxref("document.write()")}} into an untrusted document from chrome, even using <a class="internal" href="/en/wrappedJSObject"><code>wrappedJSObject</code></a>. See <a href="/en/Security_check_basics" title="en/Security check basics">Security check basics</a> for more about principals.</p> + +<h2 id="Example" name="Example">Three-argument document.open()</h2> + +<p>There is a lesser-known and little-used three-argument version of <code>document.open()</code> , which is an alias of {{domxref("Window.open()")}} (see its page for full details).</p> + +<p>This call, for example opens github.com in a new window, with its opener set to <code>null</code>:</p> + +<pre class="brush: js notranslate"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">document</span>.<span class="cm-property">open</span>(<span class="cm-string">'https://www.github.com'</span>,<span class="cm-string">''</span>, <span class="cm-string">'noopener=true'</span>)</span></span></span></pre> + +<h2 id="Two-argument_document.open"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Two-argument document.open()</span></span></span></h2> + +<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Browsers used to support a two-argument <code>document.open()</code>, with the following signature:</span></span></span></p> + +<pre class="brush: js notranslate">document.open(<em>type</em>, <em>replace</em>)</pre> + +<p>Where <code>type</code> specified the MIME type of the data you are writing (e.g. <code>text/html</code>) and replace if set (i.e. a string of <code>"replace"</code>) specified that the history entry for the new document would replace the current history entry of the document being written to.</p> + +<p>This form is now obsolete; it won't throw an error, but instead just forwards to <code>document.open()</code> (i.e. is the equivalent of just running it with no arguments). The history-replacement behavior now always happens.</p> + +<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("HTML WHATWG", "#dom-document-open", "document.open()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Document.open")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Document")}}</li> + <li>{{domxref("Window.open()")}}</li> +</ul> diff --git a/files/es/web/api/document/adoptnode/index.html b/files/es/web/api/document/adoptnode/index.html new file mode 100644 index 0000000000..0a90679756 --- /dev/null +++ b/files/es/web/api/document/adoptnode/index.html @@ -0,0 +1,61 @@ +--- +title: Document.adoptNode() +slug: Web/API/Document/adoptNode +tags: + - API + - DOM + - DOM Reference + - Referencia + - metodo +translation_of: Web/API/Document/adoptNode +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><strong><code>Document.adoptNode()</code></strong> transfiere un {{Glossary("node/dom", "node")}} desde otro {{domxref("Document", "document", "", "1")}} al documento del método. El nodo adoptado y sus subnodos se eliminan del documento original (si lo hubiera), encuentra y su {{domxref("Node.ownerDocument", "ownerDocument")}} se cambia por el documento actual. El nodo puede entoces ser insertado en el documento actual.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>node</em> = <em>document</em>.adoptNode(<em>externalNode</em>); +</pre> + +<dl> + <dt><code>node</code></dt> + <dd>El nodo adoptado que ahora tiene este documento como su {{domxref("Node.ownerDocument", "ownerDocument")}}. El {{domxref("Node.parentNode", "parentNode")}} del nodo es <code>null</code>, esto se debe a que aún no a sido insertado en el árbol del documento. Tenga en cuenta que <code>node</code> y <code>externalNode</code> son el mismo objeto después de esta llamada.</dd> + <dt><code>externalNode</code></dt> + <dd>El nodo a ser adoptado desde otro documento.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: js">var iframe = document.querySelector('iframe'); +var iframeImages = iframe.contentDocument.querySelectorAll('img'); +var newParent = document.getElementById('images'); + +iframeImages.forEach(function(imgEl) { + newParent.appendChild(document.adoptNode(imgEl)); +}); +</pre> + +<h2 id="Notas">Notas</h2> + +<p>Los nodos de documentos externos deberían ser clonados utilizando {{domxref("document.importNode()")}} (o adoptado utilizando <code>document.adoptNode()</code>) antes de que puedan ser insertados en el documento actual. Para más incidencias sobre {{domxref("Node.ownerDocument")}}, vea el <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p> + +<p>Firefox actualmente no obliga a cumplir esta regla (lo hizo un tiempo durante el desarrollo de Firefox 3, pero muchos sitios se rompían cuando esta regla era obligatoria). Animamos a los desarrolladores web a que corrijan su código para seguir esta regla con el fin de mejorar la compatibilidad futura.</p> + +<h2 id="Epecificación">Epecificación</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-adoptNode">DOM Level 3 Core: Document.adoptNode</a></li> +</ul> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados .Si desea contribuir con los datos, por favor ingrese a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envie una solicitud para adicionar los datos.</div> + +<p>{{Compat("api.Document.adoptNode")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{domxref("document.importNode")}}</li> +</ul> diff --git a/files/es/web/api/document/alinkcolor/index.html b/files/es/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..f270799c53 --- /dev/null +++ b/files/es/web/api/document/alinkcolor/index.html @@ -0,0 +1,36 @@ +--- +title: document.alinkColor +slug: Web/API/Document/alinkColor +translation_of: Web/API/Document/alinkColor +--- +<p>{{APIRef("DOM")}}</p> + +<div class="warning"> +<p><strong>Desaprobado</strong></p> +</div> + +<p>Devuelve o define el color que tendrán los vínculos activos en el cuerpo (elemento <code>body</code> del documento. Un vínculo está activo durante el tiempo entre los eventos <code>mousedown</code> (cuando se presiona el botón izquierdo del "mouse" sobre el vínculo) y <code>mouseup</code> (cuando se deja de presionar el vínculo al soltar el botón izquierdo del "mouse").</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="eval"><em>color</em> = document.alinkColor +document.alinkColor =<em>color</em> +</pre> + +<p><code>color</code> es un texto que deberá llevar el nombre del color en inglés(e.g., <code>"blue"</code>, <code>"darkblue"</code>, etc.) o el valor hexadecimal del color (e.g., <code>#0000FF</code>)</p> + +<h2 id="Notas" name="Notas">Notas</h2> + +<p>El valor por defecto de esta propiedad en Mozilla es rojo (<code>#ee0000</code> en hexadecimal).</p> + +<p><code>document.alinkColor</code> es obsoleto en <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a>. Una alternativa es el selector CSS {{ Cssxref(":active") }}.</p> + +<p>Otra alternativa es <code>document.body.aLink</code>, sin embargo éste es <a class="external" href="http://www.w3.org/TR/html401/struct/global.html#adef-alink">desaprobado en HTML 4.01</a> a favor de la alternativa CSS.</p> + +<p><a href="es/Gecko">Gecko</a> soporta tanto <code>alinkColor</code>/<code>:active</code> como {{ Cssxref(":focus") }}. Internet Explorer 6 y 7 soportan <code>alinkColor</code>/<code>:active</code> sólo para <a href="es/HTML/Element/a"> vínculos de ancla (<a>) HTML</a> y el comportamiento es el mismo que <code>:focus</code> bajo Gecko. En IE (Internet Explorer) no hay soporte para <code>:focus</code>.</p> + +<h2 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h2> + +<p>DOM Nivel 0. No es parte de ningún estándar.</p> + +<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/alinkcolor.asp">MSDN: alinkColor property</a></p> diff --git a/files/es/web/api/document/anchors/index.html b/files/es/web/api/document/anchors/index.html new file mode 100644 index 0000000000..fbcd8eea0e --- /dev/null +++ b/files/es/web/api/document/anchors/index.html @@ -0,0 +1,95 @@ +--- +title: document.anchors +slug: Web/API/Document/anchors +tags: + - API + - Desaprobado + - Documento + - HTML DOM + - Propiedad + - Referencia +translation_of: Web/API/Document/anchors +--- +<div>{{APIRef("DOM")}}{{deprecated_header()}}</div> + +<div>La propiedad de solo lectura <strong><code>anchors</code></strong> de la interfaz {{domxref("Document")}} devuelve una lista de todas las anclas (anchors) del documento.</div> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>nodeList</em> = document.anchors; +</pre> + +<h3 id="Valor">Valor</h3> + +<p>Una {{domxref("HTMLCollection")}}.</p> + +<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2> + +<pre class="eval">if ( document.anchors.length >= 5 ) { + dump("dump found too many anchors"); + window.location = "http<span class="nowiki">:</span>//www.google.com"; +} +</pre> + +<p>Lo siguiente es un ejemplo que puebla una Tabla de Contenido con cada ancla en la página:</p> + +<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Test<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="script token"><span class="language-javascript token"> +<span class="keyword token">function</span> <span class="function token">init</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> toc <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"toc"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> i<span class="punctuation token">,</span> li<span class="punctuation token">,</span> newAnchor<span class="punctuation token">;</span> + <span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> document<span class="punctuation token">.</span>anchors<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + li <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"li"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + newAnchor <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'a'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + newAnchor<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">"#"</span> <span class="operator token">+</span> document<span class="punctuation token">.</span>anchors<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>name<span class="punctuation token">;</span> + newAnchor<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> document<span class="punctuation token">.</span>anchors<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>text<span class="punctuation token">;</span> + li<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newAnchor<span class="punctuation token">)</span><span class="punctuation token">;</span> + toc<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>li<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span> +</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>init()<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">></span></span>Title<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>contents<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Contents<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>toc<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>plants<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Plants<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ol</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Apples<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Oranges<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Pears<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ol</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>veggies<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Veggies<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ol</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Carrots<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Celery<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Beats<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ol</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<p><a href="https://jsfiddle.net/S4yNp">Ver en JSFiddle</a></p> + +<h2 id="Notas" name="Notas">Notas</h2> + +<p>Por razones de retrocompatibilidad, el conjunto de anclas devuelto sólo contiene aquellas anclas creadas con el atribuo <code>name</code>, y no aquellas creadas con el atributo <code>id</code>.</p> + +<h2 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificaciones</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7577272">DOM Level 2 HTML: anchors</a></p> + +<p>{{ languages( { "en": "en/DOM/document.anchors", "pl": "pl/DOM/document.anchors", "ja": "ja/DOM/document.anchors" } ) }}</p> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + + + +<div>{{Compat("api.Document.anchors")}}</div> diff --git a/files/es/web/api/document/applets/index.html b/files/es/web/api/document/applets/index.html new file mode 100644 index 0000000000..e6ecf71b60 --- /dev/null +++ b/files/es/web/api/document/applets/index.html @@ -0,0 +1,30 @@ +--- +title: document.applets +slug: Web/API/Document/applets +translation_of: Web/API/Document/applets +--- +<p>{{APIRef("DOM")}}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p><code>applets</code> Devuelve una lista ordenada de los + + <i>applets</i> + del documento.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval"><i>nodeList</i> = document.applets +</pre> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<pre class="eval">// ( Cuando sabes que el segundo<i>applet</i> es el que quieres ) +my_java_app = document.applets[1]; +</pre> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-85113862">DOM Level 2 HTML: applets</a></p> + +<p>{{ languages( { "en": "en/DOM/document.applets", "pl": "pl/DOM/document.applets" } ) }}</p> diff --git a/files/es/web/api/document/async/index.html b/files/es/web/api/document/async/index.html new file mode 100644 index 0000000000..132fd106e1 --- /dev/null +++ b/files/es/web/api/document/async/index.html @@ -0,0 +1,33 @@ +--- +title: Document.async +slug: Web/API/Document/async +translation_of: Web/API/XMLDocument/async +--- +<p><code>document.async</code> es utilizado para indicar cuándo un llamado de {{domxref("document.load")}} debe ser sincrónico o asincrónico. <code>true</code> es su valor por defecto, indicando que el documento se cargó asincrónicamente.</p> + +<p>(Desde la versión 1.4 alpha es posible cargar documentos sincrónicamente)</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush:js">function loadXMLData(e) { + alert(new XMLSerializer().serializeToString(e.target)); // Devuelve los contenidos de querydata.xml como un string +} + +var xmlDoc = document.implementation.createDocument("", "test", null); + +xmlDoc.async = false; +xmlDoc.onload = loadXMLData; +xmlDoc.load('querydata.xml');</pre> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-3-LS/load-save.html#LS-DocumentLS">DOM Level 3 Load & Save module</a></li> +</ul> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/en-US/docs/XML_in_Mozilla" title="XML_in_Mozilla">XML in Mozilla</a></li> + <li>{{domxref("document.load")}}</li> +</ul> diff --git a/files/es/web/api/document/bgcolor/index.html b/files/es/web/api/document/bgcolor/index.html new file mode 100644 index 0000000000..7baf9c893b --- /dev/null +++ b/files/es/web/api/document/bgcolor/index.html @@ -0,0 +1,39 @@ +--- +title: document.bgColor +slug: Web/API/Document/bgColor +translation_of: Web/API/Document/bgColor +--- +<p>{{APIRef("DOM")}}{{ Deprecated_header() }}</p> + +<p><code>bgColor</code> da/define el color de fondo (bgColor) del documento actual.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval"><i>color</i> = document.bgColor +document.bgColor = +<i>color</i> +</pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<ul> + <li><code>color</code> es un texto representando el color como una palabra en inglés (e.j., "red") o en valor hexadecimal (e.j., "<code>#ff0000</code>").</li> +</ul> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval"># document.bgColor = "darkblue"; +# document.bgColor = "#ff00ff"; +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>El valor por defecto de esta propiedad en Mozilla Firefox es blanco (<code>#ffffff</code> en hexadecimal).</p> + +<p><code>document.bgColor</code> está desaprobado en <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a>. La alternativa recomendada es el uso del estilo <a href="es/CSS/background-color"> background-color</a> de CSS el cual puede ser accesado a través del DOM con <code>document.body.style.backgroundColor</code>. Otra alternativa es <code>document.body.bgColor</code>, sin embargo, ésta última también está desaprobada en HTML 4.01 a favor de la alternativa CSS.</p> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p>DOM Nivel 0. No es parte de ningún estándar.</p> + +<p>{{ languages( { "en": "en/DOM/document.bgColor", "pl": "pl/DOM/document.bgColor" } ) }}</p> diff --git a/files/es/web/api/document/body/index.html b/files/es/web/api/document/body/index.html new file mode 100644 index 0000000000..724ee899b2 --- /dev/null +++ b/files/es/web/api/document/body/index.html @@ -0,0 +1,39 @@ +--- +title: document.body +slug: Web/API/Document/body +translation_of: Web/API/Document/body +--- +<div>{{APIRef("DOM")}}</div> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>Devuelve el nodo del <code><body></code> o el nodo del <code><frameset></code> del documento.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval"><i>objRef</i> = document.body +document.body = +<i>objRef</i> +</pre> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<pre class="eval">// en HTML: <body id="oldBodyElement"></body> +alert(document.body.id); // "oldBodyElement" +var aNewBodyElement = document.createElement("body"); +aNewBodyElement.id = "newBodyElement"; +document.body = aNewBodyElement; +alert(document.body.id); // "newBodyElement" +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p><code>document.body</code> es el elemento que contiene el contenido para el documento. En documentos con contenidos <code><body></code>, devuelven el elemento <code><body></code>, y en documentos de marco de sistema, esto devuelve el elemento extremo <code><frameset></code>.</p> + +<p>Aunque <code>body</code> es programable, colocando un nuevo cuerpo en un documento efectivamente quitará a todos los hijos actuales del elemento existente <code><body></code>.</p> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-56360201">DOM Level 2 HTML: HTMLDocument.body</a></p> + +<p>{{ languages( { "en": "en/DOM/document.body", "pl": "pl/DOM/document.body" } ) }}</p> diff --git a/files/es/web/api/document/characterset/index.html b/files/es/web/api/document/characterset/index.html new file mode 100644 index 0000000000..b4fb1e2551 --- /dev/null +++ b/files/es/web/api/document/characterset/index.html @@ -0,0 +1,36 @@ +--- +title: document.characterSet +slug: Web/API/Document/characterSet +translation_of: Web/API/Document/characterSet +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>Devuelve la codificación de caracteres (conjunto de caracteres) usado en el documento.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval"><i>string</i> = document.characterSet +</pre> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<pre class="eval"><button onclick="alert(document.characterSet);" +>Mostrar conjunto de caracteres</button> +// devuelve el conjunto de caracteres del documento, por ejemplo "ISO-8859-1 o UTF-8" +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>La codificación de caracteres es el conjunto de caracteres usados para interpretar el documento, el cual puede ser diferente a la codificación especificada por la página (el usuario puede omitir la codificación).</p> + +<p>Para una lista completa de juegos/conjuntos de caracteres, visite: <a class="external" href="http://www.iana.org/assignments/character-sets" rel="freelink">http://www.iana.org/assignments/character-sets</a>.</p> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p>DOM Nivel 0. No es parte de ningún estándar.</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/document.characterSet", "pl": "pl/DOM/document.characterSet" } ) }}</p> diff --git a/files/es/web/api/document/clear/index.html b/files/es/web/api/document/clear/index.html new file mode 100644 index 0000000000..6208e48885 --- /dev/null +++ b/files/es/web/api/document/clear/index.html @@ -0,0 +1,31 @@ +--- +title: Document.clear() +slug: Web/API/Document/clear +tags: + - API + - Document + - HTML DOM + - Method + - NeedsCompatTable + - NeedsExample + - NeedsMarkupWork + - NeedsSpectTable + - Referencia +translation_of: Web/API/Document/clear +--- +<p>{{APIRef("DOM")}}{{ Deprecated_header() }}</p> + +<p>Método que se usa en versiones anterior a las 1.0 de Mozilla para para limpiar el documento completo.</p> + +<p>No hace nada en versiones más recientes basado en Mozilla así como en Internet Explorer y Netscape 4.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="eval">document.clear() +</pre> + +<h2 id="Especificación">Especificación</h2> + +<ul> + <li><a class="external" href="http://www.whatwg.org/html/#dom-document-clear" title="http://www.whatwg.org/html/#dom-document-clear">HTML5</a></li> +</ul> diff --git a/files/es/web/api/document/close/index.html b/files/es/web/api/document/close/index.html new file mode 100644 index 0000000000..313678de2c --- /dev/null +++ b/files/es/web/api/document/close/index.html @@ -0,0 +1,27 @@ +--- +title: Document.close() +slug: Web/API/Document/close +translation_of: Web/API/Document/close +--- +<p>{{APIRef("DOM")}}</p> + +<p>El método <code>document.close()</code> finaliza la escritura de un documento abierta con <a href="/en/DOM/document.open" title="en/DOM/document.open">document.open()</a>.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="eval">document.close(); +</pre> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre>// Abrir un documento. +// Escribir contenido en el documento. +// Cerrar el documento. +document.open(); +document.write("<p>El único contenido.</p>"); +document.close(); +</pre> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-98948567">DOM Level 2 HTML: <code>close()</code> Method</a></p> diff --git a/files/es/web/api/document/contenttype/index.html b/files/es/web/api/document/contenttype/index.html new file mode 100644 index 0000000000..f385843676 --- /dev/null +++ b/files/es/web/api/document/contenttype/index.html @@ -0,0 +1,25 @@ +--- +title: Document.contentType +slug: Web/API/Document/contentType +translation_of: Web/API/Document/contentType +--- +<p>{{ ApiRef("DOM") }}{{Non-standard_header}}</p> + +<p>Devuelve el tipo MIME con el que el documento está siendo renderizado. Puede obtenerlo a partir de los encabezados HTTP (Headers) o de otras fuentes de información MIME, y puede ser afectado por conversiones automáticas inferidas tanto por el navegador como por cualquiera de sus extensiones.</p> + +<h2 id="Notes" name="Notes">Sintáxis</h2> + +<pre class="eval"><var>contentType</var> = <var>document</var>.contentType; +</pre> + +<p><code>contentType</code> es una propiedad de sólo lectura.</p> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Esta propiedad no es afectada por los tags meta.</p> + +<h2 id="Specification" name="Specification">Especificaciones</h2> + +<p>No estándar, sólo soportada por <a href="/en/Gecko" title="en/Gecko">Gecko</a>.</p> + +<p> </p> diff --git a/files/es/web/api/document/crearatributo/index.html b/files/es/web/api/document/crearatributo/index.html new file mode 100644 index 0000000000..22f769d577 --- /dev/null +++ b/files/es/web/api/document/crearatributo/index.html @@ -0,0 +1,91 @@ +--- +title: Document.createAttribute() +slug: Web/API/Document/crearAtributo +tags: + - Atributos + - Crear Atributo + - JavaScript + - Métodos +translation_of: Web/API/Document/createAttribute +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>El método <code><strong>Document.createAttribute()</strong></code> crea un nuevo nodo de tipo atributo (attr), y lo retorna. El objeto crea un nodo implementando la interfaz {{domxref("Attr")}}. El DOM no impone que tipo de atributos pueden ser agregados a un particular elemento de esta forma.</p> + +<div class="note"> +<p>El texto pasado como parametro es convertido a minusculas.</p> +</div> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><em>atributo</em> = document.createAttribute(nombre) +</pre> + +<h3 id="Parameters" name="Parameters">Parametros</h3> + +<ul> + <li><code>nombre</code> es un string conteniendo el nombre del atributo.</li> +</ul> + +<h3 id="Valor_que_retorna">Valor que retorna</h3> + +<p>Un nodo {{domxref("Attr")}} nodo.</p> + +<h3 id="Excepciones">Excepciones</h3> + +<ul> + <li><code>INVALID_CHARACTER_ERR</code> si el parametro contiene caracteres invalidos para un atributo XML .</li> +</ul> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="brush:js">var nodo = document.getElementById("div1"); +var a = document.createAttribute("miAtributo"); +a.value = "nuevoVal"; +nodo.setAttributeNode(a); +console.log(nodo.getAttribute("miAtributo")); // "nuevoVal" +</pre> + +<h2 id="Specification" name="Specification">Especificaciones</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Comportamiento preciso con caracteres en mayuscula </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Sin cambios</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Sin cambios</td> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_buscador">Compatibilidad del buscador</h2> + +<div class="hidden">La tabla de compatibilidad en esta página es generada desde estructuras de datos. Sí le gustaría contribuir con estos datos, por favor revisar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y enviarnos un pull request.</div> + +<p>{{Compat("api.Document.createAttribute")}}</p> + +<h2 id="Ver_ademas">Ver ademas</h2> + +<ul> + <li>{{domxref("Document.createElement()")}}</li> +</ul> diff --git a/files/es/web/api/document/createdocumentfragment/index.html b/files/es/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..5137778ee7 --- /dev/null +++ b/files/es/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,119 @@ +--- +title: Document.createDocumentFragment() +slug: Web/API/Document/createDocumentFragment +translation_of: Web/API/Document/createDocumentFragment +--- +<div>{{ ApiRef("DOM") }}</div> + +<div></div> + +<p>Crea un nuevo <code><a href="/en-US/docs/DOM/DocumentFragment" title="DOM/DocumentFragment">DocumentFragment</a></code> vacio, dentro del cual un nodo del DOM puede ser adicionado para construir un nuevo arbol DOM fuera de pantalla.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox notranslate">var fragment = document.createDocumentFragment(); +</pre> + +<p>Se crea un objeto<a href="/en-US/docs/DOM/DocumentFragment" title="DOM/DocumentFragment"> DocumentFragment</a> vacio, el cual queda listo para que pueda insertarseles nodos en el.</p> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<p><a href="/en-US/docs/DOM/DocumentFragment" title="DOM/DocumentFragment"><code>DocumentFragment</code></a> son Nodos del DOM que nunca forman parte del arbol DOM. El caso de uso mas comun es crear un <em>document fragment</em>, agregar elementos al <em>document fragment</em> y luego agregar dicho <em>document fragment</em> al arbol del DOM. En el arbol del DOM, el <em>document fragment</em> es remplazado por todos sus hijos.</p> + +<p>Dado que el <em>document fragment </em>es generado en memoria y no como parte del arbol del DOM, agregar elementos al mismo no causan <a href="http://code.google.com/speed/articles/reflow.html">reflow</a> (computo de la posicion y geometria de los elementos) en la pagina. Como consecuencia, usar <em>document fragments</em> usualmente resultan en <a href="http://ejohn.org/blog/dom-documentfragments/">mejor performance</a>.</p> + +<p>Tambien puede utilizarse el constructor {{domxref("documentFragment")}} para crear un nuevo fragmento:</p> + +<pre class="syntaxbox notranslate">let fragment = new DocumentFragment();</pre> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<p>Este ejemplo crea una lista de los principales navegadores web en un <em>DocumentFragment</em>, y luego adiciona el nuevo subarbol DOM al document para ser mostrado.</p> + +<p>HTML</p> + +<pre class="notranslate"><ul id="ul"> +</ul></pre> + +<p>JavaScript</p> + +<pre class="notranslate">var element = document.getElementById('ul'); // assuming ul exists +var fragment = document.createDocumentFragment(); +var browsers = ['Firefox', 'Chrome', 'Opera', + 'Safari', 'Internet Explorer']; + +browsers.forEach(function(browser) { + var li = document.createElement('li'); + li.textContent = browser; + fragment.appendChild(li); +}); + +element.appendChild(fragment);</pre> + +<p>Resultado</p> + +<p>{{EmbedLiveSample("Example", 600, 140)}}</p> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Basico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Basico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">Especificaciónes</h2> + +<ul> + <li>DOM Level 2: <a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-35CB04B5">createDocumentFragment</a></li> + <li>DOM Level 3: <a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-35CB04B5">createDocumentFragment</a></li> +</ul> + +<h2 id="See_also" name="See_also">Vea También</h2> + +<ul> + <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li> + <li>{{domxref("documentFragment")}}</li> +</ul> diff --git a/files/es/web/api/document/createelement/index.html b/files/es/web/api/document/createelement/index.html new file mode 100644 index 0000000000..cb7b3d175b --- /dev/null +++ b/files/es/web/api/document/createelement/index.html @@ -0,0 +1,180 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Documento + - Referencia + - metodo +translation_of: Web/API/Document/createElement +--- +<div>{{APIRef("DOM")}}</div> + +<p>En un documento <a href="/en-US/docs/Web/HTML">HTML</a>, el método <strong><code>Document.createElement()</code></strong> crea un elemento HTML especificado por su <code>tagName</code>, o un {{domxref("HTMLUnknownElement")}} si su <code>tagName</code> no se reconoce. En un documento <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, crea el elemento XUL especificado. En otros documentos, crea un elemento con un namespace URI <code>null</code>.</p> + +<p>Para declarar el namespace URI del elemento, utiliza <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS" title="Creates an element with the specified namespace URI and qualified name."><code>document.createElementNS()</code></a>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: js"><var>var <em>element</em></var> = <var>document</var>.createElement(<em><var>tagName, [options]</var></em>); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>tagName</code></dt> +</dl> + +<p>Cadena que especifica el tipo de elemento a crear. El {{domxref("Node.nodeName", "nodeName")}} del elemento creado se inicializa con el valor de <code>tagName</code>. No utilizar nombres reservados (como "html:a") con este método. Al ser invocado en un documento HTML, <code>createElement()</code> convierte <code>tagName</code> a minúsculas antes de crear el elemento. En Firefox, Opera, y Chrome, <code>createElement(null)</code> funciona como <code>createElement("null")</code>.</p> + +<dl> + <dt><code>options</code>{{optional_inline}}</dt> + <dd>Un objeto opcional <code>ElementCreationOptions</code> que contiene una única propiedad llamada <code>is</code>, cuyo valor es el de la etiqueta name de un elemento personalizado definido previamente utilizando <code>customElements.define()</code>. Para compatibilidad con versiones anteriores de<a href="https://www.w3.org/TR/custom-elements/"> Elements specification</a>, algunos navegadores podrían permitir pasar una cadena aquí en vez de un objeto, donde el valor de la cadena es la etiqueta name del elemento creado. Ver <a href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a> para más información sobre como usar este parámetro.</dd> + <dd>El nuevo elemento recibirá el atributo cuyo valor es la etiqueta name del elemento personalizado. Los elementos personalizados son una característica experimental solo disponible en algunos navegadores.</dd> +</dl> + +<h3 id="Retorna">Retorna</h3> + +<p>El nuevo <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element" title="The Element interface represents an object of a Document. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality."><code>Element</code></a>.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Crea un nuevo <code><div></code> y lo inserta antes del elemento con ID "<code>div1</code>".</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><!DOCTYPE html> +<html> +<head> + <title>||Trabajando con elementos||</title> +</head> +<body> + <div id="div1">El texto superior se ha creado dinámicamente.</div> +</body> +</html> +</pre> + +<h3 id="JavaScript"><span style="line-height: normal;">JavaScript</span></h3> + +<pre class="brush:js">document.body.onload = addElement; + +function addElement () { + // crea un nuevo div + // y añade contenido + var newDiv = document.createElement("div"); + var newContent = document.createTextNode("Hola!¿Qué tal?"); + newDiv.appendChild(newContent); //añade texto al div creado. + + // añade el elemento creado y su contenido al DOM + var currentDiv = document.getElementById("div1"); + document.body.insertBefore(newDiv, currentDiv); +}</pre> + +<p>{{EmbedLiveSample("Example", 500, 50)}}</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('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1][2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Parámetro <code>options</code></td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(50)}}<sup>[4][5]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Desde Gecko 22.0 {{geckoRelease("22.0")}} <code>createElement()</code> no utiliza {{domxref("HTMLSpanElement")}} interface cuando el argumento es "bgsounds", "multicol", o "image". En cambio, <code>HTMLUnknownElement</code> se utiliza para "bgsound" y "multicol" y {{domxref("HTMLElement")}} <code>HTMLElement</code> se utiliza para "image".</p> + +<p>[2] La implementación en Gecko de <code>createElement</code> no cumple la especificación DOM para documentos XUL y XHTML: <code>localName</code> y <code>namespaceURI</code> no son inicializados como <code>null </code>en el elemento creado. Consúltese el {{ Bug(280692) }} para más información.</p> + +<p>[3] En versiones anteriores de la especificación, este argumento era solamente una cadena cuyo valor era la etiqueta <code>name</code> del elemento personalizado. Por ejemplo: Podia recibir <code>document.createElement("button", "mi-boton")</code> en lugar de <code>document.createElement("button", {id: "mi-boton"})</code>. Por razones de compatibilidad, Chrome acepta ambas formas.</p> + +<p>[4] Consultar [3] arriba: como Chrome, Firefox acepta una cadena en vez de un objeto en esta posición, pero solamente desde la versión 51 en adelante. En la versión 50, <code>options</code> debe ser un objeto.</p> + +<p>[5] Para experimentar con elementos personalizados<code> </code>en Firefox, deben establecerse las preferencias <code>dom.webcomponents.enabled</code> y <code>dom.webcomponents.customelements.enabled </code>a <code>true</code>.</p> + +<h3 id="Notas_de_CSS_Quantum">Notas de CSS Quantum</h3> + +<ul> + <li>En Gecko, cuando creas un subarbol separado (por ejemplo, un {{htmlelement("div")}} creado usando <code><strong>createElement()</strong></code> que aún no ha sido insertado en el DOM), el elemento raíz del subarbol es insertado como un elemento "block". En el nuevo motor paralelo de CSS de Firefox (tambien conocido como <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> o <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, planeado para ser publicado en Firefox 57), el elemento es insertado como "inline", según se especifica en {{bug(1374994)}}.</li> +</ul> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> +</ul> diff --git a/files/es/web/api/document/createelementns/index.html b/files/es/web/api/document/createelementns/index.html new file mode 100644 index 0000000000..29571b0978 --- /dev/null +++ b/files/es/web/api/document/createelementns/index.html @@ -0,0 +1,168 @@ +--- +title: Document.createElementNS() +slug: Web/API/Document/createElementNS +translation_of: Web/API/Document/createElementNS +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Crea un elemento del DOM con el espacio de nombres URI y un nombre calificado.</p> + +<p>Para crear un elemento sin especificar un espacio de nombre URI usa el método <a href="createElement" title="createElement">createElement</a>.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="brush: js"><var>var element</var> = <var>document</var>.createElementNS(<var>namespaceURI</var>, <var>qualifiedName</var>[, options]); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>namespaceURI</code></dt> + <dd><em>String </em>que especifica el <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">namespace URI</a> a asociar con el elemento. La propiedad <a href="/en-US/docs/DOM/element.namespaceURI">namespaceURI</a> del elemento creado es inicializada con el valor del <code>namespaceURI</code>. Ver <a href="/en-US/docs/Web/API/Document/createElementNS#Valid_Namespace_URI's">Namespace URIs válidos</a>.</dd> + <dt><code>qualifiedName</code></dt> + <dd><em>String</em> que especifica el tipo del elemento a ser creado. La propiedad <a href="/en-US/docs/DOM/element.nodeName">nodeName</a> del elemento creado es inicializada con el valor <code>qualifiedName</code>.</dd> + <dt><code>options</code><span class="inlineIndicator optional optionalInline">Opcional</span></dt> + <dd>Un objeto opcional <code>ElementCreationOptions</code> que contiene una sola propiedad llamada <code>is</code>, cuyo valor es el nombre de la etiqueta para un elemento personalizado previamente definido usando <code>customElements.define()</code>. Para retro compatibilidad con versiones previas de la <a href="https://www.w3.org/TR/custom-elements/">Especificación de Elementos Personalizados</a>, algunos navegadores te permitirán pasar un <em>String</em> aquí en lugar de un <em>Objeto</em>, donde el valor del <em>String</em> es el nombre de la etiqueta del elemento personalizado. Ver <a href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extendiendo elementos HTML nativos</a> para más información sobre como usar este parámetro.</dd> + <dd>Al nuevo elemento le será dado un atributo <code>is</code> cuyo valor es el nombre de la etiqueta del elemento personalizado. Los elementos personalizados son una característica experimental disponible solo en algunos navegadores.</dd> +</dl> + +<h3 id="Valor_de_Retorno">Valor de Retorno</h3> + +<p>El nuevo <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Elemento</a></code>.</p> + +<h2 id="Example" name="Example">Namespace URIs válidos</h2> + +<ul> + <li>HTML - Usa <code>http://www.w3.org/1999/xhtml</code></li> + <li>SVG - Usa <code>http://www.w3.org/2000/svg</code></li> + <li>XBL - Usa <code>http://www.mozilla.org/xbl</code></li> + <li>XUL - Usa <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code></li> +</ul> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<p>El código siguiente crea un elemento <div> nuevo en el namespace <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> y lo agrega al elemento vbox. Aunque no es un documento <a href="/en-US/docs/XUL" title="XUL">XUL</a> extremamente útil esto demuestra el uso de los elementos de dos namespaces distintos dentro de un solo documento:</p> + +<pre class="brush:xml"><?xml version="1.0"?> +<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + title="||Trabajando con elementos||" + onload="init()"> + +<script type="text/javascript"><![CDATA[ + var container; + var newdiv; + var txtnode; + + function init(){ + container = document.getElementById("ContainerBox"); + newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div"); + txtnode = document.createTextNode("Este es el texto que fue construido dinámicamente con createElementNS y createTextNode y luego insertado dentro del documento usando appendChild."); + newdiv.appendChild(txtnode); + container.appendChild(newdiv); + } + +]]></script> + + <vbox id='ContainerBox' flex='1'> + <html:div> + El script en esta página agregará contenido dinámico debajo: + </html:div> + </vbox> + +</page> +</pre> + +<div class="note"> +<p>El ejemplo dado arriba usa script en linea lo cúal no es recomendable en documentos XHTML. Este ejemplo en particular es un documento XUL con XHTML embedido, de cualquier forma la recomendación aplica.</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </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>Soporte</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>argumento <code>options</code> </td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(50)}}<sup>[2][3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Soporte</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] En versiones previas de la especificación el argumento fue solo un String cuyo valor fue el nombre de etiqueta del elemento personalizado. Por motivo de retro compatibilidad Chrome acepta ambas formas.</p> + +<p>[2] Ver [1] arriba: Firefox al igual que Chrome acepta un string en lugar de un objeto, pero solo de la version 51 en adelante. En la version 50 <code>options</code> debe ser un objeto.</p> + +<p>[3] Para experimentar con elementos personalizados en Firefox debes establecer las preferencias <code>dom.webcomponents.enabled</code> y <code>dom.webcomponents.customelements.enabled</code> como <code>true</code>.</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li><a href="createElement">document.createElement</a></li> + <li><a href="createTextNode">document.createTextNode</a></li> + <li><a href="../Node/namespaceURI">Node.namespaceURI</a></li> + <li><a class="external" href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</a></li> +</ul> diff --git a/files/es/web/api/document/createrange/index.html b/files/es/web/api/document/createrange/index.html new file mode 100644 index 0000000000..8c0cc63391 --- /dev/null +++ b/files/es/web/api/document/createrange/index.html @@ -0,0 +1,42 @@ +--- +title: document.createRange +slug: Web/API/Document/createRange +tags: + - Rango + - Referencia_DOM_de_Gecko + - crear rango +translation_of: Web/API/Document/createRange +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>Retorna un nuevo objeto <code><a href="https://developer.mozilla.org/es/docs/Web/API/Range">Rango</a></code>.</p> + +<h3 id="Sint.C3.A1xis" name="Sint.C3.A1xis">Sintáxis</h3> + +<pre class="eval"><var>range</var> = <var>document</var>.createRange(); +</pre> + +<p>En este ejemplo, <code>range</code> es el nuevo objeto <a href="https://developer.mozilla.org/es/docs/Web/API/Range">rango</a> creado.</p> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<pre class="eval">var range = document.createRange(); +range.setStart(startNode, startOffset); +range.setEnd(endNode, endOffset); +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>Una vez que se ha creado un objeto <code>Rango</code>, se necesita configurar sus puntos límites antes de hacer uso de la mayoría de sus métodos.</p> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-DocumentRange-method-createRange">DOM Level 2 Range: DocumentRange.createRange</a></p> + + + +<div class="noinclude"></div> + +<p>{{ languages( { "en": "en/DOM/document.createRange", "pl": "pl/DOM/document.createRange" } ) }}</p> diff --git a/files/es/web/api/document/createtextnode/index.html b/files/es/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..fc1b1488f4 --- /dev/null +++ b/files/es/web/api/document/createtextnode/index.html @@ -0,0 +1,78 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +tags: + - API + - DOM + - Documento + - Referencia + - createTextNode + - metodo +translation_of: Web/API/Document/createTextNode +--- +<div>{{APIRef("DOM")}}</div> + +<p>Crea un nuevo nodo de texto. Este método puede ser usado para escapar caracteres HTML.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var <var>text</var> = document.createTextNode(<var>data</var>); +</pre> + +<ul> + <li><var>text</var> es un nodo Text.</li> + <li><var>data</var> es una cadena de texto <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> que contiene los datos a poner en el nodo de texto.</li> +</ul> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>createTextNode example</title> +<script> +function addTextNode(text) { + var newtext = document.createTextNode(text), + p1 = document.getElementById("p1"); + + p1.appendChild(newtext); +} +</script> +</head> + +<body> + <button onclick="addTextNode('YES! ');">YES!</button> + <button onclick="addTextNode('NO! ');">NO!</button> + <button onclick="addTextNode('WE CAN! ');">WE CAN!</button> + + <hr /> + + <p id="p1">First line of paragraph.</p> +</body> +</html> +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-createtextnode', 'Document: createTextNode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("api.Document.createTextNode")}}</p> diff --git a/files/es/web/api/document/defaultview/index.html b/files/es/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..e2b44cdd71 --- /dev/null +++ b/files/es/web/api/document/defaultview/index.html @@ -0,0 +1,35 @@ +--- +title: Document.defaultView +slug: Web/API/Document/defaultView +tags: + - API + - Document + - HTML DOM + - NeedsUpdate + - Property + - Reference +translation_of: Web/API/Document/defaultView +--- +<div>{{ ApiRef() }}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>En los navegadores devuelve el objeto <a href="/en-US/docs/DOM/window" title="DOM/window">window</a> asociado con el <code>document </code>o <code>null</code> si no está disponible.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox">var win = document.defaultView;</pre> + +<p>Esta propiedad es de solo lectura.</p> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>De acuerco con <a class="external" href="http://www.quirksmode.org/dom/w3c_html.html">quirksmode</a>, <code>defaultView</code> no está soportado en IE hasta su version 9.</p> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<ul> + <li><a href="/en-US/docs/HTML/HTML5" title="HTML/HTML5">HTML5: defaultView</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView-defaultView">DOM Level 2 Views: defaultView</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Views/" title="http://www.w3.org/TR/DOM-Level-3-Views/">DOM Level 3 Views</a> (Actualmente en desarrolo como "Working Group Note" en W3C y aún no está implementado)</li> +</ul> diff --git a/files/es/web/api/document/designmode/index.html b/files/es/web/api/document/designmode/index.html new file mode 100644 index 0000000000..cf234abee9 --- /dev/null +++ b/files/es/web/api/document/designmode/index.html @@ -0,0 +1,56 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +tags: + - API + - Documento + - HTML DOM + - Propiedad + - Referencia + - editor +translation_of: Web/API/Document/designMode +--- +<div>{{ ApiRef() }}</div> + +<p><strong><code>document.designMode</code></strong> controla la posibilidad de editar un documento entero. Los valores válidos son <code>"on"</code> y <code>"off"</code>. De acuerdo a las especificaciones, el valor predeterminado de esta propiedad es <code>"off"</code>. Firefox sigue este estándar. El valor predeterminado de versiones anteriores de Chrome y IE es <code>"inherit"</code>. En IE6-10, el valor se escribe con mayúscula.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var mode = document.designMode; +document.designMode = "on" || "off";</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Hacer un documento {{HTMLElement("iframe")}} editable:</p> + +<pre class="brush: js">iframeNode.contentDocument.designMode = "on"; +</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', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> + +<p>{{Compat("api.Document.designMode")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Editando text enriquecido en Mozilla</a></li> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li><a href="https://msdn.microsoft.com/en-us/library/ms533720(v=vs.85).aspx">propiedad designMode</a> en MSDN</li> +</ul> diff --git a/files/es/web/api/document/dir/index.html b/files/es/web/api/document/dir/index.html new file mode 100644 index 0000000000..61c8a2d637 --- /dev/null +++ b/files/es/web/api/document/dir/index.html @@ -0,0 +1,76 @@ +--- +title: Document.dir +slug: Web/API/Document/dir +translation_of: Web/API/Document/dir +--- +<p>{{ApiRef("")}}{{non-standard_header}}</p> + +<p>La propiedad <code><strong>Document.dir</strong></code> es una {{domxref("DOMString")}} que representa la dirección del texto del documento, ya sea de izquierda a derecha o de derecha a izquierda, siendo la primera el valor por defecto. Sus valores posibles son <em>rtl </em>(Right To Left) o <em>ltr </em>(Left To Right).</p> + +<h2 id="Sintáxis">Sintáxis</h2> + +<pre class="syntaxbox"><em>dirStr</em> = <em>document.</em>dir; +<em>document.dir</em> = <em>dirStr;</em> +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>HTML5 WHATWG</p> + +<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}}</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>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Antes de Firefox 23, la propiedad <code>Document.dir</code> devolvía "ltr" independientemente del valor de su elemento {{htmlelement("html")}} raíz.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533731.aspx" rel="freelink">http://msdn.microsoft.com/en-us/library/ms533731.aspx</a></li> +</ul> diff --git a/files/es/web/api/document/doctype/index.html b/files/es/web/api/document/doctype/index.html new file mode 100644 index 0000000000..145ca57300 --- /dev/null +++ b/files/es/web/api/document/doctype/index.html @@ -0,0 +1,65 @@ +--- +title: Document.doctype +slug: Web/API/Document/doctype +tags: + - API + - DOCTYPE + - DOM + - Document + - Propiedad + - Referencia +translation_of: Web/API/Document/doctype +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Devuelve la Declaración de tipo de documento (Document Type Declaration (DTD)), asociada al documento actual. El objeto devuelto implementa la interfaz {{domxref("DocumentType")}}. Utilice {{domxref("DOMImplementation.createDocumentType()")}} para crear un <code>DocumentType</code>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>doctype</var> = <var>document</var>.doctype; +</pre> + +<ul> + <li><code>doctype</code> es una propiedad de sólo lectura.</li> +</ul> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush:js">var doctypeObj = document.doctype; + +console.log( + "doctypeObj.name: " + doctypeObj.name + "\n" + + "doctypeObj.internalSubset: " + doctypeObj.internalSubset + "\n" + + "doctypeObj.publicId: " + doctypeObj.publicId + "\n" + + "doctypeObj.systemId: " + doctypeObj.systemId +);</pre> + +<h2 id="Notas">Notas</h2> + +<p>La propiedad devuelve <code>null</code> si no hay DTD asociada al documento actual.</p> + +<p>El nivel 2 de DOM no soporta la edición de la declaración de tipo de documento.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>Cambiado el valor de retorno para documentos HTML sin el elemento {{HTMLElement("html")}}. Define que el tipo de documento puede ser modificado.</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> diff --git a/files/es/web/api/document/documentelement/index.html b/files/es/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..30453050f7 --- /dev/null +++ b/files/es/web/api/document/documentelement/index.html @@ -0,0 +1,42 @@ +--- +title: document.documentElement +slug: Web/API/Document/documentElement +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Document/documentElement +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p><strong>Solo-lectura</strong></p> + +<p>Devuelve el <code><a href="es/DOM/element">Element</a></code> que es el elemento raíz de <a href="es/DOM/document">document</a> (por ejemplo, devuelve el elemento <code><html></code> en los documentos HTML).</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">var<em>element</em> = document.documentElement; +</pre> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<pre class="eval">var rootElement = document.documentElement; +var firstTier = rootElement.childNodes; +// firstTier el la NodeList de los hijos directos del elemento raízof the direct children of the root element +for (var i = 0; i < firstTier.length; i++) { + // hacer algo con cada uno de los hijos directos del elemento raíz + // como firstTier[i] +} +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>Esta propiedad es de sólo-lectura, facilitada para obtener el elemento raíz de cualquier documento.</p> + +<p>Los documentos HTML contienen normalmente un único hijo directo, <code><html></code>, quizá con una declaración DOCTYPE antes que él. Los documento XML contienen a menudo, múltiples hijos: el elemento raíz, la declaración DOCTYPE y <a href="es/DOM/ProcessingInstruction"> processing instructions</a>.</p> + +<p>Por tanto, deberías usar <code>document.documentElement</code> en lugar de {{ Domxref("document.firstChild") }} para obtener el elemento raíz.</p> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-87CD092">DOM Level 2 Core: Document.documentElement</a></p> diff --git a/files/es/web/api/document/documenturi/index.html b/files/es/web/api/document/documenturi/index.html new file mode 100644 index 0000000000..4ff365a258 --- /dev/null +++ b/files/es/web/api/document/documenturi/index.html @@ -0,0 +1,121 @@ +--- +title: Document.documentURI +slug: Web/API/Document/documentURI +tags: + - API + - ContenidoNecesario + - DOM + - EjemploNecesario + - Propiedad + - Referencia + - UbicaciónDocumento +translation_of: Web/API/Document/documentURI +--- +<div>{{ApiRef("DOM")}}</div> + +<p>La propiedad <code><strong>documentURI</strong></code> de la interfaz del documento ({{domxref("Document")}}) devuelve la ubicación del documento como un <em>string</em>.</p> + +<p>Originalmente DOM3 fue definido como un atributo de lectura/escritura. En DOM4 se especifica unicamente como de lectura.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: js"><code>var string = document.documentURI;</code> +</pre> + +<h2 id="Notas">Notas</h2> + +<p>Los documentos HTML tienen una propiedad {{domxref("document.URL")}} la cual devuelve el mismo valor (ubicación del documento). A diferencia de <code>URL</code>, <code>documentURI</code> está disponible para todos los tipos de documentos web.</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('DOM4', '#dom-document-documenturi','documentURI')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Funcionamiento DOM3</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Funcionamiento DOM4</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatVersionUnknown}}</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>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Funcionamiento DOM3</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Funcionamiento DOM4</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/api/document/documenturiobject/index.html b/files/es/web/api/document/documenturiobject/index.html new file mode 100644 index 0000000000..fe28ca825f --- /dev/null +++ b/files/es/web/api/document/documenturiobject/index.html @@ -0,0 +1,39 @@ +--- +title: document.documentURIObject +slug: Web/API/Document/documentURIObject +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Document/documentURIObject +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p><strong>Read-only</strong></p> + +<p>Devuelve un objeto {{ Interface("nsIURI") }} que representa la URI de <a href="es/DOM/document">document</a>.</p> + +<p>Esto sólo funciona para programas con privilegios (UniversalXPConnect) incluidas las extensiones. Para páginas web, esta propiedad no tiene significado especial y puede usarse de igual forma que cualquier otra propiedad del usuario.</p> + +<p>El código con privilegios, debe tener cuidado de no leer o escribir esta propiedad en un objeto no controlado (e.g. on a <code>wrappedJSObject</code> of an <code><a href="es/XPCNativeWrapper">XPCNativeWrapper</a></code>). Ver {{ Bug(324464) }}para más detalles.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">var<em>uri</em> =<em>doc</em>.documentURIObject; +</pre> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<pre class="eval">// Comprueba que el esquema URI de la pestaña de Firefox es 'http', +// asumiendo que este código se ejecuta dentro de browser.xul +var uriObj = content.document.documentURIObject; +var uriPort = uriObj.port; + +if (uriObj.schemeIs('http')) { + ... +} +</pre> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p>No forma parte de ninguna especificación W3C.</p> diff --git a/files/es/web/api/document/dragover_event/index.html b/files/es/web/api/document/dragover_event/index.html new file mode 100644 index 0000000000..c4fe204135 --- /dev/null +++ b/files/es/web/api/document/dragover_event/index.html @@ -0,0 +1,338 @@ +--- +title: dragover +slug: Web/API/Document/dragover_event +translation_of: Web/API/Document/dragover_event +--- +<div>{{APIRef}}</div> + +<p>El evento <code>dragover</code> se activa cuando un elemento o texto se arrastra a un objetivo válido (cada pocos cientos de milisegundos).</p> + +<p> </p> + +<p>El evento se activa en la caída al objetivo.</p> + +<h2 id="General_info">General info</h2> + +<table class="properties"> + <tbody> + <tr> + <td>Bubbles</td> + <td>Yes</td> + </tr> + <tr> + <td>Cancelable</td> + <td>Yes</td> + </tr> + <tr> + <td>Target objects</td> + <td>{{domxref("Document")}}, {{domxref("Element")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <td>Default Action</td> + <td>Reset the current drag operation to "none".</td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>El elemento que se encontraba bajo el elemento que está siendo arrastrado.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>El tipo de evento.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Si el evento se propaga normalmente o no.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Si el evento es cancelable o no.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> del documento)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>dataTransfer</code></td> + <td>DataTransfer</td> + <td>Los datos que subyacen a la operación de drag-and-drop , conocidas como <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Modo protegido.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>El nodo que tiene adjunto el detector de eventos.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>Para los eventos de <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> y <code>mouseleave</code>:El objetivo del evento complementario (el objetivo <code>mouseleave</code> en el caso del evento <code>mouseenter</code>). <code>null</code> sino.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>La coordinada X del puntro del ratón en coordenadas globales (de pantalla).</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>La coordinada Y del puntero del ratón en coordenadas globales (en pantalla).</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>La coordinada X del puntro del ratón en coordenadas locales (DOM content).</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>La coordinada Y del puntro del ratón en coordenadas locales (DOM content).</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td> + <p>El número de botón que se preionó cuando el ecento fue ectivado: Botón izquierdo=0, botón del medio=1(en caso de que esté presente), botón derecho=2. Para ratones configurados para zurdos donde laas acciones están configuradas al contrario los valores se leerán de derecha a izquierda.</p> + </td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td> + <p>Los botones presionados cuando el evento de ratón se activa: botón izquierdo=1,botón derecho=2, botón medio (rueda)=4, 4º botón (tipo "hacia atrás del navegador"=8, 5º botón ("tipo hacia delante en el navegador"=16. Si dos o más botones se presionan, devolverá la suma lógica de los valores. Ej: si se presionan los botones izquierdo y derecho, devolverá 3 (=1|2). <a href="/en-US/docs/Web/API/MouseEvent">M</a>ás información.</p> + </td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td> + <p>La cantidad de presión aplicada en dispositivos táctiles cuando se genera el evento; Este valor tiene un rango entre 0.0 (mínima presión) y 1.0 (máxima presión)</p> + </td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> si la tecla control estaba pulsada cuando el evento se lanzó <code>false</code> en cualquier otro caso.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> si la tecla shift estaba pulsada cuando el evento de lanzó. <code>false</code> en otro caso.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> si la tecla alt estaba pulsada cuando el evento se lanzó. <code>false</code> si no.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> si la tecla meta estaba presionada cuando el evento se disparó. <code>false</code> si no.</td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<pre class="brush: js"><div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> + This div is draggable + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> + +<style> + #draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; + } + + .dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; + } +</style> + +<script> + var dragged; + + /* events fired on the draggable target */ + document.addEventListener("drag", function( event ) { + + }, false); + + document.addEventListener("dragstart", function( event ) { + // store a ref. on the dragged elem + dragged = event.target; + // make it half transparent + event.target.style.opacity = .5; + }, false); + + document.addEventListener("dragend", function( event ) { + // reset the transparency + event.target.style.opacity = ""; + }, false); + + /* events fired on the drop targets */ + document.addEventListener("dragover", function( event ) { + // prevent default to allow drop + event.preventDefault(); + }, false); + + document.addEventListener("dragenter", function( event ) { + // highlight potential drop target when the draggable element enters it + if ( event.target.className == "dropzone" ) { + event.target.style.background = "purple"; + } + + }, false); + + document.addEventListener("dragleave", function( event ) { + // reset background of potential drop target when the draggable element leaves it + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + } + + }, false); + + document.addEventListener("drop", function( event ) { + // prevent default action (open as link for some elements) + event.preventDefault(); + // move dragged elem to the selected drop target + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + dragged.parentNode.removeChild( dragged ); + event.target.appendChild( dragged ); + } + + }, false); +</script> +</pre> + +<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("HTML WHATWG", "interaction.html#dndevents", "dragover")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Initial definition</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>12</td> + <td>3.1</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>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{event("drag")}}</li> + <li>{{event("dragstart")}}</li> + <li>{{event("dragend")}}</li> + <li>{{event("dragover")}}</li> + <li>{{event("dragenter")}}</li> + <li>{{event("dragleave")}}</li> + <li>{{event("dragexit")}}</li> + <li>{{event("drop")}}</li> +</ul> diff --git a/files/es/web/api/document/embeds/index.html b/files/es/web/api/document/embeds/index.html new file mode 100644 index 0000000000..865efdb2fd --- /dev/null +++ b/files/es/web/api/document/embeds/index.html @@ -0,0 +1,48 @@ +--- +title: Document.embeds +slug: Web/API/Document/embeds +tags: + - API + - Documento + - Ejemplo + - HTML DOM + - Propiedad +translation_of: Web/API/Document/embeds +--- +<div>{{ApiRef}}</div> + +<p><strong><code>embeds</code></strong> es una propiedad de sólo lectura de la interfaz de {{domxref("Document")}}. Devuelve una lista con los elementos {{htmlelement("object")}} incrustados dentro del documento actual.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>nodeList</var> = document.embeds +</pre> + +<h3 id="Valor">Valor</h3> + +<p>Una {{domxref("HTMLCollection")}}.</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('HTML WHATWG', '#dom-document-embeds', 'Document.embeds')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de structured data. Si usted quiere contribuir, por favor visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div> + +<div>{{Compat("api.Document.embeds")}}</div> diff --git a/files/es/web/api/document/evaluate/index.html b/files/es/web/api/document/evaluate/index.html new file mode 100644 index 0000000000..67bc5d432e --- /dev/null +++ b/files/es/web/api/document/evaluate/index.html @@ -0,0 +1,211 @@ +--- +title: Document.evaluate() +slug: Web/API/Document/evaluate +translation_of: Web/API/Document/evaluate +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>Retorna <code><a href="/en-US/docs/XPathResult" title="XPathResult">XPathResult</a></code> basado en una expresión <a href="/en-US/docs/XPath" title="XPath">XPath</a> y otros parametros dados .</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox">var xpathResult = document.evaluate( + xpathExpression, + contextNode, + namespaceResolver, + resultType, + result +);</pre> + +<ul> + <li><code>XpathExpression es una cadena que representa el XPath que se va a evaluar.</code></li> + <li><code>contextNode</code> specifies the <em>context node</em> for the query (see the [<a class="external" href="http://www.w3.org/TR/xpath" rel="freelink">http://www.w3.org/TR/xpath</a> XPath specification). It's common to pass <code>document</code> as the context node.</li> + <li><code>namespaceResolver</code> is a function that will be passed any namespace prefixes and should return a string representing the namespace URI associated with that prefix. It will be used to resolve prefixes within the XPath itself, so that they can be matched with the document. <code>null</code> is common for HTML documents or when no namespace prefixes are used.</li> + <li><code>resultType</code> is an integer that corresponds to the type of result <code>XPathResult</code> to return. Use <a href="#Result_types">named constant properties</a>, such as <code>XPathResult.ANY_TYPE</code>, of the XPathResult constructor, which correspond to integers from 0 to 9.</li> + <li><code>result</code> is an existing <code>XPathResult</code> to use for the results. <code>null</code> is the most common and will create a new <code>XPathResult</code></li> +</ul> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="brush: js">var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null); +/* Search the document for all h2 elements. + * The result will likely be an unordered node iterator. */ +var thisHeading = headings.iterateNext(); +var alertText = "Level 2 headings in this document are:\n"; +while (thisHeading) { + alertText += thisHeading.textContent + "\n"; + thisHeading = headings.iterateNext(); +} +alert(alertText); // Alerts the text of all h2 elements +</pre> + +<p>Note, in the above example, a more verbose XPath is preferred over common shortcuts such as <code>//h2</code>. Generally, more specific XPath selectors as in the above example usually gives a significant performance improvement, especially on very large documents. This is because the evaluation of the query spends does not waste time visiting unnecessary nodes. Using // is generally slow as it visits <em>every</em> node from the root and all subnodes looking for possible matches.</p> + +<p>Further optimization can be achieved by careful use of the context parameter. For example, if you know the content you are looking for is somewhere inside the body tag, you can use this:</p> + +<pre class="brush: js">document.evaluate(".//h2", document.body, null, XPathResult.ANY_TYPE, null); +</pre> + +<p>Notice in the above <code>document.body</code> has been used as the context instead of <code>document</code> so the XPath starts from the body element. (In this example, the <code>"."</code> is important to indicate that the querying should start from the context node, document.body. If the "." was left out (leaving <code>//h2</code>) the query would start from the root node (<code>html</code>) which would be more wasteful.)</p> + +<p>See <a href="/en-US/docs/Introduction_to_using_XPath_in_JavaScript" title="Introduction to using XPath in JavaScript">Introduction to using XPath in JavaScript</a> for more information.</p> + +<h2 id="Notes" name="Notes">Nota</h2> + +<ul> + <li>XPath expressions can be evaluated on HTML and XML documents.</li> + <li>While using document.evaluate() works in FF2, in FF3 one must use someXMLDoc.evaluate() if evaluating against something other than the current document.</li> +</ul> + +<h2 id="Result_types" name="Result_types">Tipos de resultados</h2> + +<p>(Merge with <a href="/Template:XPathResultConstants" title="Template:XPathResultConstants">Template:XPathResultConstants</a>?</p> + +<p>These are supported values for the <code>resultType</code> parameter of the <code>evaluate</code> method:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Result Type</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>ANY_TYPE</code></td> + <td>0</td> + <td>Whatever type naturally results from the given expression.</td> + </tr> + <tr> + <td><code>NUMBER_TYPE</code></td> + <td>1</td> + <td>A result set containing a single number. Useful, for example, in an XPath expression using the <code>count()</code> function.</td> + </tr> + <tr> + <td><code>STRING_TYPE</code></td> + <td>2</td> + <td>A result set containing a single string.</td> + </tr> + <tr> + <td><code>BOOLEAN_TYPE</code></td> + <td>3</td> + <td>A result set containing a single boolean value. Useful, for example, an an XPath expression using the <code>not()</code> function.</td> + </tr> + <tr> + <td><code>UNORDERED_NODE_ITERATOR_TYPE</code></td> + <td>4</td> + <td>A result set containing all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.</td> + </tr> + <tr> + <td><code>ORDERED_NODE_ITERATOR_TYPE</code></td> + <td>5</td> + <td>A result set containing all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.</td> + </tr> + <tr> + <td><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></td> + <td>6</td> + <td>A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.</td> + </tr> + <tr> + <td><code>ORDERED_NODE_SNAPSHOT_TYPE</code></td> + <td>7</td> + <td>A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.</td> + </tr> + <tr> + <td><code>ANY_UNORDERED_NODE_TYPE</code></td> + <td>8</td> + <td>A result set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.</td> + </tr> + <tr> + <td><code>FIRST_ORDERED_NODE_TYPE</code></td> + <td>9</td> + <td>A result set containing the first node in the document that matches the expression.</td> + </tr> + </tbody> +</table> + +<p>Results of <code>NODE_ITERATOR</code> types contain references to nodes in the document. Modifying a node will invalidate the iterator. After modifying a node, attempting to iterate through the results will result in an error.</p> + +<p>Results of <code>NODE_SNAPSHOT</code> types are snapshots, which are essentially lists of matched nodes. You can make changes to the document by altering snapshot nodes. Modifying the document doesn't invalidate the snapshot; however, if the document is changed, the snapshot may not correspond to the current state of the document, since nodes may have moved, been changed, added, or removed.</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}</td> + <td>{{Spec2("DOM3 XPath")}}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad del navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>XPath 1.0</td> + <td>{{CompatChrome(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.8)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(9.0)}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>XPath 1.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implemented in WebKit 5.0 (531) or earlier.</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/DOM/document.createExpression" title="DOM/document.createExpression">DOM:document.createExpression</a></li> + <li><a href="/en-US/docs/Code_snippets/XPath" title="Code_snippets/XPath">XPath Code Snippets</a></li> + <li><a href="http://codepen.io/johan/full/ckFgn">Check for browser support</a></li> +</ul> diff --git a/files/es/web/api/document/execcommand/index.html b/files/es/web/api/document/execcommand/index.html new file mode 100644 index 0000000000..2102597c22 --- /dev/null +++ b/files/es/web/api/document/execcommand/index.html @@ -0,0 +1,288 @@ +--- +title: Document.execCommand() +slug: Web/API/Document/execCommand +tags: + - API + - DOM + - Método(2) + - NecesitaEjemplo + - Referencia + - editor +translation_of: Web/API/Document/execCommand +--- +<div>{{ApiRef("DOM")}}</div> + +<h2 id="Summary" name="Summary"><span id="result_box" lang="es"><span title="Summary">Resumen</span></span></h2> + +<p><span id="result_box" lang="es"><span title="When an HTML document has been switched to designMode, the document object exposes the execCommand method which allows one to run commands to manipulate the contents of the editable region.">Cuando un documento HTML se ha cambiado a <code>designMode</code>, el objeto de documento expone el método</span></span> <code>execCommand</code> <span id="result_box" lang="es"><span title="When an HTML document has been switched to designMode, the document object exposes the execCommand method which allows one to run commands to manipulate the contents of the editable region.">lo que permite ejecutar comandos para manipular el contenido de la región editable. </span><span title="Most commands affect the document's selection (bold, italics, etc), while others insert new elements (adding a link) or affect an entire line (indenting).">La mayoría de los comandos afectan a la selección de documento (negrita, cursiva, etc.), mientras que otros insertar nuevos elementos (añadiendo un enlace) o afectan a toda una línea (sangría). </span><span title="When using contentEditable, calling execCommand will affect the currently active editable element. +">Al usar</span></span> <code>contentEditable</code>, la llamada a <code>execCommand</code> afectará el elemento editable activo actual.</p> + +<h2 id="Syntax" name="Syntax"><span id="result_box" lang="es"><span title="Syntax">Sintaxis</span></span></h2> + +<pre class="brush: js">execCommand(aCommandName, aShowDefaultUI, aValueArgument) +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt>aCommandName</dt> + <dd><span id="result_box" lang="es"><span title='A {{domxref("DOMString")}} specifying the name of the command to execute.'>Una {{domxref("DOMString")}} que especifica el nombre del comando a ejecutar. Vea {{anch("Comandos")}} para una lista de posibles comandos.</span></span></dd> + <dt>aShowDefaultUI</dt> + <dd><span id="result_box" lang="es"><span title='A {{jsxref("Boolean")}} indicating whether the default user interface should be shown.'>Un {{jsxref("Boolean")}} que indica si la interfaz de usuario por defecto se debe mostrar. </span><span title="This is not implemented in Mozilla.">Esto no se ha implementado en Mozilla.</span></span></dd> + <dt>aValueArgument</dt> + <dd><span id="result_box" lang="es"><span title='A {{domxref("DOMString")}} For commands which require an input argument (such as insertImage, for which this is the URL of the image to insert), this is a {{domxref("DOMString")}} providing that information.'>Una {{domxref("DOMString")}} representando algunos comandos (como <code>insertImage</code>) requiere un argumento valor extra (url de la imagen). </span><span title="Pass an argument of null if no argument is needed. + +">Pasar un argumento de</span></span> <code>null</code> <span id="result_box" lang="es"><span title="Pass an argument of null if no argument is needed. + +">si no se necesita ningún argumento</span></span>.</dd> +</dl> + +<h3 id="Comandos"><span id="result_box" lang="es"><span title="Commands + +">Comandos</span></span></h3> + +<dl> + <dt>backColor</dt> + <dd><span id="result_box" lang="es"><span title="backColor + "> </span><span title="Changes the document background color.">Cambia el color de fondo del documento</span></span>. <span id="result_box" lang="es"><span title="In styleWithCss mode, it affects the background color of the containing block instead.">En el modo styleWithCss, afecta el color de fondo del bloque que contiene. </span><span title="This requires a color value string to be passed in as a value argument.">Esto requiere una cadena con el valor del color de fondo que se pasa como un valor de </span></span><span lang="es"><span title="This requires a color value string to be passed in as a value argument.">argumento. </span><span title="(Internet Explorer uses this to set text background color.) +">(Internet Explorer utiliza esta opción para definir el color de fondo del texto.)</span></span></dd> + <dt>bold</dt> + <dd>Pone las negritas o las quita <span id="result_box" lang="es"><span title="Toggles bold on/off for the selection or at the insertion point.">para la selección o en el punto de inserción. </span><span title="(Internet Explorer uses the STRONG tag instead of B.) +">(Internet Explorer utiliza la etiqueta STRONG en lugar de B.)</span></span></dd> + <dt>contentReadOnly</dt> + <dd><span id="result_box" lang="es"><span title="Makes the content document either read-only or editable.">Hace que el documento de contenido, ya sea de sólo lectura o editable. </span><span title="This requires a boolean true/false to be passed in as a value argument.">Esto requiere un booleano verdadero / falso que se pasa como un valor de </span></span><span lang="es"><span title="This requires a boolean true/false to be passed in as a value argument.">argumento. </span><span title="(Not supported by Internet Explorer.) +">(No es compatible con Internet Explorer.)</span></span></dd> + <dt>copy</dt> + <dd><span id="result_box" lang="es"><span title="Copies the current selection to the clipboard.">Copia la selección actual en el portapapeles. </span><span title="Clipboard capability must be enabled in the user.js preference file.">Capacidad del Portapapeles debe estar habilitado en el archivo de preferencias user.js. Vea</span></span></dd> + <dt>createLink</dt> + <dd><span id="result_box" lang="es"><span title="Creates an anchor link from the selection, only if there is a selection.">Crea un vínculo de anclaje a partir de la selección, sólo si hay una selección. </span><span title="This requires the HREF URI string to be passed in as a value argument.">Esto requiere la cadena HREF URI que se pasa como un argumento de valor. </span><span title="The URI must contain at least a single character, which may be a white space.">El URI debe contener al menos un solo carácter, el cual puede ser un espacio en blanco. </span><span title="(Internet Explorer will create a link with a null URI value.) +">(Internet Explorer creará un enlace con un nulo valor URI.)</span></span></dd> + <dt>cut</dt> + <dd><span id="result_box" lang="es"><span title="Cuts the current selection and copies it to the clipboard.">Corta la selección y lo copia en el portapapeles actual. </span><span title="Clipboard capability must be enabled in the user.js preference file.">Capacidad del Portapapeles debe estar habilitado en el archivo de preferencias user.js. </span><span title="See +">Vea </span></span></dd> + <dt>decreaseFontSize</dt> + <dd><span id="result_box" lang="es"><span title="Adds a SMALL tag around the selection or at the insertion point.">Añade una etiqueta SMALL alrededor de la selección o en el punto de inserción. </span><span title="(Not supported by Internet Explorer.) +">(No es compatible con Internet Explorer.)</span></span></dd> + <dt>delete</dt> + <dd><span id="result_box" lang="es"><span title="Deletes the current selection. +">Elimina la selección actual.</span></span></dd> + <dt>enableInlineTableEditing</dt> + <dd><span id="result_box" lang="es"><span title="Enables or disables the table row and column insertion and deletion controls.">Activa o desactiva la fila de la tabla y los controles de inserción y supresión de columna</span></span><span lang="es"><span title="Enables or disables the table row and column insertion and deletion controls.">. </span><span title="(Not supported by Internet Explorer.) +">(No es compatible con Internet Explorer.)</span></span></dd> + <dt>enableObjectResizing</dt> + <dd><span id="result_box" lang="es"><span title="Enables or disables the resize handles on images and other resizable objects.">Activa o desactiva los controladores de tamaño en imágenes y otros objetos de tamaño variable. </span><span title="(Not supported by Internet Explorer.) +">(No es compatible con Internet Explorer.)</span></span></dd> + <dt>fontName</dt> + <dd><span id="result_box" lang="es"><span title="Changes the font name for the selection or at the insertion point.">Cambia el nombre de la fuente para la selección o en el punto de inserción. </span><span title='This requires a font name string ("Arial" for example) to be passed in as a value argument. +'>Esto requiere una cadena de nombre de la fuente ("Arial", por ejemplo) que se pasa como un valor de </span></span><span lang="es"><span title='This requires a font name string ("Arial" for example) to be passed in as a value argument. +'>argumento.</span></span></dd> + <dt>fontSize</dt> + <dd><span id="result_box" lang="es"><span title="Changes the font size for the selection or at the insertion point.">Cambia el tamaño de fuente para la selección o en el punto de inserción. </span><span title="This requires an HTML font size (1-7) to be passed in as a value argument. +">Esto requiere un tamaño de fuente HTML (1-7) que se pasa como un valor de </span></span><span lang="es"><span title="This requires an HTML font size (1-7) to be passed in as a value argument. +">argumento.</span></span></dd> + <dt>foreColor</dt> + <dd><span id="result_box" lang="es"><span title="Changes a font color for the selection or at the insertion point.">Cambia un color de fuente para la selección o en el punto de inserción. </span><span title="This requires a color value string to be passed in as a value argument. +">Esto requiere una cadena de valor de color que se pasa como un valor de </span></span><span lang="es"><span title="This requires a color value string to be passed in as a value argument. +">argumento.</span></span></dd> + <dt>formatBlock</dt> + <dd><span id="result_box" lang="es"><span title="Adds an HTML block-style tag around the line containing the current selection, replacing the block element containing the line if one exists (in Firefox, BLOCKQUOTE is the exception - it will wrap any containing block element).">Añade una etiqueta HTML de estilo bloque alrededor de la línea que contiene la selección actual, reemplazando el elemento de bloque que contiene la línea si existe (en Firefox, BLOCKQUOTE es la excepción - que envolverá cualquier elemento de bloque que contiene). </span><span title="Requires a tag-name string to be passed in as a value argument.">Requiere una cadena de etiqueta-nombre que se pasa como un argumento de valor. </span><span title='Virtually all block style tags can be used (eg. "H1", "P", "DL", "BLOCKQUOTE").'>Prácticamente todas las etiquetas de estilo bloque se pueden utilizar (por ejemplo. "H1", "P", "DL", "BLOCKQUOTE"). </span><span title='(Internet Explorer supports only heading tags H1 - H6, ADDRESS, and PRE, which must also include the tag delimiters &lt; >, such as "&lt;H1>".) +'>(Internet Explorer sólo admite etiquetas de título H1 - H6, dirección y PRE, que también debe incluir los delimitadores de etiquetas <>, como "<H1>".)</span></span></dd> + <dt>forwardDelete</dt> + <dd><span id="result_box" lang="es"><span title="Deletes the character ahead of the cursor's position.">Elimina el </span></span>character <span id="result_box" lang="es"><span title="Deletes the character ahead of the cursor's position.">delante de la posición del cursor</span></span> <a href="http://en.wikipedia.org/wiki/Cursor_%28computers%29" title="Cursor (computers)">cursor</a>. <span id="result_box" lang="es"><span title="It is the same as hitting the delete key. +">Es lo mismo que pulsar la tecla</span></span> suprimir.</dd> + <dt>heading</dt> + <dd><span id="result_box" lang="es"><span title="Adds a heading tag around a selection, or insertion point line.">Añade una etiqueta de encabezado en torno a una selección, o la línea en el punto de inserción. </span><span title='Requires the tag-name string to be passed in as a value argument (ie "H1", "H6").'>Requiere la cadena de nombre de etiqueta que se pasa como un valor de </span></span><span lang="es"><span title='Requires the tag-name string to be passed in as a value argument (ie "H1", "H6").'>argumento (es decir, "H1", "H6"). </span><span title="(Not supported by Internet Explorer and Safari.) +">(No es compatible con Internet Explorer y Safari.)</span></span></dd> + <dt>hiliteColor</dt> + <dd><span id="result_box" lang="es"><span title="Changes the background color for the selection or at the insertion point.">Cambia el color de fondo para la selección o el punto de inserción. </span><span title="Requires a color value string to be passed in as a value argument.">Requiere una cadena de valores de color que se pasa como un valor de </span></span><span lang="es"><span title="Requires a color value string to be passed in as a value argument.">argumento. </span><span title="UseCSS must be turned on for this to function.">UseCSS debe estar encendido para que esto funcione. </span><span title="(Not supported by Internet Explorer.) +">(No es compatible con Internet Explorer.)</span></span></dd> + <dt>increaseFontSize</dt> + <dd><span id="result_box" lang="es"><span title="Adds a BIG tag around the selection or at the insertion point.">Añade una etiqueta BIG alrededor de la selección o en el punto de inserción. </span><span title="(Not supported by Internet Explorer.) +">(No es compatible con Internet Explorer.)</span></span></dd> + <dt>indent</dt> + <dd><span id="result_box" lang="es"><span class="alt-edited hps">Indenta</span> <span class="alt-edited hps">la línea</span> <span class="hps">que contiene el</span> <span class="hps">punto de selección</span> <span class="hps">o inserción</span><span>.</span> <span class="hps">En Firefox</span><span>, si la selección</span> <span class="hps">abarca varias</span> <span class="hps">líneas</span> <span class="hps">en los diferentes niveles</span> <span class="hps">de</span> <span class="alt-edited hps">indentación</span> <span class="hps">serán</span> <span class="alt-edited hps">indentadas</span> <span class="hps">sólo las líneas</span> <span class="hps">menos</span> <span class="alt-edited hps">indentadas</span> <span class="hps">en</span> <span class="hps">la selección.</span></span></dd> + <dt>insertBrOnReturn</dt> + <dd><span id="result_box" lang="es"><span title="Controls whether the Enter key inserts a br tag or splits the current block element into two.">Controla si la tecla Intro inserta una etiqueta br o divide el elemento de bloque actual en dos. </span><span title="(Not supported by Internet Explorer.) +">(No es compatible con Internet Explorer.)</span></span></dd> + <dt>insertHorizontalRule</dt> + <dd><span id="result_box" lang="es"><span title="insertHorizontalRule + "> </span><span title="Inserts a horizontal rule at the insertion point (deletes selection). +">Inserta una regla horizontal en el punto de inserción (borra la selección).</span></span></dd> + <dt>insertHTML</dt> + <dd><span id="result_box" lang="es"><span title="Inserts an HTML string at the insertion point (deletes selection).">Inserta una cadena HTML en el punto de inserción (borra la selección). </span><span title="Requires a valid HTML string to be passed in as a value argument.">Requiere una cadena HTML válido que se ha pasado como un valor de </span></span><span lang="es"><span title="Requires a valid HTML string to be passed in as a value argument.">argumento. </span><span title="(Not supported by Internet Explorer.) +">(No es compatible con Internet Explorer.)</span></span></dd> + <dt>insertImage</dt> + <dd><span id="result_box" lang="es"><span class="hps">Inserta</span> <span class="hps">una imagen</span> <span class="hps">en</span> <span class="hps">el punto de inserción</span> <span class="hps">(borra</span> <span class="hps">la selección</span><span>)</span><span>.</span> <span class="hps">Requiere</span> <span class="hps">la cadena </span></span>de <span lang="es"><span class="hps">imagen</span> <span class="hps">SRC</span> <span class="hps">URI</span> <span class="hps">que se</span> <span class="hps">pasa como</span> <span class="hps">un</span> <span class="hps">argumento de valor</span><span>.</span> <span class="hps">El</span> <span class="hps">URI</span> <span class="hps">debe contener al menos</span> <span class="hps">un solo carácter,</span> <span class="hps">que puede ser un</span> <span class="hps">espacio en blanco.</span> <span class="hps">(Internet Explorer</span> <span class="hps">creará un enlace</span> <span class="hps">con un nulo</span> <span class="hps">valor</span> <span class="hps">URI</span><span>.</span><span>)</span></span></dd> + <dt>insertOrderedList</dt> + <dd><span id="result_box" lang="es"><span title="Creates a numbered ordered list for the selection or at the insertion point. +">Crea una lista ordenada con números para la selección o en el punto de inserción.</span></span></dd> + <dt>insertUnorderedList</dt> + <dd><span id="result_box" lang="es"><span title="Creates a bulleted unordered list for the selection or at the insertion point. +">Crea una lista desordenada con viñetas para la selección o en el punto de inserción.</span></span></dd> + <dt>insertParagraph</dt> + <dd><span id="result_box" lang="es"><span title="insertParagraph + "> </span><span title="Inserts a paragraph around the selection or the current line.">Inserta un párrafo en torno a la selección o la línea actual. </span><span title="(Internet Explorer inserts a paragraph at the insertion point and deletes the selection.) +">(Internet Explorer inserta un párrafo en el punto de inserción y elimina la selección.)</span></span></dd> + <dt>insertText</dt> + <dd><span id="result_box" lang="es"><span title="Inserts the given plain text at the insertion point (deletes selection). +">Inserta el texto plano expedido en el punto de inserción (borra la selección).</span></span></dd> + <dt>italic</dt> + <dd><span id="result_box" lang="es"><span title="Toggles italics on/off for the selection or at the insertion point.">Alterna cursiva para la selección o el punto de inserción. </span><span title="(Internet Explorer uses the EM tag instead of I.) +">(Internet Explorer utiliza la etiqueta de EM en lugar de I.)</span></span></dd> + <dt>justifyCenter</dt> + <dd><span id="result_box" lang="es"><span title="justifyCenter + "> </span><span title="Centers the selection or insertion point. +">Centra el punto de selección o inserción.</span></span></dd> + <dt>justifyFull</dt> + <dd><span id="result_box" lang="es"><span title="Justifies the selection or insertion point. +">Justifica el punto de selección o inserción.</span></span></dd> + <dt>justifyLeft</dt> + <dd><span id="result_box" lang="es"><span title="Justifies the selection or insertion point to the left. +">Justifica la selección o inserción punto a la izquierda.</span></span></dd> + <dt>justifyRight</dt> + <dd><span id="result_box" lang="es"><span title="Right-justifies the selection or the insertion point. +">Justifica la selección o el punto de inserción a la derecha.</span></span></dd> + <dt>outdent</dt> + <dd><span id="result_box" lang="es"><span class="alt-edited hps">Anula la sangría</span> <span class="alt-edited hps">de la línea que contiene</span> <span class="alt-edited hps">la selección</span> <span class="alt-edited hps">o el punto de inserción</span><span>.</span></span></dd> + <dt>paste</dt> + <dd><span id="result_box" lang="es"><span title="Pastes the clipboard contents at the insertion point (replaces current selection).">Pega el contenido del portapapeles en el punto de inserción (reemplaza la selección actual). </span><span title="Clipboard capability must be enabled in the user.js preference file.">Capacidad del Portapapeles debe estar habilitado en el archivo de preferencias user.js. </span><span title="See +">Ver</span></span></dd> + <dt>redo</dt> + <dd><span id="result_box" lang="es"><span title="Redoes the previous undo command. +">Rehace el anterior comando deshecho.</span></span></dd> + <dt>removeFormat</dt> + <dd><span id="result_box" lang="es"><span title="Removes all formatting from the current selection. +">Quita todo el formato de la selección actual.</span></span></dd> + <dt>selectAll</dt> + <dd><span id="result_box" lang="es"><span title="Selects all of the content of the editable region. +">Selecciona todo el contenido de la región editable.</span></span></dd> + <dt>strikeThrough</dt> + <dd><span id="result_box" lang="es"><span title="Toggles strikethrough on/off for the selection or at the insertion point. +">Alterna tachado para la selección o el punto de inserción.</span></span></dd> + <dt>subscript</dt> + <dd><span id="result_box" lang="es"><span title="Toggles subscript on/off for the selection or at the insertion point. +">Alterna subíndice para la selección o el punto de inserción.</span></span></dd> + <dt>superscript</dt> + <dd><span id="result_box" lang="es"><span title="Toggles superscript on/off for the selection or at the insertion point. +">Alterna exponente para la selección o el punto de inserción.</span></span></dd> + <dt>underline</dt> + <dd><span id="result_box" lang="es"><span title="Toggles underline on/off for the selection or at the insertion point. +">Alterna subrayado para la selección o el punto de inserción.</span></span></dd> + <dt>undo</dt> + <dd><span id="result_box" lang="es"><span title="Undoes the last executed command. +">Deshace el último comando ejecutado.</span></span></dd> + <dt>unlink</dt> + <dd><span id="result_box" lang="es"><span title="unlink + "> </span><span title="Removes the anchor tag from a selected anchor link. +">Elimina la etiqueta de ancla de un enlace ancla seleccionado.</span></span></dd> + <dt>useCSS {{ Deprecated_inline() }}</dt> + <dd><span id="result_box" lang="es"><span title="Toggles the use of HTML tags or CSS for the generated markup.">Alterna el uso de etiquetas HTML o CSS para el marcado generado. </span><span title="Requires a boolean true/false as a value argument.">Requiere un booleano verdadero / falso como valor del </span></span><span lang="es"><span title="Requires a boolean true/false as a value argument.">argumento. </span><span title="NOTE: This argument is logically backwards (ie use false to use CSS, true to use HTML).">NOTA: Este argumento es lógicamente hacia atrás (es decir, si se usa falso a usar CSS, entonces es verdadero a usar HTML). </span><span title="(Not supported by Internet Explorer.) This has been deprecated;">(No compatible con Internet Explorer.) Esto ha quedado obsoleto; </span><span title="use the styleWithCSS command instead. +">utilice el comando <em>styleWithCSS</em> en su lugar.</span></span></dd> + <dt>styleWithCSS</dt> + <dd><span id="result_box" lang="es"><span class="hps">Reemplaza</span> <span class="hps">el comando</span> <em><span class="hps">useCSS</span></em><span>;</span> <span class="alt-edited hps">el argumento funciona</span> <span class="alt-edited hps">como se esperaba</span><span>,</span> <span class="hps">es decir,</span> <span class="alt-edited hps">si es verdadero</span> <span class="hps">modifica</span> <span class="hps">/</span> <span class="hps">genera</span> <span class="hps">atributos</span> <span class="hps">de estilo</span> <span class="hps">en el marcado</span><span>,</span> <span class="hps">falso</span> <span class="hps">genera</span> <span class="hps">elementos de formato</span><span>.</span></span></dd> +</dl> + +<h2 id="Example" name="Example"><span id="result_box" lang="es"><span title="Example + +">Ejemplo</span></span></h2> + +<p>(<span id="result_box" lang="es"><span title="(This article is currently incomplete and lacks an example.) +">Este artículo está actualmente incompleto y carece de un ejemplo</span></span>.)</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility"><span id="result_box" lang="es"><span title="Browser compatibility + +">Compatibilidad del navegador</span></span></h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th><span id="result_box" lang="es"><span title="Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari +">Característica</span></span></th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td><span id="result_box" lang="es"><span title="Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}">Soporte básico</span></span></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>insertBrOnReturn</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</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><span id="result_box" lang="es"><span title="Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari +">Característica</span></span></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><span id="result_box" lang="es"><span title="Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}">Soporte básico</span></span></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> + +<p><span id="result_box" lang="es"><span title="See Scribe's "Browser Inconsistencies" documentation for a list of many browser bugs related to document.execCommand. +">Consulte la </span></span><a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Scribe's "Browser Inconsistencies" documentation</a><span lang="es"><span title="See Scribe's "Browser Inconsistencies" documentation for a list of many browser bugs related to document.execCommand. +"> para obtener una lista de los muchos errores del navegador relacionadas con</span></span> <code>document.execCommand</code>.</p> +</div> + +<h2 id="Specification" name="Specification"><span id="result_box" lang="es"><span title="Specification +">Especificación</span></span></h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col"><span id="result_box" lang="es"><span title="Specification Status Comment + +">Especificación</span></span></th> + <th scope="col"><span id="result_box" lang="es"><span title="Status">Estado</span></span></th> + <th scope="col"><span id="result_box" lang="es"><span title="Status Comment + +">Comentario</span></span></th> + </tr> + <tr> + <td>{{SpecName('HTML Editing','#execcommand()','execCommand')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also"><span id="result_box" lang="es"><span title="See also">Vea también</span></span></h2> + +<ul> + <li>{{domxref("document.contentEditable")}}</li> + <li>{{domxref("document.designMode")}}</li> + <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Edición de texto enriquecido en Mozilla</a></li> +</ul> diff --git a/files/es/web/api/document/exitfullscreen/index.html b/files/es/web/api/document/exitfullscreen/index.html new file mode 100644 index 0000000000..cd90147d82 --- /dev/null +++ b/files/es/web/api/document/exitfullscreen/index.html @@ -0,0 +1,75 @@ +--- +title: Document.exitFullscreen() +slug: Web/API/Document/exitFullscreen +translation_of: Web/API/Document/exitFullscreen +--- +<div>{{ApiRef("Fullscreen API")}}</div> + +<p><span class="seoSummary">El método <code><strong>exitFullscreen()</strong></code> de {{domxref("Document")}} </span>solicita que el elemento de este documento que se presenta actualmente en modo de pantalla completa se retire del modo de pantalla completa, restaurando el estado anterior de la pantalla. Esto generalmente revierte los efectos de una llamada previa a {{domxref("Element.requestFullscreen()")}}.</p> + +<p>La excepción es si otro elemento ya estaba en modo de pantalla completa cuando el elemento actual se colocó en modo de pantalla completa usando <code>requestFullscreen()</code>. En ese caso, el elemento de pantalla completa anterior se restaura al estado de pantalla completa. En esencia, se mantiene un {{interwiki("wikipedia", "Stack_(abstract_data_type)", "stack")}} de elementos de pantalla completa.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>exitPromise</em> = <em>document</em>.exitFullscreen(); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<p>Ninguno.</p> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un {{jsxref("Promise")}} que se resuelve una vez que el {{Glossary("user agent")}} a terminado de salir del modo de pantalla completa. Si se produce un error al intentar salir del modo de pantalla completa, se llama al controlador <code>catch()</code> para la promesa.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Este ejemplo hace que el documento actual entre y salga de una presentación a pantalla completa cada vez que se hace clic dentro del botón del mouse.</p> + +<pre class="brush: js">document.onclick = function (event) { + if (document.fullscreenElement) { + document.exitFullscreen() + } else { + document.documentElement.requestFullscreen() + } +};</pre> + +<div class="note"> +<p><strong>Nota:</strong> Para un ejemplo más completo, vea {{SectionOnPage("/en-US/docs/Web/API/Element/requestFullScreen", "Example")}}.</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Fullscreen", "#dom-document-exitfullscreen", "Document.exitFullscreen()")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div> + +<p>{{Compat("api.Document.exitFullscreen")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a></li> + <li><a href="/en-US/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a></li> + <li>{{ domxref("Element.requestFullscreen()") }}</li> + <li>{{ domxref("Document.fullscreenElement") }}</li> + <li>{{ cssxref(":fullscreen") }} and {{cssxref("::backdrop")}}</li> + <li>The {{HTMLElement("iframe")}} {{ HTMLAttrXRef("allowfullscreen", "iframe") }} attribute</li> +</ul> diff --git a/files/es/web/api/document/getelementbyid/index.html b/files/es/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..1232df45b4 --- /dev/null +++ b/files/es/web/api/document/getelementbyid/index.html @@ -0,0 +1,200 @@ +--- +title: document.getElementById +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Documento + - Elementos + - Referencia + - Web + - id + - metodo +translation_of: Web/API/Document/getElementById +--- +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<p>Devuelve una referencia al elemento por su <a href="/en-US/docs/DOM/element.id" title="en-US/docs/DOM/element.id">ID</a>.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="brush: js">elemento = document.getElementById(<em>id</em>); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code><strong>id</strong></code></dt> + <dd>Es una cadena sensible a mayúsculas referida al ID único del elemento buscado.</dd> +</dl> + +<h3 id="Valor_Retornado"><strong>Valor Retornado</strong></h3> + +<dl> + <dt><code><strong>element</strong></code></dt> + <dd>Es una referencia a un objeto {{domxref("Element")}}, o <code>null</code> si un elemento con el ID especificado no se encuentra en el documento.</dd> + <dt> + <h2 id="Ejemplo">Ejemplo</h2> + + <h3 id="HTML">HTML</h3> + + <pre class="brush: html"><html> +<head> + <title>Ejemplo getElementById</title> +</head> +<body> + <p id="para">Cualquier texto acá</p> + <button onclick="changeColor('blue');">Azul</button> + <button onclick="changeColor('red');">Rojo</button> +</body> +</html> +</pre> + + <h3 id="JavaScript">JavaScript</h3> + + <pre class="brush: js">function changeColor(newColor) { + var elem = document.getElementById('para'); + elem.style.color = newColor; +} +</pre> + + <h3 id="Resultado">Resultado</h3> + + <p>{{EmbedLiveSample('Ejemplo', 250, 100)}}</p> + </dt> +</dl> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Los usuarios nuevos deberían notar que escribir en mayúsculas 'Id' en el nombre de este método <em>debe ser corregida</em> para que el código sea válido - 'getElementByID' no funcionará a pesar de que parezca natural.</p> + +<p>A diferencia de otros métodos similares, getElementById sólo está disponible como un método del objeto global document, y no se encuentra disponible como un método en todos los objetos del DOM. Como los valores ID deben ser únicos a traves del documento, no existe necesidad para versiones "locales" de la función.</p> + +<h2 id="Ejemplo_2">Ejemplo</h2> + +<pre class="brush: html"><!doctype html> +<html> +<head> + <meta charset="UTF-8"> + <title>Documento</title> +</head> +<body> + <div id="parent-id"> + <p>Hola Mundo 1</p> + <p id="test1">Hola Mundo 2</p> + <p>Hola palabra 3</p> + <p>Hola palabra 4</p> + </div> + <script> + var parentDOM = document.getElementById('parent-id'); + var test1=parentDOM.getElementById('test1'); + //lanza error + //Uncaught TypeError: parentDOM.getElementById is not a function + </script> +</body> +</html></pre> + +<p>Si no existe un elemento con la <code>id</code> solicitada, esta función devuelve <code>null</code>. Note que el parámetro <code>id</code> es sensible a mayúsculas, así que <code>document.getElementById("Main")</code> devolverá <code>null</code> dentro del elemento <code><div id="main"></code> porque "M" y "m" son diferentes para los propósitos de este método.</p> + +<p><strong>Elementos que no se encuentren</strong> en el documento no serán buscados por <code>getElementById()</code>. Cuando se cree un elemento y se le asigne un ID, debe insertar el elemento dentro del árbol del documento con {{domxref("Node.insertBefore()")}} u otro método similar antes de que se pueda acceder a el con <code>getElementById()</code>:</p> + +<div id="<strong>m</strong>ain"> +<pre class="brush: js">var element = document.createElement("div"); +element.id = 'testqq'; +var el = document.getElementById('testqq'); // el será null! +</pre> + +<p><strong>Documentos no-HTML</strong>. La implementación de DOM debe tener información que diga que atributos son del tipo ID. Los atributos con el nombre "id" son son del tipo ID a menos que se los defina en el DTD del documento. El atributo <code>id</code> es definido para ser del tipo ID en los casos comunes de <a href="https://developer.mozilla.org/en-US/docs/XHTML">XHTML</a>, <a href="/es/docs/Mozilla/Tech/XUL">XUL</a>, y otros. Las implementaciones que no sepan si los atributos son o no del tipo ID se espera que retornen null.</p> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<table> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Status</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definición inicial para la interfase</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Supersede DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Supersede DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Intend to supersede DOM 3</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad con navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>5.5</td> + <td>7.0</td> + <td>1.0</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>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile(1.0) }}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>La referencia <a href="/en-US/docs/DOM/document" title="en-US/docs/DOM/document">document</a> para otros métodos y propiedades que se pueden usar para obtener referencias a elementos en el documento.</li> + <li><a href="/en-US/docs/Web/API/document.querySelector">document.querySelector()</a> para selectores via consultas como <code>'div.myclass'</code></li> + <li><a href="/en-US/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> - tiene un método utilitario para permitir que <code>getElementById()</code> obtenga 'xml:id' en documentos XML documents (como los retornados por llamadas Ajax.</li> +</ul> +</div> diff --git a/files/es/web/api/document/getelementsbyclassname/index.html b/files/es/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..b3a7179e4d --- /dev/null +++ b/files/es/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,96 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +translation_of: Web/API/Document/getElementsByClassName +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<p>Retorna un objecto similar a un array de los elementos hijos que tengan todos los nombres de clase indicados. Cuando es llamado sobre el objeto document , la busqueda se realiza en todo el document, incluido el nodo raíz. También puedes llamar {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} sobre cualquier elemento; en ese caso retornara sólo los elementos hijos del elemento raíz indicado que contengan los nombres de clase indicados.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><var>var elementos</var> = document.getElementsByClassName(<em>nombres</em>); // ó : +<var>var elementos</var> = elementoRaiz.getElementsByClassName(<em>nombres</em>);</pre> + +<ul> + <li><var>elementos es una</var> {{ domxref("HTMLCollection") }} de los elementos encontrados.</li> + <li><var>nombres es un string que representa la lista de nombres de clase a buscar; los nombres de clase se separan con un espacio.</var></li> + <li>getElementsByClassName se puede llamar sobre cualquier elemento, no solo sobre document. El elemento sobre el que se llama será usado como la raíz de la busqueda.</li> +</ul> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<p>Obtener todos los elementos de la clase 'prueba'</p> + +<pre class="brush: js">document.getElementsByClassName('prueba');</pre> + +<p>Obtener todos los elementos que tengan al mismo tiempo las clases 'rojo' y 'prueba'</p> + +<pre class="brush: js">document.getElementsByClassName('rojo prueba');</pre> + +<p>Obtener todos los elementos que tengan la clase 'prueba' y que estén dentro de un elemento de ID 'principal'</p> + +<pre class="brush: js">document.getElementById('principal').getElementsByClassName('prueba');</pre> + +<p>También podemos usar los metodos de Array.prototype en cualquier {{ domxref("HTMLCollection") }} pasando el <em>HTMLCollection</em> como el valor <em>this</em> del método. Aquí buscaremos todos los elementos div de la clase 'test':</p> + +<pre class="brush: js">var testElements = document.getElementsByClassName('test'); +var testDivs = Array.prototype.filter.call(testElements, function(testElement){ + return testElement.nodeName === 'DIV'; +});</pre> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>3.0</td> + <td>9.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">Especifiación</h2> + +<ul> + <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external">W3C: getElementsByClassName</span></a></li> +</ul> diff --git a/files/es/web/api/document/getelementsbyname/index.html b/files/es/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..50350fe0ec --- /dev/null +++ b/files/es/web/api/document/getelementsbyname/index.html @@ -0,0 +1,81 @@ +--- +title: Document.getElementsByName() +slug: Web/API/Document/getElementsByName +translation_of: Web/API/Document/getElementsByName +--- +<div>{{APIRef("DOM")}}</div> + +<p>Returns a nodelist collection with a given {{domxref("element.name","name")}} in the (X)HTML document.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><em>elements</em> = document.getElementsByName(<em>name</em>) +</pre> + +<ul> + <li><code>elements</code> es una colección existente de {{domxref("NodeList")}}</li> + <li><code>name</code> es el valor del atributo <code>name</code> del elemento.</li> +</ul> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> + ... +</head> + +<body> +<form name="up"><input type="text"></form> +<div name="down"><input type="text"></div> + +<script> +var up_forms = document.getElementsByName("up"); +console.log(up_forms[0].tagName); // returns "FORM" +</script> +</body> +</html> +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>El atributo <a href="/en-US/docs/DOM/element.name"><code>name</code></a> es solamente aplicable al documento (X)HTML. El método retorna una colección existente de {{domxref("NodeList")}} que contiene todos los elementos con el valor dado para el atributo <code>name</code>, tanto {{htmlelement("meta")}} o {{htmlelement("object")}} o en caso que <code>name</code> sea colocado en elementos que no soportan un atributo de atributo del todo.</p> + +<p>El método <strong>getElementsByName</strong> trabaja de diferente manera en diferentes navegadires. En IE < 10, el método getElementsByName() tambipen retornará elementos que tienen un atributo <code>id</code> con el valor especificado. Entonces, debería tener cuidado de no usar el mismo string como <code>name</code> y <code>ID</code>.</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/">DOM Level 2 HTML: getElementsByName</a></li> + <li><a href="http://www.whatwg.org/html/#dom-document-getelementsbyname" title="http://www.whatwg.org/html/">HTML5: getElementsByName</a></li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Mira también</h2> + +<ul> + <li>{{domxref("document.getElementById()")}} para retornar una referencia de un elemento por su <code>id</code></li> + <li>{{domxref("document.getElementsByTagName()")}} para retornar referencias de elementos por el nombre de sus etiquetas</li> + <li>{{domxref("document.querySelector()")}} for powerful selectors via queries like <code>'div.myclass'</code></li> +</ul> diff --git a/files/es/web/api/document/getelementsbytagname/index.html b/files/es/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..7be48858c0 --- /dev/null +++ b/files/es/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,104 @@ +--- +title: document.getElementsByTagName +slug: Web/API/Document/getElementsByTagName +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Document/getElementsByTagName +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>Devuelve una lista de elementos con un nombre determinado. Se busca en todo el documento, incluyendo el nodo raíz.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval"><em>elements</em> = document.getElementsByTagName(<em>name</em>) +</pre> + +<ul> + <li><code>elements</code> es una lista 'viva' (<code>NodeList</code>) de los elementos encontrados en el orden en que han aparecido en el árbol.</li> + <li><code>name</code> es una cadena que representa el nombre de los elementos. La cadena especial "*" representa a todos los elementos.</li> +</ul> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<p>En el siguiente ejemplo, <code>getElementsByTagName</code> empieza por el elemento padre y busca hacia abajo recurrentemente a lo largo de todo el DOM por ese elemento padre, buscando por hijos que cumplan con el criterio: nombre = <code>name</code>.</p> + +<p>Ten en cuenta que cuando el nodo en el que se invoca <code>getElementsByTagName</code>, no es el nodo <code>document</code>, en realidad se está usando el método <a href="es/DOM/element.getElementsByTagName">element.getElementsByTagName</a>.</p> + +<pre><html> + +<head> +<title>ejemplo de getElementsByTagName</title> + +<script type="text/javascript"> + +function getAllParaElems() +{ + var allParas = document.getElementsByTagName("p"); + + var num = allParas.length; + + alert("Hay " + num + " <p> elementos en este documento"); +} + + +function div1ParaElems() +{ + var div1 = document.getElementById("div1") + var div1Paras = div1.getElementsByTagName("p"); + + var num = div1Paras.length; + + alert("Hay " + num + " <p> elementos en el elemento div1"); +} + + +function div2ParaElems() +{ + var div2 = document.getElementById("div2") + var div2Paras = div2.getElementsByTagName("p"); + + var num = div2Paras.length; + + alert("Hay " + num + " <p> elementos en el elemento div2"); +} + +</script> +</head> + +<body style="border: solid green 3px"> +<p>Algo de texto</p> +<p>Algo de texto</p> + + <div id="div1" style="border: solid blue 3px"> + <p>Algo de texto en div1</p> + <p>Algo de texto en div1</p> + <p>Algo de texto en div1</p> + + <div id="div2" style="border: solid red 3px"> + <p>Algo de texto en div2</p> + <p>Algo de texto en div2</p> + </div> + </div> + +<p>Algo de texto</p> +<p>Algo de texto</p> + +<button onclick="getAllParaElems();"> + muestra todos los elementos p en el documento</button><br /> + +<button onclick="div1ParaElems();"> + muestra todos los elementos p en div1</button><br /> + +<button onclick="div2ParaElems();"> + muestra todos los elementos p en div2</button> + +</body> +</html> +</pre> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core: Document.getElementsByTagName</a></p> diff --git a/files/es/web/api/document/getelementsbytagnamens/index.html b/files/es/web/api/document/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..d97657647b --- /dev/null +++ b/files/es/web/api/document/getelementsbytagnamens/index.html @@ -0,0 +1,107 @@ +--- +title: document.getElementsByTagNameNS +slug: Web/API/Document/getElementsByTagNameNS +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Document/getElementsByTagNameNS +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>Devuelve una lista de elementos cuyo nombre pertenece a un determinado 'namespace'. La búsqueda se realiza en todo el documento, incluyendo el elemento raíz.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval"><em>elements</em> = document.getElementsByTagNameNS(<em>namespace</em>,<em>name</em>) +</pre> + +<ul> + <li><code>elements</code> es una lista del tipo <code>NodeList</code> de los elementos encontrados, en el orden en el que aparecen en el árbol.</li> + <li><code>namespace</code> es el nombre URI en el que buscamos. (Véase <code><a href="es/DOM/element.namespaceURI">element.namespaceURI</a></code>).</li> + <li><code>name</code> es bien el nombre local por el que buscamos, o bien el valor especial <code>"*"</code>, que representa todos los elementos (véase <code><a href="es/DOM/element.localName">element.localName</a></code>).</li> +</ul> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<p>En el siguiente ejemplo, <code>getElementsByTagNameNS</code> comienza por un elemento padre determinado y busca recurrentemente, hacia abajo, por los elementos que tienen el parámetro <code>name</code> que concuerda.</p> + +<p>Es importante tener en cuenta que cuando el nodo en el que se invoca <code>getElementsByTagName</code>, no es el nodo <code>document</code>, en realidad estamos usando el método <a href="es/DOM/element.getElementsByTagNameNS">element.getElementsByTagNameNS</a>.</p> + +<p>Para usar el siguiente ejemplo, copia y pega en un documento con la extensión xhtml.</p> + +<pre><html xmlns="http://www.w3.org/1999/xhtml"> + +<head> +<title>ejemplo de getElementsByTagNameNS</title> + +<script type="text/javascript"> + +function getAllParaElems() +{ + var allParas = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p"); + + var num = allParas.length; + + alert("Hay " + num + " &lt;p&gt; elementos en este documento"); +} + + +function div1ParaElems() +{ + var div1 = document.getElementById("div1") + var div1Paras = div1.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p"); + + var num = div1Paras.length; + + alert("Hay " + num + " &lt;p&gt; elementos en el elemento div1"); +} + + +function div2ParaElems() +{ + var div2 = document.getElementById("div2") + var div2Paras = div2.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p"); + + var num = div2Paras.length; + + alert("Hay " + num + " &lt;p&gt; elementos en el elemento div2"); +} + +</script> +</head> + +<body style="border: solid green 3px"> +<p>Algo de texto exterior</p> +<p>Algo de texto exterior</p> + + <div id="div1" style="border: solid blue 3px"> + <p>Algo de texto en div1</p> + <p>Algo de texto en div1</p> + <p>Algo de texto en div1</p> + + <div id="div2" style="border: solid red 3px"> + <p>Algo de texto en div2</p> + <p>Algo de texto en div2</p> + </div> + </div> + +<p>Algo de texto exterior</p> +<p>Algo de texto exterior</p> + +<button onclick="getAllParaElems();"> + muestra todos los elementos p en el documento</button><br /> + +<button onclick="div1ParaElems();"> + muestra todos los elementos p en el div1</button><br /> + +<button onclick="div2ParaElems();"> + muestra todos los elementos p en el div2</button> + +</body> +</html> +</pre> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">DOM Level 2 Core: Document.getElementsByTagNameNS</a></p> diff --git a/files/es/web/api/document/getselection/index.html b/files/es/web/api/document/getselection/index.html new file mode 100644 index 0000000000..494ded4250 --- /dev/null +++ b/files/es/web/api/document/getselection/index.html @@ -0,0 +1,12 @@ +--- +title: Document.getSelection() +slug: Web/API/Document/getSelection +tags: + - Referencia + - Selección + - metodo +translation_of: Web/API/DocumentOrShadowRoot/getSelection +--- +<p>{{APIRef("DOM")}}</p> + +<p>Este método funciona exactamente igual que {{domxref("Window.getSelection()")}}; devuelve un objeto {{domxref("Selection")}} que representa el texto que se ha seleccionado en el documento.</p> diff --git a/files/es/web/api/document/hasfocus/index.html b/files/es/web/api/document/hasfocus/index.html new file mode 100644 index 0000000000..a3f4a7ce9e --- /dev/null +++ b/files/es/web/api/document/hasfocus/index.html @@ -0,0 +1,23 @@ +--- +title: element.hasFocus +slug: Web/API/Document/hasFocus +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Document/hasFocus +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>El atributo <code>hasFocus</code> devuelve <code>true</code> si el foco está en en algún sitio del documento activo. Este atributo es parte de la especificación HTML 5 actualmente en desarrollo.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">focused = element.hasFocus +</pre> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Focus management </a></p> diff --git a/files/es/web/api/document/head/index.html b/files/es/web/api/document/head/index.html new file mode 100644 index 0000000000..a135b5cf3e --- /dev/null +++ b/files/es/web/api/document/head/index.html @@ -0,0 +1,83 @@ +--- +title: Document.head +slug: Web/API/Document/head +translation_of: Web/API/Document/head +--- +<p>{{APIRef("DOM")}}</p> + +<p>Devuelve el elemento {{HTMLElement("head")}} del documento actual. Si hay más de un elemento <code><head></code>, devuelve el primero de estos.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><em>var objRef</em> = document.head; +</pre> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="brush: js">// en el HTML: <head id="my-document-head"> +var aHead = document.head; + +alert(aHead.id); // "my-document-head"; + +alert( document.head === document.querySelector("head") ); // true +</pre> + +<h2 id="Example" name="Example">Notas</h2> + +<p><code>document.head</code> is de sólo lectura. Cualquier intento de asignar un valor a esta propiedad fallará silenciosamente o, en caso de que se encuentre en <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Modo estricto de ECMAScript</a> en un navegador Gecko, lanzará un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError"><code>TypeError</code></a>.</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Soporte básico</td> + <td>4.0</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0</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>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<ul> + <li><a href="http://www.w3.org/TR/html5/dom.html#dom-tree-accessors" title="http://www.w3.org/TR/html5/dom.html#dom-document-head">HTML5: DOM Tree Accessors</a></li> +</ul> diff --git a/files/es/web/api/document/height/index.html b/files/es/web/api/document/height/index.html new file mode 100644 index 0000000000..1bc2852c58 --- /dev/null +++ b/files/es/web/api/document/height/index.html @@ -0,0 +1,44 @@ +--- +title: Document.height +slug: Web/API/Document/height +translation_of: Web/API/Document/height +--- +<div>{{APIRef("DOM")}} {{Obsolete_header}}</div> + +<div class="note"> +<p><strong>Note:</strong> Comenzando en {{Gecko("6.0")}},<code> document.height </code>no es soportada. En lugar usar <code>document.body.clientHeight</code>. Ver {{domxref("element.clientHeight")}}.</p> +</div> + +<h2 id="Summary">Summary</h2> + +<p>Devuelve la altura del objeto {{domxref("document")}} . En la mayoría de los casos, esto equivale al elemento {{HTMLElement("body")}} del documento actual.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>height_value</em> = document.height +</pre> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">// alert document height +alert(document.height); +</pre> + +<h2 id="Alternatives">Alternatives</h2> + +<pre class="syntaxbox">document.body.clientHeight +document.documentElement.clientHeight +document.documentElement.scrollHeight +</pre> + +<h2 id="Specification">Specification</h2> + +<p>HTML5</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("document.width")}}</li> + <li>{{domxref("Element.clientHeight")}}</li> + <li>{{domxref("Element.scrollHeight")}}</li> +</ul> diff --git a/files/es/web/api/document/hidden/index.html b/files/es/web/api/document/hidden/index.html new file mode 100644 index 0000000000..e90970233b --- /dev/null +++ b/files/es/web/api/document/hidden/index.html @@ -0,0 +1,43 @@ +--- +title: Document.hidden +slug: Web/API/Document/hidden +translation_of: Web/API/Document/hidden +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>El <code><strong>Document.hidden</strong></code> Es una propiedad solo de lectura, retorna un valor Booleano que indica si la pagina esta conciderada oculta o no.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var <em>boolean</em> = document.hidden</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush:js;">document.addEventListener("visibilitychange", function() { + console.log( document.hidden ); + // Modify behavior... +}); +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Especificacion</th> + <th>Estado</th> + <th>Comentario</th> + </tr> + <tr> + <td>{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>definicion inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> + + + +<p>{{Compat("api.Document.hidden")}}</p> diff --git a/files/es/web/api/document/importnode/index.html b/files/es/web/api/document/importnode/index.html new file mode 100644 index 0000000000..ea34cd33be --- /dev/null +++ b/files/es/web/api/document/importnode/index.html @@ -0,0 +1,84 @@ +--- +title: Document.importNode() +slug: Web/API/Document/importNode +translation_of: Web/API/Document/importNode +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<p>Crea una copia de un nodo desde un documento externo para ser insertado en el documento actual.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox">var <em>node</em> = <em>document</em>.importNode(<em>externalNode</em>, <em>deep</em>); +</pre> + +<dl> + <dt><code>node</code></dt> + <dd>El nuevo nodo importado al documento actual. El <code><a href="/en-US/docs/DOM/Node.parentNode" title="DOM/Node.parentNode">parentNode</a></code> del nuevo nodo es <code>null</code>, ya que aun no ha sido insertado en el arbol del documento.</dd> + <dt><code>externalNode</code></dt> + <dd>El nodo externo a ser importado</dd> + <dt><code>deep</code></dt> + <dd>Un booleano que indica si los descendientes del nodo deben ser importados también.</dd> +</dl> + +<div class="note"> +<p><strong>Nota:</strong> En la especificación DOM4 (tal y como se ha implementado en Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> es un argumento opcional. En el caso de ser omitido, adopta el valor de <strong><code>true</code></strong>, por lo que se hace una <em>deep copy</em> por defecto. Para realizar una copia superficial (<em>shallow copy</em>), <em>deep</em> debe ser <strong><code>false</code></strong>.</p> + +<p>Este comportamiento ha cambiado en la ultima especificación, por lo que si se omite el parámetro <em>deep,</em> éste adopta el valor <strong><code>false</code></strong>. Aunque aún es opcional, debería ser siempre provisto por razones de compatibilidad. Con Gecko 28.0 {{geckoRelease(28)}}, la consola advertia a los desarrolladores de no omitir el argumento. Empezando con Gecko 29.0 {{geckoRelease(29)}}), se realiza una copia superficial (<em>shallow copy</em>) por defecto.</p> +</div> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="brush: js">var iframe = document.getElementsByTagName("iframe")[0]; +var oldNode = iframe.contentWindow.document.getElementById("myNode"); +var newNode = document.importNode(oldNode, true); +document.getElementById("container").appendChild(newNode); +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>El nodo original no se borra del documento. El nodo importado es un clon del original.</p> + +<p> </p> + +<p>Nodes from external documents should be cloned using <a href="/es/docs/Web/API/Document/importNode" title="Crea una copia de un nodo desde un documento externo para ser insertado en el documento actual."><code>document.importNode()</code></a> (or adopted using <a href="/es/docs/Web/API/Document/adoptNode" title="Adopta un nodo extreno. El nodo y sub subnodos son quitados del documento en que se encuentra y su nuevo ownerDocument se cambia por el actual. El nodo puede entoces ser insertado en el documento actual."><code>document.adoptNode()</code></a>) before they can be inserted into the current document. For more on the <a href="/es/docs/Web/API/Node/ownerDocument" title="La propiedad de lectura Nodo.ownerDocument devuelve el objecto Document de más alto nivel/jerarquia para ese nodo."><code>Node.ownerDocument</code></a> issues, see the <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p> + +<p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.</p> + +<p> </p> + +<h2 id="Especificaciones">Especificaciones</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-document-importnode", "document.importNode()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_navegadores">Compatibilidad navegadores</h2> + +<div> + + +<p>{{Compat("api.Document.importNode")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("document.adoptNode()")}}</li> +</ul> diff --git a/files/es/web/api/document/index.html b/files/es/web/api/document/index.html new file mode 100644 index 0000000000..5b72f5850e --- /dev/null +++ b/files/es/web/api/document/index.html @@ -0,0 +1,390 @@ +--- +title: Documento +slug: Web/API/Document +tags: + - páginas_a_traducir +translation_of: Web/API/Document +--- +<div>{{ ApiRef }}</div> + +<div> </div> + +<p><span class="seoSummary">La interfaz <strong><code>Document</code></strong> representa cualquer página web cargada en el navegador y sirve como punto de entrada al contenido de la página (El árbol <a href="/es/docs/Uso_del_núcleo_del_nivel_1_del_DOM" title="Using_the_W3C_DOM_Level_1_Core">DOM</a>).</span> El DOM incluye elementos como {{HTMLElement("body")}} y {{HTMLElement("table")}}), entre <a href="/es/docs/Web/HTML/Element">muchos otros</a>, y proporciona funcionalidad que es global al documento, como obtener la URL de la página y crear nuevos elementos en el documento.</p> + +<p>{{inheritanceDiagram}}</p> + +<p>La interfaz <code>Document</code> describe los métodos y propiedade comunes para cualquier clase de documento. Dependiento del tipo de documento (ej. <a href="/es/docs/Web/HTML" title="HTML">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/XML" title="XML">XML</a>, SVG, …), hay disponible una API más extensa: los documentos HTML, que se sirven con el tipo de contenido <code>text/html</code>, también implementan la interfaz {{domxref("HTMLDocument")}}, mientras que los documentos XML y SVG implementan la interfaz {{domxref("XMLDocument")}}.</p> + +<h2 id="Properties" name="Properties">Propiedades</h2> + +<div class="note"> +<p><strong>Nota:</strong> La interfaz <code>Document</code> también hereda de las interfaces {{domxref("Node")}} y {{domxref("EventTarget")}}.</p> +</div> + +<dl> + <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt> + <dd>Da acceso a todos los elementos del documento. Es una interfaz no estándar y no se debería utilizar.</dd> + <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt> + <dd>Se utiliza con {{domxref("document.load")}} para indicar una petición asíncrona.</dd> + <dt>{{domxref("Document.characterSet")}} {{readonlyinline}}</dt> + <dd>Devuelve el juego de caracteres que utiliza el documento.</dd> + <dt>{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}</dt> + <dd>Es un alias de {{domxref("Document.characterSet")}}. Utilice esta propiedad en su lugar.</dd> + <dt>{{domxref("Document.compatMode")}} {{experimental_inline}}</dt> + <dd>Indicates whether the document is rendered in Quirks or Strict mode.</dd> + <dt>{{domxref("Document.contentType")}} {{experimental_inline}}</dt> + <dd>Returns the Content-Type from the MIME Header of the current document.</dd> + <dt>{{domxref("Document.doctype")}}</dt> + <dd>Returns the Document Type Definition (DTD) of the current document.</dd> + <dt>{{domxref("Document.documentElement")}}</dt> + <dd>Returns the Element that is a direct child of the document. For HTML documents, this is normally the HTML element.</dd> + <dt>{{domxref("Document.documentURI")}}</dt> + <dd>Returns the document URL.</dd> + <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt> + <dd>Should return a {{domxref("DOMConfiguration")}} object.</dd> + <dt>{{domxref("Document.implementation")}}</dt> + <dd>Returns the DOM implementation associated with the current document.</dd> + <dt>{{domxref("Document.inputEncoding")}} {{Deprecated_inline}}</dt> + <dd>Returns the encoding used when the document was parsed.</dd> + <dt>{{domxref("Document.lastStyleSheetSet")}}</dt> + <dd>Returns the name of the style sheet set that was last enabled. Has the value <code>null</code> until the style sheet is changed by setting the value of {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> + <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt> + <dd><code>true</code> if this document is synthetic, such as a standalone image, video, audio file, or the like.</dd> + <dt>{{domxref("Document.mozFullScreen")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd><code>true</code> when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd> + <dt>{{domxref("Document.mozFullScreenElement")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd>The element that's currently in full screen mode for this document.</dd> + <dt>{{domxref("Document.mozFullScreenEnabled")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd><code>true</code> if calling {{domxref("element.mozRequestFullscreen()")}} would succeed in the curent document.</dd> + <dt>{{domxref("Document.pointerLockElement")}} {{experimental_inline}}</dt> + <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd> + <dt>{{domxref("Document.preferredStyleSheetSet")}}</dt> + <dd>Returns the preferred style sheet set as specified by the page author.</dd> + <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt> + <dd>Returns which style sheet set is currently in use.</dd> + <dt>{{domxref("Document.styleSheets")}}</dt> + <dd>Returns a list of the style sheet objects on the current document.</dd> + <dt>{{domxref("Document.styleSheetSets")}}</dt> + <dd>Returns a list of the style sheet sets available on the document.</dd> + <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt> + <dd>Returns the encoding as determined by the XML declaration.</dd> + <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd> + <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p> + +<h3 id="Extension_for_HTML_documents">Extension for HTML documents</h3> + +<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents:</p> + +<dl> + <dt>{{domxref("Document.activeElement")}}</dt> + <dd>Returns the currently focused element.</dd> + <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt> + <dd>Returns or sets the color of active links in the document body.</dd> + <dt>{{domxref("Document.anchors")}}</dt> + <dd>Returns a list of all of the anchors in the document.</dd> + <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt> + <dd>Returns an ordered list of the applets within a document.</dd> + <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the background color of the current document.</dd> + <dt>{{domxref("Document.body")}}</dt> + <dd>Returns the {{HTMLElement("body")}} element of the current document.</dd> + <dt>{{domxref("Document.cookie")}}</dt> + <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd> + <dt>{{domxref("Document.defaultView")}}</dt> + <dd>Returns a reference to the window object.</dd> + <dt>{{domxref("Document.designMode")}}</dt> + <dd>Gets/sets the ability to edit the whole document.</dd> + <dt>{{domxref("Document.dir")}}</dt> + <dd>Gets/sets directionality (rtl/ltr) of the document.</dd> + <dt>{{domxref("Document.domain")}}</dt> + <dd>Returns the domain of the current document.</dd> + <dt>{{domxref("Document.embeds")}}</dt> + <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd> + <dt>{{domxref("Document.fgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the foreground color, or text color, of the current document.</dd> + <dt>{{domxref("Document.forms")}}</dt> + <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd> + <dt>{{domxref("Document.head")}}</dt> + <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd> + <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Gets/sets the height of the current document.</dd> + <dt>{{domxref("Document.images")}}</dt> + <dd>Returns a list of the images in the current document.</dd> + <dt>{{domxref("Document.lastModified")}}</dt> + <dd>Returns the date on which the document was last modified.</dd> + <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of hyperlinks in the document.</dd> + <dt>{{domxref("Document.links")}}</dt> + <dd>Returns a list of all the hyperlinks in the document.</dd> + <dt>{{domxref("Document.location")}}</dt> + <dd>Returns the URI of the current document.</dd> + <dt>{{domxref("Document.plugins")}}</dt> + <dd>Returns a list of the available plugins.</dd> + <dt>{{domxref("Document.readyState")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns loading status of the document.</dd> + <dt>{{domxref("Document.referrer")}}</dt> + <dd>Returns the URI of the page that linked to this page.</dd> + <dt>{{domxref("Document.scripts")}}</dt> + <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd> + <dt>{{domxref("Document.title")}}</dt> + <dd>Returns the title of the current document.</dd> + <dt>{{domxref("Document.URL")}}</dt> + <dd>Returns a string containing the URL of the current document.</dd> + <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of visited hyperlinks.</dd> + <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the width of the current document.</dd> +</dl> + +<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>Returns the event handling code for the {{event("pointerlockchange")}} event.</dd> + <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>Returns the event handling code for the {{event("pointerlockerror")}} event.</dd> + <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the event handling code for the <code>readystatechange</code> event.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<div class="note"> +<p><strong>Note:</strong> The <code>Document</code> interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</p> +</div> + +<dl> + <dt>{{domxref("Document.adoptNode","Document.adoptNode(Node node)")}}</dt> + <dd>Adopt node from an external document.</dd> + <dt>{{domxref("Document.captureEvents","Document.captureEvents(String eventName)")}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("window.captureEvents")}}.</dd> + <dt>{{domxref("Document.caretPositionFromPoint","Document.caretPositionFromPoint(Number x, Number y)")}}</dt> + <dd>Gets a {{domxref("CaretPosition")}} based on two coordinates.</dd> + <dt>{{domxref("Document.createAttribute","Document.createAttribute(String name)")}}</dt> + <dd>Creates a new {{domxref("Attr")}} object and returns it.</dd> + <dt>{{domxref("Document.createAttributeNS","Document.createAttributeNS(String namespace, String name)")}}</dt> + <dd>Creates a new attribute node in a given namespace and returns it.</dd> + <dt>{{domxref("Document.createCDATASection","Document.createCDATASection(String data)")}}</dt> + <dd>Creates a new CDATA node and returns it.</dd> + <dt>{{domxref("Document.createComment","Document.createComment(String comment)")}}</dt> + <dd>Creates a new comment node and returns it.</dd> + <dt>{{domxref("Document.createDocumentFragment()")}}</dt> + <dd>Creates a new document fragment.</dd> + <dt>{{domxref("Document.createElement","Document.createElement(String name)")}}</dt> + <dd>Creates a new element with the given tag name.</dd> + <dt>{{domxref("Document.createElementNS","Document.createElementNS(String namespace, String name)")}}</dt> + <dd>Creates a new element with the given tag name and namespace URI.</dd> + <dt>{{domxref("Document.createEntityReference","Document.createEntityReference(String name)")}} {{obsolete_inline}}</dt> + <dd>Creates a new entity reference object and returns it.</dd> + <dt>{{domxref("Document.createEvent","Document.createEvent(String interface)")}}</dt> + <dd>Creates an event object.</dd> + <dt>{{domxref("Document.createNodeIterator","Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt> + <dd>Creates a {{domxref("NodeIterator")}} object.</dd> + <dt>{{domxref("Document.createProcessingInstruction","Document.createProcessingInstruction(String target, String data)")}}</dt> + <dd>Creates a new {{domxref("ProcessingInstruction")}} object.</dd> + <dt>{{domxref("Document.createRange()")}}</dt> + <dd>Creates a {{domxref("Range")}} object.</dd> + <dt>{{domxref("Document.createTextNode","Document.createTextNode(String text)")}}</dt> + <dd>Creates a text node.</dd> + <dt>{{domxref("Document.createTreeWalker","Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt> + <dd>Creates a {{domxref("TreeWalker")}} object.</dd> + <dt>{{domxref("Document.elementFromPoint","Document.elementFromPoint(Number x, Number y)")}}</dt> + <dd>Returns the element visible at the specified coordinates.</dd> + <dt>{{domxref("Document.enableStyleSheetsForSet","Document.enableStyleSheetsForSet(String name)")}}</dt> + <dd>Enables the style sheets for the specified style sheet set.</dd> + <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt> + <dd>Release the pointer lock.</dd> + <dt>{{domxref("Document.getElementsByClassName","Document.getElementsByClassName(String className)")}}</dt> + <dd>Returns a list of elements with the given class name.</dd> + <dt>{{domxref("Document.getElementsByTagName","Document.getElementsByTagName(String tagName)")}}</dt> + <dd>Returns a list of elements with the given tag name.</dd> + <dt>{{domxref("Document.getElementsByTagNameNS","Document.getElementsByTagNameNS(String namespace, String tagName)")}}</dt> + <dd>Returns a list of elements with the given tag name and namespace.</dd> + <dt>{{domxref("Document.importNode","Document.importNode(Node node, Boolean deep)")}}</dt> + <dd>Returns a clone of a node from an external document.</dd> + <dt>{{domxref("document.mozSetImageElement")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Allows you to change the element being used as the background image for a specified element ID.</dd> + <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt> + <dd>Replaces entities, normalizes text nodes, etc.</dd> + <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Releases the current mouse capture if it's on an element in this document.</dd> + <dt>{{domxref("Document.releaseEvents")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("window.releaseEvents")}}.</dd> + <dt>{{domxref("document.routeEvent")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt> + <dd>See {{domxref("window.routeEvent")}}.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<dl> + <dt>{{domxref("Document.getElementById","Document.getElementById(String id)")}}</dt> + <dd>Returns an object reference to the identified element.</dd> + <dt>{{domxref("Document.querySelector","Document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd> + <dt>{{domxref("Document.querySelectorAll","Document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("XPathEvaluator")}} interface:</p> + +<dl> + <dt>{{domxref("Document.createExpression","Document.createExpression(String expression, XPathNSResolver resolver)")}}</dt> + <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd> + <dt>{{domxref("Document.createNSResolver","Document.createNSResolver(Node resolver)")}}</dt> + <dd>Creates an {{domxref("XPathNSResolver")}} object.</dd> + <dt>{{domxref("Document.evaluate","Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt> + <dd>Evaluates an XPath expression.</dd> +</dl> + +<h3 id="Extension_for_HTML_documents_2">Extension for HTML documents</h3> + +<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents:</p> + +<dl> + <dt>{{domxref("Document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd> + <dt>{{domxref("Document.close()")}}</dt> + <dd>Closes a document stream for writing.</dd> + <dt>{{domxref("Document.execCommand","Document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt> + <dd>On an editable document, executes a formating command.</dd> + <dt>{{domxref("Document.getElementsByName","Document.getElementsByName(String name)")}}</dt> + <dd>Returns a list of elements with the given name.</dd> + <dt>{{domxref("Document.getSelection()")}}</dt> + <dd>Returns a {{domxref("Selection")}} object related to text selected in the document.</dd> + <dt>{{domxref("Document.hasFocus()")}}</dt> + <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd> + <dt>{{domxref("Document.open()")}}</dt> + <dd>Opens a document stream for writing.</dd> + <dt>{{domxref("Document.queryCommandEnabled","Document.queryCommandEnabled(String command)")}}</dt> + <dd>Returns true if the formating command can be executed on the current range.</dd> + <dt>{{domxref("Document.queryCommandIndeterm","Document.queryCommandIndeterm(String command)")}}</dt> + <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd> + <dt>{{domxref("Document.queryCommandState","Document.queryCommandState(String command)")}}</dt> + <dd>Returns true if the formating command has been executed on the current range.</dd> + <dt>{{domxref("Document.queryCommandSupported","Document.queryCommandSupported(String command)")}}</dt> + <dd>Returns true if the formating command is supported on the current range.</dd> + <dt>{{domxref("Document.queryCommandValue","Document.queryCommandValue(String command)")}}</dt> + <dd>Returns the current value of the current range for a formatting command.</dd> + <dt>{{domxref("Document.registerElement","Document.registerElement(String tagname[, Object options])")}}</dt> + <dd>Registers a new custom element in the browser and returns a constructor for the new element.</dd> + <dt>{{domxref("Document.write","Document.write(String text)")}}</dt> + <dd>Writes text in a document.</dd> + <dt>{{domxref("Document.writeln","Document.writeln(String text)")}}</dt> + <dd>Writes a line of text in a document.</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('DOM1','#i-Document','Document')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition for the interface</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Supersede DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Supersede DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Intend to supersede DOM 3</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td> + <td>{{Spec2('DOM3 XPath')}}</td> + <td>Define the {{domxref("XPathEvaluator")}} interface which extend <code>Document</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<h3 id="Firefox_notes">Firefox notes</h3> + +<p>Mozilla defines a set of non-standard properties made only for XUL content:</p> + +<dl> + <dt>{{domxref("document.currentScript")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd> + <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd> + <dt>{{domxref("document.popupNode")}}</dt> + <dd>Returns the node upon which a popup was invoked.</dd> + <dt>{{domxref("document.tooltipNode")}}</dt> + <dd>Returns the node which is the target of the current tooltip.</dd> +</dl> + +<p>Mozilla also define some non-standard methods:</p> + +<dl> + <dt>{{domxref("Document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> + <dt>{{domxref("Document.getBoxObjectFor")}} {{obsolete_inline}}</dt> + <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd> + <dt>{{domxref("Document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt> + <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd> + <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> +</dl> + +<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3> + +<p>Microsoft defines some non-standard properties:</p> + +<dl> + <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> + <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt> +</dl> + +<dl> + <dt>{{domxref("document.contains")}}</dt> + <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd> +</dl> + +<p> </p> diff --git a/files/es/web/api/document/keydown_event/index.html b/files/es/web/api/document/keydown_event/index.html new file mode 100644 index 0000000000..57dc4336a5 --- /dev/null +++ b/files/es/web/api/document/keydown_event/index.html @@ -0,0 +1,178 @@ +--- +title: keydown +slug: Web/API/Document/keydown_event +tags: + - Evento + - keydown +translation_of: Web/API/Document/keydown_event +--- +<p>El evento <code>keydown</code> se produce cuando se presiona una tecla.</p> + +<p>A diferencia del evento <code><a href="/en-US/docs/Web/Events/keypress">keypress</a></code>, el evento <code>keydown</code> es producido por todas las teclas, independientemente de si estas son caracteres o no.</p> + +<h2 id="Información_general">Información general</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Especificación</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt> + <dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/DOM/KeyboardEvent" title="/en-US/docs/DOM/KeyboardEvent">KeyboardEvent</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Burbuja</dt> + <dd style="margin: 0 0 0 120px;">Si</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">Si</dd> + <dt style="float: left; text-align: right; width: 120px;">Objetivo</dt> + <dd style="margin: 0 0 0 120px;">Document, Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Acción</dt> + <dd style="margin: 0 0 0 120px;">Varía: evento <code>keypress</code>; lanza el sistema de composición de texto; eventos <code>blur</code> y <code>focus</code>; <code>DOMActivate</code> evento; otro evento</dd> +</dl> + +<h2 id="Propiedades">Propiedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>DOMString</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>WindowProxy</td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>EventTarget (DOM element)</td> + <td>Focused element processing the key event, root element if no suitable input element focused.</td> + </tr> + <tr> + <td><code>char</code> {{readonlyInline}}</td> + <td>DOMString (string)</td> + <td>The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. + <div class="note"><strong>Note:</strong> If the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character.</div> + </td> + </tr> + <tr> + <td><code>key</code> {{readonlyInline}}</td> + <td>DOMString (string)</td> + <td>The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the <code>char</code> attribute. Otherwise, it's one of the key value strings specified in {{ anch("Key values") }}. If the key can't be identified, this is the string "Unidentified". See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. Read Only.</td> + </tr> + <tr> + <td><code>charCode</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>The Unicode reference number of the key; this attribute is used only by the <a href="/en-US/docs/Mozilla_event_reference/keypress"><code>keypress</code></a> event. For keys whose <code>char</code> attribute contains multiple characters, this is the Unicode value of the first character in that attribute. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>char</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>keyCode</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>which</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as <code>keyCode</code>. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>location</code> {{readonlyInline}}</td> + <td>long (float)</td> + <td>The location of the key on the device.</td> + </tr> + <tr> + <td><code>repeat</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if a key has been depressed long enough to trigger key repetition, otherwise <code>false</code>.</td> + </tr> + <tr> + <td><code>locale</code> {{readonlyInline}}</td> + <td>string</td> + <td>The language code for the key event, if available; otherwise, the empty string.</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="preventDefault_del_evento_keydown"><code>preventDefault()</code> del evento <code>keydown</code></h2> + +<p>Empezando desde Gecko 25, una llamada a <code>preventDefault()</code> del evento <code>keydown</code> impide la emisión del consiguiente evento <code>keypress</code>. Este es un comportamiento válido para la especificación D3E y otros navegadores importantes que se comportan de esta misma forma. Por otro lado, Gecko 24 y anteriores emiten el evento <code>keypress</code> aunque se haya llamado a <code>preventDefault()</code> del evento <code>keydown</code> predecesor. Aunque el atributo <code>defaultPrevented</code> del evento <code>keypress</code> sea <code>true</code> en este caso.</p> + +<h2 id="Eventos_relacionados">Eventos relacionados</h2> + +<ul> + <li>{{event("keydown")}}</li> + <li>{{event("keyup")}}</li> + <li>{{event("keypress")}}</li> + <li>{{event("input")}}</li> +</ul> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre><!DOCTYPE html> +<html> +<head> +<script> + +'use strict'; + +document.addEventListener('keydown', (event) => { + const keyName = event.key; + alert('keydown event\n\n' + 'key: ' + keyName); +}); + +</script> +</head> +<body> +</body> +</html></pre> diff --git a/files/es/web/api/document/keyup_event/index.html b/files/es/web/api/document/keyup_event/index.html new file mode 100644 index 0000000000..350629e9ab --- /dev/null +++ b/files/es/web/api/document/keyup_event/index.html @@ -0,0 +1,149 @@ +--- +title: Tecla Arriba +slug: Web/API/Document/keyup_event +translation_of: Web/API/Document/keyup_event +--- +<p>El evento es iniciado cuando la tecla es soltada.</p> + +<h2 id="Información_General">Información General</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;"><a href="http://developer.mozilla.org/en-US/docs/DOM/KeyboardEvent" title="http://en-US/docs/DOM/KeyboardEvent">KeyboardEvent</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Si</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">Si</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Document, Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">Ninguna</dd> +</dl> + +<h2 id="Propiedades">Propiedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>DOMString</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>WindowProxy</td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>EventTarget (DOM element)</td> + <td>Focused element processing the key event, root element if no suitable input element focused.</td> + </tr> + <tr> + <td><code>char</code> {{readonlyInline}}</td> + <td>DOMString (string)</td> + <td>The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. + <div class="note"><strong>Note:</strong> If the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character.</div> + </td> + </tr> + <tr> + <td><code>key</code> {{readonlyInline}}</td> + <td>DOMString (string)</td> + <td>The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the <code>char</code> attribute. Otherwise, it's one of the key value strings specified in {{ anch("Key values") }}. If the key can't be identified, this is the string "Unidentified". See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. Read Only.</td> + </tr> + <tr> + <td><code>charCode</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>The Unicode reference number of the key; this attribute is used only by the <a href="/en-US/docs/Mozilla_event_reference/keypress"><code>keypress</code></a> event. For keys whose <code>char</code> attribute contains multiple characters, this is the Unicode value of the first character in that attribute. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>char</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>keyCode</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>which</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as <code>keyCode</code>. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>location</code> {{readonlyInline}}</td> + <td>long (float)</td> + <td>The location of the key on the device.</td> + </tr> + <tr> + <td><code>repeat</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if a key has been depressed long enough to trigger key repetition, otherwise <code>false</code>.</td> + </tr> + <tr> + <td><code>locale</code> {{readonlyInline}}</td> + <td>string</td> + <td>The language code for the key event, if available; otherwise, the empty string.</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Eventos_Relacionados">Eventos Relacionados</h2> + +<ul> + <li>{{event("keydown")}}</li> + <li>{{event("keyup")}}</li> + <li>{{event("keypress")}}</li> + <li>{{event("input")}}</li> +</ul> diff --git a/files/es/web/api/document/pointerlockelement/index.html b/files/es/web/api/document/pointerlockelement/index.html new file mode 100644 index 0000000000..cc5d490e5c --- /dev/null +++ b/files/es/web/api/document/pointerlockelement/index.html @@ -0,0 +1,105 @@ +--- +title: Document.pointerLockElement +slug: Web/API/Document/pointerLockElement +translation_of: Web/API/DocumentOrShadowRoot/pointerLockElement +--- +<div>{{APIRef("DOM")}}</div> + +<p>La propiedad <code>pointerLockElement</code> conserva el elemento adquirido, para el evento del mouse, mientras el bloqueo se encuentre activo . Es <code>null</code> si el bloqueo se encuentra en estado pendiente para bloqueo, o si el bloqueo se ha liberado, es decir ya no se encuentra en estado bloqueado, o si el elemento bloqueado se encuentra en otro documento.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var elemento = document.pointerLockElement; +</pre> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<p>Un {{domxref("Element")}} o <code>null</code>.</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('Bloquear puntero','l#extension-to-the-document-interface','Document')}}</td> + <td>{{Spec2('Pointer lock')}}</td> + <td>Extiende de la interfaz <code>Document</code></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad del Navegador</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{ CompatVersionUnknown() }} {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown() }} {{property_prefix("moz")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Soporte sin prefijar</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(50)}}</td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también:</h2> + +<ul> + <li>{{ domxref("Document.exitPointerLock()") }}</li> + <li>{{ domxref("Element.requestPointerLock()") }}</li> + <li><a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock</a></li> +</ul> diff --git a/files/es/web/api/document/queryselector/index.html b/files/es/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..b442ba5bbb --- /dev/null +++ b/files/es/web/api/document/queryselector/index.html @@ -0,0 +1,136 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - Consulta + - DOM + - Referencias(2) + - Referências + - Selectores + - metodo +translation_of: Web/API/Document/querySelector +--- +<div>{{ ApiRef("DOM") }}</div> + +<div>Devuelve el primer elemento del documento (utilizando un <a href="http://en.wikipedia.org/wiki/Tree_traversal#Pre-order_2">recorrido primero en profundidad pre ordenado</a> de los nodos del documento) que coincida con el grupo especificado de selectores.</div> + +<div> </div> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="brush: js">element = document.querySelector(selectores); +</pre> + +<p>Donde:</p> + +<ul> + <li><code>element</code> es un objeto de tipo <a href="/en-US/docs/DOM/element" title="en-US/docs/DOM/element">element</a>.</li> + <li><code>selectores</code> es una cadena de caracteres que contiene uno o más <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectores CSS</a> separados por coma.</li> +</ul> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<p>En este ejemplo, obtendremos el primer elemento del documento con la clase "miClase":</p> + +<pre class="brush: js">var el = document.querySelector(".miClase"); +</pre> + +<h2 id="Notes" name="Notes">Ejemplo más útil</h2> + +<p>Los <em>Selectores</em> pueden ser muy útiles como se demostrará en el siguiente ejemplo. Aquí, será retornado el primer elemento <code><input name="login" /></code> dentro de <code><div class="user-panel main"></code>.</p> + +<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name='login']");</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<ul> + <li>Devuelve <code>null</code> si no se encuentran coincidencias, de lo contrario, retorna el primer elemento encontrado.</li> + <li>Si el selector coincide con un ID y este ID es usado erróneamente varias veces en el documento, devuelve el primer elemento encontrado.</li> + <li>Lanza una excepción de tipo SYNTAX_ERR si el grupo de selectores especificado es no es válido.</li> + <li><span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">querySelector() se introdujo en la <a href="http://www.w3.org/TR/selectors-api/">API Selectors</a>.</span></li> + <li>La cadena de caracteres que se pasa como argumento a <code><span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">querySelector debe seguir la sintaxis CSS.</span></code></li> + <li>Las Pseudo-clases CSS nunca devolverán elementos, tal y como está especificado en la <code><a href="http://www.w3.org/TR/selectors-api/#grammar">API Selectors</a></code>.</li> + <li>Para que coincidan ID's o selectores que no siguen la sintáxis CSS (usando inapropiadamente dos puntos o un espacio por ejemplo), se debe 'escapar' el carácter con una barra invertida (\). Como la barra invertida es un carácter de 'escape' en JavaScript, si estás indicando una cadena de caracteres literal, debes 'escaparla' dos veces (una para la cadena de caracteres JavaScript y otra para el querySelector): </li> +</ul> + +<pre class="brush: html"><div id="foo\bar"></div> +<div id="foo:bar"></div> + +<script> + console.log('#foo\bar'); // "#fooar" + document.querySelector('#foo\bar'); // No coincide con nada + + console.log('#foo\\bar'); // "#foo\bar" + console.log('#foo\\\\bar'); // "#foo\\bar" + document.querySelector('#foo\\\\bar'); // Coincide con el primer div + + document.querySelector('#foo:bar'); // No coincide con nada + document.querySelector('#foo\\:bar'); // Coincide con el segundo div +</script> +</pre> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad en los navegadores</h2> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Plataforma</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte Basico</td> + <td>1</td> + <td>3.5 (1.9.1)<br> + {{bug(416317)}}</td> + <td>8</td> + <td>10</td> + <td>3.2 (525.3)<br> + {{Webkitbug("16587")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Plataforma</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 Basico</td> + <td>2.1</td> + <td>Si</td> + <td>9</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">Especificaciones</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li> +</ul> + +<h2 id="See_also" name="See_also">Vea también</h2> + +<ul> + <li>{{domxref("document.querySelectorAll()")}}</li> + <li>{{domxref("element.querySelector()")}}</li> + <li>{{domxref("element.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Snippets para querySelector</a></li> +</ul> diff --git a/files/es/web/api/document/queryselectorall/index.html b/files/es/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..7f041b6e84 --- /dev/null +++ b/files/es/web/api/document/queryselectorall/index.html @@ -0,0 +1,179 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - Buscando Elementos + - DOM + - Document + - Encontrando Elementos + - Localizando Elementos + - Métodos + - Referencia + - Seleccionando Elementos + - Selectores + - Selectores CSS + - querySelectorAll +translation_of: Web/API/Document/querySelectorAll +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>El método <strong><code>querySelectorAll()</code></strong> de un {{domxref("Element")}} devuelve una {{domxref("NodeList")}} estática (no viva) que representa una lista de elementos del documento que coinciden con el grupo de selectores indicados.</p> + +<div class="note"> +<p><strong>Nota:</strong> Esto método se implementa en base al método {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} del mixin {{domxref("ParentNode")}}.</p> +</div> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); +</pre> + +<h3 id="Parámetros" name="Parámetros">Parámetros</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>Un {{domxref("DOMString")}} que contiene uno o más selectores para buscar coincidencias. Esta cadena de texto debe ser una cadena <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> válida; si no lo es, se lanzará una excepción <code>SyntaxError</code>. Vea <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> para más información acerca de utilizar selectores para identificar elementos. Se pueden especificar varios selectores separándolos utilizando comas.</dd> +</dl> + +<div class="note"> +<p><strong>Nota:</strong> Los caracteres que no son parte de la sintaxis estándar de CSS deben ser escapados utilizando el caracter de barra invertida. Dado que JavaScript también utiliza el escapado por retroceso, se debe tener especial cuidado al escribir cadenas de texto literales utilizando estos caracteres. Vea {{anch("Escapando caracteres especiales")}} para más información.</p> +</div> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Una {{domxref("NodeList")}} <em>no viva</em> que contenga un objeto {{domxref("Element")}} para cada elemento que coincida con al menos uno de los selectores especificados o una {{domxref("NodeList")}} vacía en caso de que no haya coincidencias.</p> + +<div class="note"> +<p><strong>Nota:</strong> Si los selectores indicados incluyen un <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento CSS</a>, la lista devuelta siempre estará vacía.</p> +</div> + +<h3 id="Excepciones">Excepciones</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>La sintaxis de la cadena de texto <code>selectors</code> no es válida.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Obteniendo_una_lista_de_coincidencias">Obteniendo una lista de coincidencias</h3> + +<p>Para obtener una {{domxref("NodeList")}} de todos los elementos {{HTMLElement("p")}} en el documento:</p> + +<pre class="brush: js">var matches = document.querySelectorAll('p');</pre> + +<p>Este ejemplo devuelve una lista de todos los elementos {{HTMLElement("div")}} del documento con una clase "<code>nota</code>" o "<code>alerta</code>":</p> + +<pre class="brush: js">var matches = document.querySelectorAll('div.nota, div.alerta'); +</pre> + +<p>Aquí, se obtiene una lista de elementos <code><p></code> cuyo elemento padre inmediato es un {{domxref("div")}} con la clase <code>"highlighted"</code> y que está ubicado dentro de un contenedor cuyo ID es <code>"test"</code>.</p> + +<pre class="brush: js">var container = document.querySelector('#test'); +var matches = container.querySelectorAll('div.highlighted > p');</pre> + +<p>Este ejemplo usa un <a href="es/docs/Web/CSS/Selectores_atributo">selector de atributos</a> para devolver una lista de elementos {{domxref("iframe")}} en el documento que contienen un atributo llamado <code>"data-src"</code>:</p> + +<pre class="brush: js">var matches = document.querySelectorAll('iframe[data-src]');</pre> + +<p>Aquí, un selector de atributo se utiliza para devolver una lista de los elementos de una lista cuyo ID es <code>"userlist"</code> que tiene un atributo <code>"data-active"</code> cuyo valor es <code>"1"</code>:</p> + +<pre class="brush: js">var container = document.querySelector('#userlist'); +var matches = container.querySelectorAll('li[data-active="1"]');</pre> + +<h3 id="Accediendo_a_las_coincidencias">Accediendo a las coincidencias</h3> + +<p>Una vez que se devuelve la {{domxref("NodeList")}} de los elementos que coinciden, se puede examinar como cualquier <code>array</code>. Si el array está vacío (lo que significa que su propiedad <code>length</code> es 0), entonces es que no se encontraron coincidencias.</p> + +<p>En cualquier caso, se puede simplemente utilizar la notación estándar de los arrays para acceder al contenido de la lista. Se puede usar cualquier sentencia de iteración, como por ejemplo:</p> + +<pre class="brush: js">var highlightedItems = userList.querySelectorAll('.highlighted'); + +highlightedItems.forEach(function(userItem) { + deleteUser(userItem); +});</pre> + +<h2 id="Notas_de_usuario">Notas de usuario</h2> + +<p><code>querySelectorAll()</code> se comporta de forma diferente que la mayoría de librerías DOM de JavaScript, que pueden llevar a resultados inesperados.</p> + +<h3 id="HTML">HTML</h3> + +<p>Considere este HTML, con sus tres bloques anidados {{HTMLElement("div")}}.</p> + +<pre class="brush: html"><div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll('.outer .inner'); +inner.length; // 1, not 0! +</pre> + +<p>En este ejemplo, cuando se selecciona <code>".outer .inner"</code> en el contexto el <code><div></code> con la clase <code>"select"</code>, el elemento con la clase <code>".inner"</code> todavía es encontrado, aun sabiendo que <code>.outer</code> no es descendiente del elemento base sobre el que se realiza la búsqueda (<code>".select"</code>). Por defecto, <code>querySelectorAll()</code> sólo verifica que el último elemento en el selector se encuentra dentro del rango de búsqueda.</p> + +<p>La pseudo-clase {{cssxref(":scope")}} recupera el comportamiento esperado, encontrando coincidencias sólo en selectores descendientes del elemento base:</p> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll(':scope .outer .inner'); +inner.length; // 0 +</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-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Estándar vivo</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td>Sin cambios</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Definición original</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div> + + +<p>{{Compat("api.Document.querySelectorAll")}}</p> +</div> + +<h2 id="Ver_también" name="Ver también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Localizando elementos DOM utilizando selectores</a></li> + <li><a href="/es/docs/Web/CSS/Selectores_atributo">Selectores de atributo</a></li> + <li><a href="/es/docs/Learn/CSS/Introduction_to_CSS/Selectores_de_Atributos">Selectores de atributo</a> en el área de aprendizaje de MDN</li> + <li>{{domxref("Element.querySelector()")}} y {{domxref("Element.querySelectorAll()")}}</li> + <li>{{domxref("Document.querySelector()")}}</li> + <li>{{domxref("DocumentFragment.querySelector()")}} y {{domxref("DocumentFragment.querySelectorAll()")}}</li> + <li>{{domxref("ParentNode.querySelector()")}} y {{domxref("ParentNode.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Snippets de código para <code>querySelector()</code></a></li> +</ul> diff --git a/files/es/web/api/document/readystate/index.html b/files/es/web/api/document/readystate/index.html new file mode 100644 index 0000000000..7e5a24c5d8 --- /dev/null +++ b/files/es/web/api/document/readystate/index.html @@ -0,0 +1,104 @@ +--- +title: Document.readyState +slug: Web/API/Document/readyState +translation_of: Web/API/Document/readyState +--- +<div>{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La propiedad <strong>Document.readyState</strong> de un {{ domxref("document") }} describe el estado de carga del documento.</p> + +<h3 id="Valores">Valores</h3> + +<p>El readyState de un documento puede tener uno de los siguientes valores:</p> + +<dl> + <dt>loading</dt> + <dd>El {{ domxref("document") }} todavía esta cargando.</dd> + <dt>interactive</dt> + <dd>El documento ha terminado de cargar y ha sido analizado pero los sub-recursos como imágenes, estilos y frames aún siguen cargando. El estado indica que el evento {{event("DOMContentLoaded")}} ha sido disparado.</dd> + <dt>complete</dt> + <dd>El documento y todos los sub-recursos han cargado completamente. El estado indica que el evento {{event("load")}} ha sido disparado.</dd> +</dl> + +<p>Cuando el valor de esta propiedad cambia, un evento {{event("readystatechange")}} se dispara en el objecto {{ domxref("document") }}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: js"><em>var string</em> = document.readyState; +</pre> + +<h2 id="Ejemplos"><span>Ejemplos</span></h2> + +<h3 id="Diferentes_estados_del_readyState">Diferentes estados del readyState</h3> + +<pre class="brush: js"><span>switch (document.readyState) { + case "loading": + // The document is still loading. + break; + case "interactive": + // The document has finished loading. We can now access the DOM elements. + var span = document.createElement("span"); + span.textContent = "A <span> element."; + document.body.appendChild(span); + break; + case "complete": + // The page is fully loaded. + console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText); + break; +}</span> +</pre> + +<h3 id="readystatechange_como_alternativa_al_evento_DOMContentLoaded">readystatechange como alternativa al evento DOMContentLoaded</h3> + +<pre class="brush:js">// alternative to DOMContentLoaded event +document.onreadystatechange = function () { + if (document.readyState == "interactive") { + initApplication(); + } +}</pre> + +<h3 id="readystatechange_como_alternativa_al_evento_load">readystatechange como alternativa al evento load</h3> + +<pre class="brush: js">// alternative to load event +document.onreadystatechange = function () { + if (document.readyState == "complete") { + initApplication(); + } +}</pre> + +<h2 id="Especificación">Especificación</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Especificación inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Evento {{event("readystatechange")}}</li> + <li>Evento {{event("DOMContentLoaded")}}</li> + <li>Evento {{event("load")}}</li> +</ul> diff --git a/files/es/web/api/document/registerelement/index.html b/files/es/web/api/document/registerelement/index.html new file mode 100644 index 0000000000..504cf8314b --- /dev/null +++ b/files/es/web/api/document/registerelement/index.html @@ -0,0 +1,115 @@ +--- +title: Document.registerElement() +slug: Web/API/Document/registerElement +translation_of: Web/API/Document/registerElement +--- +<p>{{APIRef("DOM")}}{{Deprecated_header}}{{draft()}}</p> + +<p>El <code><strong>Document.registerElement()</strong></code> registra un nuevo <a href="/en-US/docs/Web/Web_Components/Custom_Elements">elemento personalizado</a> en el navegador y devuelve un constructor para el nuevo elemento.</p> + +<div class="note"> +<p><strong>Nota:</strong> Esta es una tecnología experimental. El navegador que utilice debe ser compatible con Web Components. Ver <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Web Components habilitados en Firefox</a>.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var <em>constructor</em> = document.registerElement(<em>tag-name</em>, <em>options</em>);</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><em>tag-name</em></dt> + <dd>El nombre del elemento personalizado. El nombre debe contener un guión (-), por ejemplo <code>my-tag</code>.</dd> + <dt><em>options {{optional_inline}}</em></dt> + <dd>Un objeto que da nombre al prototipo que sirve de base para el elemento personalizado, y una etiqueta existente para extender. Ambos son opcionales.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Aquí hay un ejemplo muy simple:</p> + +<pre class="brush: js">var Mytag = document.registerElement('my-tag'); +</pre> + +<p>Ahora el nuevo tag se ha registrado en el navegador. La variable MyTag contiene un constructor que lo puedes usar para crear un elemento my-tag en el documento de la siguiente manera:</p> + +<pre class="brush: js">document.body.appendChild(new Mytag());</pre> + +<p>Esto inserta un elemento my-tag vacío que será visible si utiliza las herramientas de desarrollo del navegador. No será visible si usa la capacidad de ver el código fuente del navegador. Y no será visible en el navegador a menos que agregue algún contenido para la etiqueta. Esta es la manera de agregar contenido a la nueva etiqueta:</p> + +<pre class="brush: js">var mytag = document.getElementsByTagName("my-tag")[0]; +mytag.textContent = "I am a my-tag element."; +</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('Custom Elements')}}</td> + <td>{{Spec2('Custom Elements')}}</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>Basic support</td> + <td>35</td> + <td>31 (behind a flag)</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4.4</td> + <td>31 (behind a flag)</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a dir="ltr" href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements">Custom Elements</a></li> +</ul> diff --git a/files/es/web/api/document/scripts/index.html b/files/es/web/api/document/scripts/index.html new file mode 100644 index 0000000000..254df25276 --- /dev/null +++ b/files/es/web/api/document/scripts/index.html @@ -0,0 +1,84 @@ +--- +title: Document.scripts +slug: Web/API/Document/scripts +translation_of: Web/API/Document/scripts +--- +<div>{{APIRef("DOM")}}</div> + +<p>Devuelve una lista de elementos {{HTMLElement("script")}} ubicados en el documento. El objeto devuelto es una colección {{domxref("HTMLCollection")}}.</p> + +<h2 id="Syntax" name="Syntax">Sintáxis</h2> + +<pre class="syntaxbox"><code>var <em>scriptList</em></code> = document.scripts; +</pre> + +<p>El objeto <code>scriptList</code> devuelto es una {{domxref("HTMLCollection")}}. Se puede utilizar como un array corriente para acceder a sus elementos.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Este ejemplo busca demostrar la existencia de objetos {{HTMLElement("script")}} en el documento.</p> + +<pre class="brush:js">var scripts = document.scripts; + +if (scripts.length) { + alert("This page has scripts!"); +} +</pre> + +<h2 id="Specification" name="Specification">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification"> </h2> + +<h2 id="Specification" name="Specification">Especificaciones</h2> + +<ul> + <li>{{spec("http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-scripts", "DOM: document scripts")}}</li> +</ul> diff --git a/files/es/web/api/document/scroll_event/index.html b/files/es/web/api/document/scroll_event/index.html new file mode 100644 index 0000000000..944d539834 --- /dev/null +++ b/files/es/web/api/document/scroll_event/index.html @@ -0,0 +1,104 @@ +--- +title: scroll +slug: Web/API/Document/scroll_event +translation_of: Web/API/Document/scroll_event +--- +<p>El evento <strong><code>scroll</code></strong> se produce cuando la vista del documento o un elemento es deslizado.</p> + +<h2 id="Información_General">Información General</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Especificación</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a>, <a href="http://www.w3.org/TR/cssom-view/#scrolling-0">CSSOM View</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt> + <dd style="margin: 0 0 0 120px;">UIEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">No en elementos, pero burbujea a la vista default cuando se ejecuta en el documento</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Objetivo</dt> + <dd style="margin: 0 0 0 120px;">defaultView, Document, Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Acción por defecto</dt> + <dd style="margin: 0 0 0 120px;">Ninguna</dd> + <dt style="margin: 0px 0px 0px 120px;"></dt> +</dl> + +<h2 id="Propiedades">Propiedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>El objetivo de evento (el objetivo superior en el árbol DOM).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>El tipo de evento.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Si el evento burbujea o no.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Si el evento puede ser cancelado o no.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> de el documento)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Dado que los eventos <code>scroll</code> pueden ejecutarse a un ritmo elevado, el <em>event handler</em> no debería ejecutar operaciones computacionalmente costosas como modificaciones en el DOM. En cambio, se recomienda acelerar el evento utilizando <a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame">requestAnimationFrame</a>, <a href="/en-US/docs/Web/API/WindowTimers/setTimeout">setTimeout</a> or <a href="/en-US/docs/Web/API/CustomEvent">customEvent</a>, de este modo:</p> + +<h4 id="Optimización_de_Scroll_con_window.requestAnimationFrame">Optimización de Scroll con window.requestAnimationFrame</h4> + +<pre class="brush: js">// Referencia: http://www.html5rocks.com/en/tutorials/speed/animations/ + +var last_known_scroll_position = 0; +var ticking = false; + +function doSomething(scroll_pos) { + // Hacer algo con la posición del scroll +} + +window.addEventListener('scroll', function(e) { + last_known_scroll_position = window.scrollY; + if (!ticking) { + window.requestAnimationFrame(function() { + doSomething(last_known_scroll_position); + ticking = false; + }); + } + ticking = true; +});</pre> + + + +<p>Más ejemplos se pueden ver en el evento <a href="/en-US/docs/Web/Events/resize#Example">resize</a>.</p> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<h3 id="iOS_UIWebView">iOS UIWebView</h3> + +<p>En iOS UIWebViews, los eventos <code>scroll</code> no se ejecutan mientras el <em>escroleo/deslizamiento</em> se lleva a cabo; solo son ejecutados cuando el deslizamiento terminó. Ver <a href="https://github.com/twbs/bootstrap/issues/16202">Bootstrap issue #16202</a>. Safari y WKWebViews no se ven afectados por este bug.</p> diff --git a/files/es/web/api/document/stylesheets/index.html b/files/es/web/api/document/stylesheets/index.html new file mode 100644 index 0000000000..0cc8e47181 --- /dev/null +++ b/files/es/web/api/document/stylesheets/index.html @@ -0,0 +1,21 @@ +--- +title: Document.styleSheets +slug: Web/API/Document/styleSheets +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Resumen</h3> +<p>Devuelve una lista de objetos de tipo <a href="/es/DOM/stylesheet" title="es/DOM/stylesheet">stylesheet</a> para las hojas de estilo que están específicamente enlazadas o contenidas en el documento.</p> +<h3 id="Properties" name="Properties">Propiedades</h3> +<p><code>styleSheetList.length</code> - devuelve el número de objetos de tipo stylesheet contenidos en el objeto.</p> +<h3 id="Syntax" name="Syntax">Sintaxis</h3> +<pre class="eval"><em>styleSheetList</em> = <em>document</em>.styleSheets +</pre> +<p>El objeto devuelto es del tipo <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">StyleSheetList</a>.</p> +<p>Es una colección ordenada de objetos de tipo <a href="/es/DOM/stylesheet" title="es/DOM/stylesheet">stylesheet</a>. <code><em>styleSheetList</em>.item(<em>index</em>)</code> o simplemente <code><em>styleSheetList</em>{{ mediawiki.external(' + <i> + index</i> + ') }}</code> devuelve un único objeto de tipo stylesheet con el índice especificado (el índice es de origen 0).</p> +<h3 id="Specification" name="Specification">Especificación</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">DOM Level 2 Style: styleSheets</a></p> +<p>{{ languages( { "ja": "ja/DOM/document.styleSheets", "pl": "pl/DOM/document.styleSheets" } ) }}</p> diff --git a/files/es/web/api/document/url/index.html b/files/es/web/api/document/url/index.html new file mode 100644 index 0000000000..eec4361827 --- /dev/null +++ b/files/es/web/api/document/url/index.html @@ -0,0 +1,71 @@ +--- +title: document.URL +slug: Web/API/Document/URL +tags: + - API + - Documento + - HTML DOM + - Propiedad + - Referencia +translation_of: Web/API/Document/URL +--- +<div>{{APIRef("DOM")}}</div> + +<p>La propiedad de sólo lectura <strong><code>URL</code></strong> de la interfaz {{domxref("Document")}} devuelve la ubicación del documento como una cadena de texto.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var <var>string</var> = document.URL</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">document.getElementById("url").textContent = document.URL;</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p id="urlText"> + URL:<br/> + <span id="url">La URL va aquí</span> +</p></pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Example", "100%", 100)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-document-url", "Document.URL")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Define que la propiedad es una {{domxref("USVString")}} en lugar de un {{domxref("DOMString")}}.</td> + </tr> + <tr> + <td>{{SpecName("DOM1", "level-one-html.html#attribute-URL", "Document.URL")}}</td> + <td>{{Spec2("DOM1")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<p>{{Compat("api.Document.URL")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("HTMLDocument")}}</li> +</ul> diff --git a/files/es/web/api/document/write/index.html b/files/es/web/api/document/write/index.html new file mode 100644 index 0000000000..f07bd5c9a9 --- /dev/null +++ b/files/es/web/api/document/write/index.html @@ -0,0 +1,76 @@ +--- +title: Document.write() +slug: Web/API/Document/write +tags: + - API + - DOM + - Documentación + - Referencia + - metodo +translation_of: Web/API/Document/write +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><br> + Escribe una cadena de texto dentro del hilo de un <code>document </code>abierto por <a href="/en-US/docs/Web/API/document.open">document.open()</a>.</p> + +<div class="note">Nota: dado que <code>document.write</code> escribe directo al hilo<strong> (stream</strong>) de un documento, la llamada a <code>document.write</code> en un documento ya cargado automáticamente ejecuta <code>document.open</code>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.open#Notes">lo cual limpiará todo el contenido del documento en cuestión</a>.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: js">document.write(texto); +</pre> + +<p><code>texto </code>es una cadena de texto que contiene el texto a ser impreso en el documento.</p> + +<h3 id="Example">Example</h3> + +<pre class="brush: html"><html> + +<head> + <title>Ejemplo de write</title> + + <script> + function nuevoContenido() { + alert("carga el contenido nuevo"); + document.open(); + document.write("<h1>Quita el contenido viejo - Agrega el contenido nuevo!</h1>"); + document.close(); + } + </script> +</head> + +<body onload="nuevoContenido();"> + <p>Algo de contenido original del documento</p> +</body> + +</html></pre> + +<h2 id="Notas">Notas</h2> + +<p>Escribir a un documento que ya tiene contenido cargado previamente sin llamar a <a href="/en-US/docs/Web/API/document.open"><code>document.open()</code></a>, automáticamente hará una llamada a document.open(). Después de haber finalizado la escritura del documento, es recomendable llamar a <a href="/en-US/docs/Web/API/document.close"><code>document.close()</code></a>, para informar al navegador que la carga de la página ya ha terminado. El texto que escribas allí es convertido a la estructura tipificada de HTML dentro del modelo estructural del documento. En el ejemplo de más arriba, el elemento h1 se convierte en un nodo dentro del documento.</p> + +<p>Si la llamada a document.write() se ejecuta dentro de una etiqueta <code><script></code> incluído en el HTML, entonces la llamada a document.open() nunca ocurrirá. Por ejemplo:</p> + +<pre class="brush: html"><script> + document.write("<h1>Título Principal</h1>") +</script> +</pre> + +<div class="note"><strong>Nota:</strong> <code>document.write</code> y <code>document.writeln</code> <a href="/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML">no funcionan dentro de un documento XHTML</a> (obtendrás un mensaje de error que dice "Operación no soportada" ("Operation is not supported") [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] en la consola). Esto sucede cuando abrimos un archivo local de extensión .xhtml o para cualquier document servido con un <a href="/en-US/docs/Glossary/MIME_type">MIME del tipo </a><code>application/xhtml+xml</code>. Hay más información disponible en <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div> + +<div class="note"><strong>Nota:</strong> <code>document.write</code> en scripts de modo <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer">diferido</a> o <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async">asyncrónico</a> serán ignorados, y recibirás un mensaje de error en la consola del tipo "Una llamada a document.write() desde un script cargado asincrónicamente fue ignorado" ("A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored").</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634">DOM Level 2 HTML: <code>write()</code> Method</a></li> + <li><a class="external" href="http://www.w3.org/TR/2011/WD-html5-author-20110705/apis-in-html-documents.html#dynamic-markup-insertion">Dynamic markup insertion in HTML</a></li> +</ul> + +<h2 id="También_puedes_ver">También puedes ver</h2> + +<ul> + <li>{{ domxref("element.innerHTML") }}</li> + <li>{{ domxref("document.createElement()") }}</li> +</ul> diff --git a/files/es/web/api/document/writeln/index.html b/files/es/web/api/document/writeln/index.html new file mode 100644 index 0000000000..d9e0b72019 --- /dev/null +++ b/files/es/web/api/document/writeln/index.html @@ -0,0 +1,40 @@ +--- +title: Document.writeln() +slug: Web/API/Document/writeln +translation_of: Web/API/Document/writeln +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>Escribe una cadena de texto en el documento, seguida de una nueva línea.</p> + +<div class="note"> +<p>Nota: dado que <code>document.writeln</code> (al igual que <code>document.write)</code> escribe directo al hilo<strong> </strong>(<code>stream</code>) de un documento, la llamada a <code>document.write</code> en un documento ya cargado automáticamente ejecuta <code>document.open</code>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.open#Notes">lo cual limpiará todo el contenido del documento en cuestión</a>.</p> +</div> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="eval">document.writeln(<em>línea</em>); +</pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<ul> + <li><code>línea</code> es la cadena conteniendo una línea de texto.</li> +</ul> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre>document.writeln("<p>¡Hola mundo!</p>"); +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p><strong>document.writeln</strong> actúa igual que <a href="/es/DOM/document.write" title="en/DOM/document.write">document.write</a> exepto que agrega un carácter de nueva línea (<code>\n</code>) al final del texto a escribir.</p> + +<div class="note"><strong>Nota:</strong> <code>document.write</code> y <code>document.writeln</code> <a href="https://developer.mozilla.org/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML">no funcionan dentro de un documento XHTML</a> (obtendrás un mensaje de error que dice "Operación no soportada" ("Operation is not supported") [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] en la consola). Esto sucede cuando abrimos un archivo local de extensión .xhtml o para cualquier document servido con un <a href="https://developer.mozilla.org/es/docs/Glossary/MIME_type">MIME del tipo </a><code>application/xhtml+xml</code>. Hay más información disponible en <a class="external external-icon" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div> + +<div class="note"><strong>Nota:</strong> <code>document.writeln</code> y <code>document.write</code> en scripts de modo <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer">diferido</a> o <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async">asyncrónico</a> serán ignorados, y recibirás un mensaje de error en la consola del tipo "Una llamada a document.write() desde un script cargado asincrónicamente fue ignorado" ("A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored").</div> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-35318390">writeln </a></p> |