diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
| commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
| tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/api/element | |
| parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
| download | translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2 translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip | |
initial commit
Diffstat (limited to 'files/es/web/api/element')
53 files changed, 6506 insertions, 0 deletions
diff --git a/files/es/web/api/element/accesskey/index.html b/files/es/web/api/element/accesskey/index.html new file mode 100644 index 0000000000..a21970faa6 --- /dev/null +++ b/files/es/web/api/element/accesskey/index.html @@ -0,0 +1,22 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +tags: + - API + - Propiedad + - necesidades de contenido +translation_of: Web/API/HTMLElement/accessKey +--- +<div>{{APIRef("DOM")}}</div> + +<div> </div> + +<p><span id="result_box" lang="es"><span>La propiedad</span> <strong><span>Element.accessKey</span></strong> <span>establece la pulsación</span><span> de teclado</span> <span>mediante el cual un</span> <span>usuario puede presionar</span> <span>para saltar a</span> <span>este elemento</span><span>.</span></span></p> + +<div class="note"> +<p><span id="result_box" lang="es"><span>Nota: la propiedad</span> <strong><span>Element.accessKey</span></strong> <span>se usa raramente</span> <span>debido a sus</span> <span>múltiples</span> <span>conflictos con las asociaciones de teclas</span> <span>que ya están presentes</span> <span>en los navegadores</span><span>.</span> <span>Para evitar</span> <span>esto,</span> <span>los navegadores implementan</span> <span>el comportamiento</span> <span>tecla de acceso</span> <span>si</span> <span>se pulsan las claves</span> <span>con otras teclas</span> <span>"cualificadas</span><span>" (como</span> <span>Alt</span> <span>+</span> <span>tecla de acceso</span><span>)</span><span>.</span></span></p> +</div> + +<p> </p> + +<p> </p> diff --git a/files/es/web/api/element/animate/index.html b/files/es/web/api/element/animate/index.html new file mode 100644 index 0000000000..e491efc0d7 --- /dev/null +++ b/files/es/web/api/element/animate/index.html @@ -0,0 +1,208 @@ +--- +title: Element.animate() +slug: Web/API/Element/animate +tags: + - API + - Animacion + - Elemento + - Experimental + - metodo + - waapi + - web animations api +translation_of: Web/API/Element/animate +--- +<div> +<p>{{APIRef('Web Animations')}} {{SeeCompatTable}}</p> + +<p>El método <strong><code>Element.animate()</code></strong> es un método abreviado para crear y reproducir una animación en un elemento. Devuelve la instancia creada de un objeto {{domxref("Animation")}} .</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<div class="syntaxbox"> +<pre class="brush: js"><var>element</var>.animate(<var>keyframes</var>, <var>options</var>); </pre> +</div> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>keyframes</code></dt> + <dd> + <p>Un <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Objeto formateado para representar un conjunto de fotogramas clave</a>.</p> + </dd> + <dt><code>opciones</code></dt> + <dd>Puede ser un<strong> entero</strong> <strong>representando la duración de la animación</strong> (en milisegundos), <strong>o</strong> un Objeto conteniendo una o más propiedades de sincronización: </dd> + <dd> + <dl> + <dt><code>id {{optional_inline}}</code></dt> + <dd><code>Una propiedad única para animar()</code>: a <a href="https://developer.mozilla.org/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> con la cual se hace referencia a la animación.</dd> + </dl> + {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}</dd> +</dl> + +<h4 id="Opciones_Futuras">Opciones Futuras</h4> + +<p><span id="result_box" lang="es"><span>Las</span> <span>siguientes</span> <span>opciones</span> <span>actualmente no</span> <span>se han enviado</span> <span>a todos los sitios</span><span>, pero</span> <span>se añadirán</span> <span>en un futuro próximo</span><span>.</span></span></p> + +<dl> + <dt><code>composite {{optional_inline}}</code></dt> + <dd>Determina como se combinan los valores entre esta animación y otra, animaciones independientes sin especificar la composición de su propia operación. <code>Valores predeterminados a reemplazar</code>. + <ul> + <li><code>añadir dicta un efecto aditivo</code>, donde cada iteración sucesiva se basa en la anterior. Por ejemplo con <code>transform</code>, a <code>translateX(-200px)</code> no anularía un valor anterior <code>rotate(20deg)</code> que resultaría <code>translateX(-200px) rotate(20deg)</code>.</li> + <li><code>acumular es similar pero un poco más inteligente</code>: <code>blur(2)</code> y <code>blur(5)</code> resultaría <code>blur(7)</code>, no <code>blur(2) blur(5)</code>.</li> + <li><code>remplazar sobreescribe el valor anterior con el nuevo</code>.</li> + </ul> + </dd> + <dt><code>iterationComposite {{optional_inline}}</code></dt> + <dd>Determina como se construyen los valores de una iteración a otra en esta animación. . <code>Se puede configurar para acumular o reemplazar</code> (ver arriba). <code>Valores predeterminados para reemplazar</code>.</dd> + <dt><code>spacing {{optional_inline}}</code></dt> + <dd>Determina como los keyframes sin compensación temporal deben ser distribuidos durante la duración de la animación. <code>Valores predeterminados para distribuir</code>. + <ul> + <li><code>distribuir las posiciones de los</code> keyframes para que la diferencia entre el anterior y el posterior estén compensadas por igual , lo que es como decir, sin ninguna compensación, esto distribuirá equitativamente los keyframes a traves del tiempo de ejecución.</li> + <li><code>situar las posiciones de los</code> keyframes de manera que igualen la diferencia entre los siguientes valores de una propiedad especifica sincronizada , lo que es como decir, que los keyframes estén más espaciados cuanto mayores sean los valores de sus propiedades.</li> + </ul> + + <p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p> + </dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Returns an {{domxref("Animation")}}.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>En la demostración <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (con la Web Animation API)</a>, utilizamos el método conveniente, <code>animate()</code> para inmediatamente crear y ejecutar una animación en el elemento <code>#tunnel</code> para hacerlo fluir hacia arriba, indefinidamente. Observar el orden de paso de los objetos por los keyframes y también el bloque de opciones de sincronización.</p> + +<pre class="brush: js">document.getElementById("tunnel").animate([ + // keyframes + { transform: 'translateY(0px)' }, + { transform: 'translateY(-300px)' } +], { + // timing options + duration: 1000, + iterations: Infinity +}); +</pre> + +<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('Web Animations', '#the-animatable-interface', 'animate()' )}}</td> + <td>{{Spec2('Web Animations')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>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>{{CompatChrome("36")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("48.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>23</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>id</code> option</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("48.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>37</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</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>{{CompatUnknown}}</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{ CompatGeckoMobile("48.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>id</code> option</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{ CompatGeckoMobile("48.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_También">Ver También</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li> + <li>{{domxref("Animation")}}</li> +</ul> +</div> diff --git a/files/es/web/api/element/attachshadow/index.html b/files/es/web/api/element/attachshadow/index.html new file mode 100644 index 0000000000..33e1d119ae --- /dev/null +++ b/files/es/web/api/element/attachshadow/index.html @@ -0,0 +1,158 @@ +--- +title: Element.attachShadow() +slug: Web/API/Element/attachShadow +translation_of: Web/API/Element/attachShadow +--- +<div>{{APIRef('Shadow DOM')}}</div> + +<p>El método <strong><code>Element.attachShadow()</code></strong> adjunta un árbol DOM "sombra" al elemento especificado y devuelve una referencia a su raíz {{domxref("ShadowRoot")}}.</p> + +<h2 id="Elementos_a_los_que_puedes_adjuntar_un_DOM_sombra">Elementos a los que puedes adjuntar un DOM "sombra"</h2> + +<p>No se puede adjuntar un DOM "sombra" a cualquier tipo de elemento. Hay algunos que no pueden tenerlo por razones de seguridad (por ejemplo {{htmlelement("a")}}), y algunos más. Los siguientes elementos de la lista <strong>pueden</strong> adjuntar un DOM "sombra":</p> + +<ul> + <li>Cualquier elemento autónomo con un <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name" title="nombre válido">nombre válido</a></li> + <li>{{htmlelement("article")}}</li> + <li>{{htmlelement("aside")}}</li> + <li>{{htmlelement("blockquote")}}</li> + <li>{{htmlelement("body")}}</li> + <li>{{htmlelement("div")}}</li> + <li>{{htmlelement("footer")}}</li> + <li>{{htmlelement("h1")}}</li> + <li>{{htmlelement("h2")}}</li> + <li>{{htmlelement("h3")}}</li> + <li>{{htmlelement("h4")}}</li> + <li>{{htmlelement("h5")}}</li> + <li>{{htmlelement("h6")}}</li> + <li>{{htmlelement("header")}}</li> + <li>{{htmlelement("main")}}</li> + <li>{{htmlelement("nav")}}</li> + <li>{{htmlelement("p")}}</li> + <li>{{htmlelement("section")}}</li> + <li>{{htmlelement("span")}}</li> +</ul> + +<h2 id="Syntax" name="Syntax">Syntaxis</h2> + +<pre class="syntaxbox">var <var>shadowroot</var> = <var>element</var>.attachShadow(<var>shadowRootInit</var>); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>shadowRootInit</code></dt> + <dd>Un diccionario <code>ShadowRootInit</code> , que puede contener los siguientes campos: + <dl> + <dt><code>mode</code></dt> + <dd> + <p>Una cadena que especifique el <em>modo de encapsulación</em> para el árbol DOM "sombra". Este puede tener uno de los siguientes valores:</p> + + <ul> + <li><code>open</code>: Los elementos del árbol son accesibles desde fuera del elemento, por ejemplo usando {{domxref("Element.shadowRoot")}}:<br> + + <pre>element.shadowRoot; // Returns a ShadowRoot obj</pre> + </li> + <li><code>closed</code>: Deniega el acceso a lo(s) nodo(s) desde fuera mediante JavaScript:<br> + + <pre>element.shadowRoot; // Returns null +</pre> + </li> + </ul> + </dd> + <dt><code>delegatesFocus</code></dt> + <dd>Un booleano que, si se establece a <code>true</code>, mitiga problemas de comportamiento relativos a la capacidad de tomar el foco. Cuando se hace click en una parte del DOM "sombra" que no puede tomar el foco, la primera parte del árbol que pueda tomar el foco lo hará, y le dará cualquier estilo disponible mediante CSS con <code>:focus</code>.</dd> + </dl> + </dd> +</dl> + +<h3 id="Valor_retorno">Valor retorno</h3> + +<p>Devuelve un objeto {{domxref("ShadowRoot")}}.</p> + +<h3 id="Excepciones">Excepciones</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Excepción</th> + <th scope="col">Explicación</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>InvalidStateError</code></td> + <td>El elemento que estás intentando adjuntar ya tiene una DOM "sombra".</td> + </tr> + <tr> + <td><code>NotSupportedError</code></td> + <td>Estás intentando adjuntar DOM "sombra" a un elemento fuera del espacio de nombres HTML, o el elemento no puede tener una DOM "sombra". adjunta (ver abajo).</td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Los siguientes ejemplos están tomados de la demo <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">verlo también en modo live</a>). Puedes ver que usamos <code>attachShadow()</code> en mitad del código para crear una DOM "sombra", a la que luego adjuntamos el contenido de nuesto elemento personalizado.</p> + +<pre class="brush: js">// Crear una clase para el elemento +class CuentaPalabras extends HTMLParagraphElement { + constructor() { + // Siemmpre llamar a super en el constructor + super(); + + // contar las palabras en el nodo padre + var cpPadre = this.parentNode; + + function cuentaPalabras(nodo){ + var texto = nodo.innerText || nodo.textContent + return texto.trim().split(/\s+/g).length; + } + + var cuenta = 'Palabras: ' + cuentaPalabras(cpPadre); + + // Crear un DOM "sombra" + var sombra = this.attachShadow({mode: 'open'}); + + // Crear el nodo de texto y añadirle el contador de palabras + var texto = document.createElement('span'); + texto.textContent = count; + + // Añadirlo a la sombra + sombra.appendChild(texto); + + // Actualizar el contador cuando el contenido del elemento cambie + setInterval(function() { + var cuenta = 'Palabras: ' + cuentaPalabras(cpPadre); + texto.textContent = cuenta; + }, 200) + } +} + +// Definir el nuevo elemento +customElements.define('cuenta-palabras', CuentaPalabras , { extends: 'p' });</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_navegadores">Compatibilidad navegadores</h2> + + + +<p>{{Compat("api.Element.attachShadow")}}</p> diff --git a/files/es/web/api/element/attributes/index.html b/files/es/web/api/element/attributes/index.html new file mode 100644 index 0000000000..3b0f1da338 --- /dev/null +++ b/files/es/web/api/element/attributes/index.html @@ -0,0 +1,157 @@ +--- +title: Element.attributes +slug: Web/API/Element/attributes +translation_of: Web/API/Element/attributes +--- +<p>{{ APIRef("DOM") }}</p> + +<p>La propiedad <strong><code>Element.attributes</code></strong> retorna una colección "viva" cuyos nodos son todos los atributos registrados en el nodo especificado. Es un {{domxref("NamedNodeMap")}}, no un <code>Array</code>, así que no tiene los métodos de {{jsxref("Array")}} y los índices de nodo {{domxref("Attr")}} pueden diferir en cada navegador. Más concretamente <code>attributes</code> es un conjunto de pares de cadenas nombre/valor que representan la información relativa a cada atributo.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes; +</pre> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<h3 id="Ejemplos_básicos">Ejemplos básicos</h3> + +<pre class="brush: js">// Obtiene el primer elemento <p> en el documento +var para = document.getElementsByTagName("p")[0]; +var atts = para.attributes;</pre> + +<h3 id="Notes" name="Notes">Enumerando atributos de elemtentos</h3> + +<p>La indexación numérica es útil para recorrer de todos los atributos de un elemento.<br> + El siguiente ejemplo corre a través de los atributors del elemento con id "p1" en el documento, e imprime el valor de cada atributo.</p> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + + <head> + <title>Attributes example</title> + <script type="text/javascript"> + function listAttributes() { + var paragraph = document.getElementById("paragraph"); + var result = document.getElementById("result"); + + // Primero, verifiquenmos que el párrafo tiene algún atributo + if (paragraph.hasAttributes()) { + var attrs = paragraph.attributes; + var output = ""; + for(var i = attrs.length - 1; i >= 0; i--) { + output += attrs[i].name + "->" + attrs[i].value; + } + result.value = output; + } else { + result.value = "No hay atributos que mostrar"; + } + } + </script> + </head> + +<body> + <p id="paragraph" style="color: green;">Párrafo de ejemplo</p> + <form action=""> + <p> + <input type="button" value="Muestra el nombre cada atributo y su valor" + onclick="listAttributes();"> + <input id="result" type="text" value=""> + </p> + </form> +</body> +</html></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">Observaciones</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} a {{domxref("Element")}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Sin cambios desde {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Sin cambios desde {{SpecName('DOM1')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Prestación</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>6.0 [2]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Prestación</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Anes de Firefox 22, este atributo era implementado en la interfaz {{domxref("Node")}} (heredada de {{domxref("Element")}}). Se trasladó a esta interfaz de acuerdo a la especificación y el uso en otros navegadores.</p> + +<p>[2] Internet Explorer 5.5 retorna un mapa conteniendo los valores en lugar de objetos attribute.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("NamedNodeMap")}}, la interfaz del objeto retornado.</li> + <li>Consideracións sobre compatibilidad cruzada entre navegadores: en <a class="external" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a></li> +</ul> diff --git a/files/es/web/api/element/classlist/index.html b/files/es/web/api/element/classlist/index.html new file mode 100644 index 0000000000..4d45dd2e31 --- /dev/null +++ b/files/es/web/api/element/classlist/index.html @@ -0,0 +1,215 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +tags: + - API + - DOM + - Elemento + - Propiedad + - Referencia + - Sólo-Lectura +translation_of: Web/API/Element/classList +--- +<div>{{APIRef("DOM")}}</div> + +<p>La propiedad de sólo lectura <code><strong>Element.classList</strong></code> devuelve una colección activa de <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList" title="The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList or HTMLAreaElement.relList. It is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive."><code>DOMTokenList</code></a> de los atributos de clase del elemento.</p> + +<p>Usar <code>classList</code> es una forma práctica de acceder a la lista de clases de un elemento como una cadena de texto delimitada por espacios a través de {{domxref("element.className")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var <var>elementClasses</var> = elementNodeReference.classList; +</pre> + +<p><em>elementClasses</em> es un <a href="/en-US/docs/DOM/DOMTokenList">DOMTokenList</a> que representa el atributo clase de <em>elementNodeReference</em>. Si el atributo clase no está definido o está vacío, <em>elementClasses.length</em> devuelve 0. <code>element.classList</code> por sí mismo es de sólo lectura, aunque puede ser modificado usando los métodos<code> add()</code> y <code>remove()</code>.</p> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>add( String [, String] )</dt> + <dd>Añade las clases indicadas. Si estas clases existieran en el atributo del elemento serán ignoradas.</dd> + <dt>remove( String [, String] )</dt> + <dd>Elimina las clases indicadas.<br> + <strong>Nota:</strong> Eliminar una clase que no existe NO produce un error.</dd> + <dt><strong>item</strong>( Number )</dt> + <dd>Devuelve el valor de la clase por índice en la colección.</dd> + <dt><strong>toggle</strong>( String [, force] )</dt> + <dd>Cuando sólo hay un argumento presente: Alterna el valor de la clase; ej., si la clase existe la <u>elimina</u> y devuelve <code>false</code>, si no, la <u>añade</u> y devuelve <code>true</code>.<br> + Cuando el segundo argumento está presente: Si el segundo argumento se evalúa como <code>true</code>, se añade la clase indicada, y si se evalúa como <code>false</code>, la elimina.</dd> + <dt>contains( String )</dt> + <dd>Comprueba si la clase indicada existe en el atributo de clase del elemento.</dd> + <dt>replace( oldClass, newClass )</dt> + <dd>Reemplaza una clase existente por una nueva.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js" dir="rtl">// div es una referencia de objeto al elemento <div> con class="foo bar" +div.classList.remove("foo"); +div.classList.add("anotherclass"); + +// si visible está presente la elimina, de lo contrario la añade +div.classList.toggle("visible"); + +// añadir/eliminar visible, dependiendo de la condición, i menor que 10 +div.classList.toggle("visible", i < 10 ); + +alert(div.classList.contains("foo")); + +// añadir o eliminar varias clases +div.classList.add("foo", "bar"); +div.classList.remove("foo", "bar"); + +// reemplazar la clase "foo" por "bar" +div.classList.replace("foo", "bar");</pre> + +<div class="note"> +<p>Las versiones de Firefox anteriores a la 26 no implementan el uso de múltiples argumentos en los métodos add/remove/toggle. Vea <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></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">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Nota en la especificación de HTML relacionada con el atributo {{htmlattrxref("class")}}.</td> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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>8</td> + <td>12</td> + <td>{{CompatGeckoDesktop(1.9.2)}}</td> + <td>10<sup>[1]</sup></td> + <td>11.50</td> + <td>5.1</td> + </tr> + <tr> + <td>Segundo argumento del método <code>toggle()</code></td> + <td>24</td> + <td>12</td> + <td>{{CompatGeckoDesktop(24)}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>15</td> + <td>7</td> + </tr> + <tr> + <td>Múltiples argumentos para <code>add()</code> y <code>remove()</code></td> + <td>28</td> + <td>12</td> + <td>{{CompatGeckoDesktop(26)}}</td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>7</td> + </tr> + <tr> + <td><code>replace()</code></td> + <td>61</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("49")}}</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>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>3.0</td> + <td>12</td> + <td>{{CompatGeckoMobile(1.9.2)}}</td> + <td>10<sup>[1]</sup></td> + <td>11.10</td> + <td>5.0</td> + </tr> + <tr> + <td>Segundo argumento del método <code>toggle()</code></td> + <td>4.4</td> + <td>12</td> + <td>{{CompatGeckoMobile(24)}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>7.0</td> + </tr> + <tr> + <td>Múltiples argumentos para <code>add()</code> y <code>remove()</code></td> + <td>4.4</td> + <td>12</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>7.0</td> + </tr> + <tr> + <td><code>replace()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("49")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] No soportado para elementos SVG. Vea <a href="https://connect.microsoft.com/IE/feedback/details/1046039/classlist-not-working-on-svg-elements">un informe de Microsoft acerca de esto</a>.<br> + [2] Internet Explorer no lo implementa actualmente. Vea <a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">un informe de Microsoft acerca de esto</a>.</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{domxref("element.className")}}</li> + <li>{{domxref("DOMTokenList")}};</li> +</ul> diff --git a/files/es/web/api/element/classname/index.html b/files/es/web/api/element/classname/index.html new file mode 100644 index 0000000000..be9b04b4b0 --- /dev/null +++ b/files/es/web/api/element/classname/index.html @@ -0,0 +1,130 @@ +--- +title: Element.className +slug: Web/API/Element/className +tags: + - API + - DOM + - Gecko + - Propiedad + - Referencia +translation_of: Web/API/Element/className +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p><strong>className</strong> obtiene y establece el valor del atributo <code>class</code> del elemento especificado.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className; +<var>elementNodeReference</var>.className = <var>cName</var>;</pre> + +<ul> + <li><var>cName</var> es una variable de cadena representando la clase o la lista de clases separada por espacios, del elemento en cuestión.</li> +</ul> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: js">let elm = document.getElementById('item'); + +if(elm.className === 'active'){ + elm.className = 'inactive'; +} else { + elm.className = 'active'; +}</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>El nombre <code>className</code> es utilizado para esta propiedad en lugar de <code>class</code> para evitar conflictos con la palabra clave "class" existente en muchos de los lenguages que son usados para manipular el DOM.</p> + +<p><code>className</code> también puede ser una instancia de {{domxref("SVGAnimatedString")}} si <code>element</code> es un {{domxref("SVGElement")}}. Es mejor de obtener/establecer la propiedad <code>className</code> de un elemento utilizando {{domxref("Element.getAttribute")}} y {{domxref("Element.setAttribute")}} si estás tratando con elementos SVG.</p> + +<pre class="brush: js">elm.setAttribute('class', elm.getAttribute('class'))</pre> + +<p> </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">Observaciones</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</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> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome para 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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("element.classList")}}</li> +</ul> diff --git a/files/es/web/api/element/click_event/index.html b/files/es/web/api/element/click_event/index.html new file mode 100644 index 0000000000..9a74553c13 --- /dev/null +++ b/files/es/web/api/element/click_event/index.html @@ -0,0 +1,280 @@ +--- +title: click +slug: Web/API/Element/click_event +translation_of: Web/API/Element/click_event +--- +<p>El evento "click" se dispara cuando se presiona el botón de un dispositivo de entrada (Mouse o Mousepad) sobre un elemento. </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-click">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">Varies</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><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>The event target (the topmost target in the DOM tree).</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>The type of event.</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>Whether the event normally bubbles or not</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>Whether the event is cancellable or not?</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> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>A count of consecutive clicks that happened in a short amount of time, incremented by one.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</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="Ejemplo">Ejemplo</h2> + +<pre class="brush: js"><div id="prueba"></div> + +<script> + document.getElementById("prueba").addEventListener("click", function( event ) { + // presentar la cuenta de clicks realizados sobre el elemento con id "prueba" + event.target.innerHTML = "Conteo de Clicks: " + event.detail; + }, false); +</script> +</pre> + +<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> + +<h3 id="Internet_Explorer">Internet Explorer</h3> + +<p>Internet Explorer 8 & 9 tiene problemas con elementos con un valor {{cssxref("background-color")}} de <code><a href="/en-US/docs/Web/CSS/color_value#transparent_keyword">transparent</a> que es sobrepuesto a los demas elementos por lo que no les permite recibir el evento.</code></p> + +<p>Un ejemplo <a href="http://jsfiddle.net/YUKma/show/">aqui</a></p> + +<p>¿Cómo evitarlo?</p> + +<ul> + <li>Para IE9 only: + <ul> + <li>Asignar <code>{{cssxref("background-color")}}: <a href="/en-US/docs/Web/CSS/color_value#rgba()">rgba</a>(0,0,0,0)</code></li> + <li>Asignar <code>{{cssxref("opacity")}}: 0</code> y asignar explicitamente {{cssxref("background-color")}} un valor diferente a <a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li> + </ul> + </li> + <li>Para IE8 and IE9: + <ul> + <li>Asignar <code><a href="http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx">filter</a>: alpha(opacity=0);</code> y asignar explicitamente {{cssxref("background-color")}} un valor diferente a <a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li> + </ul> + </li> +</ul> + +<h3 id="Safari_Mobile">Safari Mobile</h3> + +<p>En Safari Mobile 7.0+ ( también algunas versiones anteriores) <a href="https://bugs.webkit.org/show_bug.cgi?id=153887">presenta un problema</a> cuando se da click sobre elementos que no son tipicamente interactivos como es el caso de un div. </p> + +<p>¿Cómo evitarlo?</p> + +<ul> + <li>Asignar {{cssxref("cursor")}}<code>: pointer;</code> en el elemento o uno de sus contendores.</li> + <li>Ubicar un attributo <code>onclick="void(0)"</code> al elemento o cualquiera de sus elementos contenedores, menos {{HTMLElement("body")}}.</li> + <li>Usar elementos interactivos (e.g. {{HTMLElement("a")}}) en lugar de no interactivos (e.g. {{HTMLElement("div")}}).</li> + <li>No usar <a href="http://davidwalsh.name/event-delegate">delegacion del evento</a> click.</li> +</ul> + +<p>Lo siguientes elementos son considerados por Safari típicamente interactivos</p> + +<ul> + <li>{{HTMLElement("a")}} (but it must have an <code>href</code>)</li> + <li>{{HTMLElement("area")}} (but it must have an <code>href</code>)</li> + <li>{{HTMLElement("button")}}</li> + <li>{{HTMLElement("img")}}</li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("label")}} (but it must be associated with a form control)</li> + <li>{{HTMLElement("textarea")}}</li> + <li><em>This list is incomplete; you can help MDN by doing further testing/research and expanding it.</em></li> +</ul> + +<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>Edge</th> + <th>Opera</th> + <th>Safari</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> + <tr> + <td>En elementos inhabilitados</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>En elementos inhabilitados</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Sólo funciona para los tipos {{HTMLElement("textarea")}} elements and some {{HTMLElement("input")}} .</p> + +<p>[2] Internet Explorer sólo dispara el evento click en los elementos {{HTMLElement("input")}} tipo <code>checkbox</code> o <code>radio cuando se ha realizdo sobre ellos un doble click.</code></p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{event("mousedown")}}</li> + <li>{{event("mouseup")}}</li> + <li>{{event("mousemove")}}</li> + <li>{{event("click")}}</li> + <li>{{event("dblclick")}}</li> + <li>{{event("mouseover")}}</li> + <li>{{event("mouseout")}}</li> + <li>{{event("mouseenter")}}</li> + <li>{{event("mouseleave")}}</li> + <li>{{event("contextmenu")}}</li> +</ul> diff --git a/files/es/web/api/element/clientheight/index.html b/files/es/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..0784b49a36 --- /dev/null +++ b/files/es/web/api/element/clientheight/index.html @@ -0,0 +1,61 @@ +--- +title: Element.clientHeight +slug: Web/API/Element/clientHeight +tags: + - Propiedad +translation_of: Web/API/Element/clientHeight +--- +<p>{{ APIRef("DOM") }}</p> + +<p>La propiedad de sólo lectura <code><strong>Element.clientHeight</strong></code> devuelve la altura de un elemento en píxeles, incluyendo el padding pero no las barras horizontales, el borde o el margen.</p> + +<p><code>clientHeight</code> puede ser calculado como CSS <code>height</code> + CSS <code>padding</code> - alto de la barra horizontal (si existe).</p> + +<div class="note"> +<p><strong>Nota:</strong> Esta propiedad redondeará el valor a un entero. Si necesitas un valor fraccional usa {{ domxref("element.getBoundingClientRect()") }}.</p> +</div> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxis</h2> + +<pre class="syntaxbox">var <var>h</var> = <var>element</var>.clientHeight;</pre> + +<p><code><var>h</var></code> es un entero que representa el alto de <em>element</em> en píxeles.</p> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<p> </p> + +<p> <img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p> + + +<h2 id="Specification" name="Specification">Specification</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('CSSOM View', '#dom-htmlelement-clientheight', 'clientheight')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Notes" name="Notes">Notas</h3> + +<p><code>clientHeight</code> es una propiedad introducida en el modelo de objeto de Internet Explorer.</p> + +<h2 id="See_Also" name="See_Also">Ver también</h2> + +<ul> + <li>{{domxref("Element.offsetHeight")}}</li> + <li>{{domxref("Element.scrollHeight")}}</li> + <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li> + <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></li> +</ul> diff --git a/files/es/web/api/element/clientleft/index.html b/files/es/web/api/element/clientleft/index.html new file mode 100644 index 0000000000..e6ffc24faf --- /dev/null +++ b/files/es/web/api/element/clientleft/index.html @@ -0,0 +1,58 @@ +--- +title: element.clientLeft +slug: Web/API/Element/clientLeft +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/clientLeft +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>El ancho del borde izquierdo de un elemento en pixel. Incluye el ancho de la barra de desplazamiento vertical, si la dirección del texto es<em>rtl</em> (derecha a izquierda) y si hay un desbordamiento que provoque la aparición de la barra en el lado izquierdo. <code>clientLeft</code> NO incluye<em>margin-left</em> o padding-left<em>. <code>clientLeft</code> es de sólo lectura.</em></p> + +<p>Las aplicaciones "<a href="es/Gecko">Gecko</a>-based applications" implementan <code>clientLeft</code> a partir de Gecko 1.9 (<a href="es/Firefox_3">Firefox 3</a>, ver {{ Bug(111207) }}). Esta propiedad no está implementada en Firefox 2 o anteriores.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">var <var>left</var> = <var>element</var>.clientLeft; +</pre> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Suave, individualista y muy leal, los gatos de Birmania tienen un carácter entre los persas y los siameses. Si le gustan los gatos que no son agresivos, disfrutan estar entre los humanos y son generalmente tranquilos, esta es la raza para usted.</p> + +<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>Todos los Birmanos tienen pintas y coloración obscura en la cara, orejas, patas y cola.</p> + +<p>La imagen del gato y el texto vienen de <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> + +<p style="margin-top: 270px;"><img alt="Image:clientLeft.png"></p> + +<p><img alt="La barra de desplazamiento vertical en el lado izquierdo, aparece cuando la propiedad layout.scrollbar.side tiene el valor 1 o 3"></p> + +<p>Cuando la propiedad <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><em>layout.scrollbar.side</em> </a> se establece a 1 o a 3 y la dirección de texto está puesta a RTL, <strong>entonces la barra de desplazamiento se pone a la izquierda</strong> y esto afecta a la forma en que se calcula clientLeft.</p> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p>No es parte de ninguna especificación W3C.</p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p><code>clientLeft</code> apareció por primera vez en el modelo de objetos de MS IE DHTML.</p> + +<p>La posición de la barra de desplazamiento vertical en textos<em>rtl</em> depende de la preferencias de <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><em>layout.scrollbar.side</em> </a></p> + +<h3 id="Referencias" name="Referencias">Referencias</h3> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientleft.asp?frame=true">MSDN's clientLeft definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> +</ul> diff --git a/files/es/web/api/element/clienttop/index.html b/files/es/web/api/element/clienttop/index.html new file mode 100644 index 0000000000..063ac86c13 --- /dev/null +++ b/files/es/web/api/element/clienttop/index.html @@ -0,0 +1,54 @@ +--- +title: element.clientTop +slug: Web/API/Element/clientTop +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/clientTop +--- +<p> </p> + +<p>{{ Fx_minversion_header(3) }} {{ ApiRef() }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>El ancho del borde superior de un elemento en pixel. No incluye ni el<em>margin-top</em> , ni el<em>padding-top</em> . <code>clientTop</code> es de sólo lectura.</p> + +<p>Las aplicaciones "<a href="es/Gecko">Gecko</a>-based applications" implementan el uso de <code>clientTop</code> a partir de Gecko 1.9 (<a href="es/Firefox_3">Firefox 3</a>,ver {{ Bug(111207) }}). Esta propiedad no está disponible en Firefox 2 o anteriores.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">var<em>top</em> = <var>element</var>.clientTop; +</pre> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Suave, individualista y muy leal, los gatos de Birmania tienen un carácter entre los persas y los siameses. Si le gustan los gatos que no son agresivos, disfrutan estar entre los humanos y son generalmente tranquilos, esta es la raza para usted.</p> + +<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>Todos los Birmanos tienen pintas y coloración obscura en la cara, orejas, patas y cola.</p> + +<p>La imagen del gato y el texto vienen de <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> + +<p style="margin-top: 270px;"><img alt="Image:clientTop.png"></p> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p>No es parte de ninguna especificación W3C.</p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p><code>clientTop</code> se presento por primera vez en el modelo de objetos de MS IE DHTML.</p> + +<h3 id="Referencias" name="Referencias">Referencias</h3> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clienttop.asp?frame=true">MSDN's clientTop definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> +</ul> diff --git a/files/es/web/api/element/clientwidth/index.html b/files/es/web/api/element/clientwidth/index.html new file mode 100644 index 0000000000..bdf813c867 --- /dev/null +++ b/files/es/web/api/element/clientwidth/index.html @@ -0,0 +1,60 @@ +--- +title: Element.clientWidth +slug: Web/API/Element/clientWidth +translation_of: Web/API/Element/clientWidth +--- +<p>{{ APIRef("DOM") }}</p> + +<p>La propiedad <code><strong>Element.clientWidth</strong></code> es cero para elementos sin CSS o cajas de diseño (layout), en caso contrario es la anchura interior de un elemento en pixels, incluyendo la anchura de relleno (padding) pero no la anchura de la barra de desplazamiento vertical (si está presente, si está dibujada), el borde o el margen.</p> + +<div class="note"> +<p>El valor de esta propiedad será redondeado a un entero. Si necesita un valor fraccional, use {{ domxref("element.getBoundingClientRect()") }}.</p> +</div> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxis</h2> + +<pre class="eval">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth; +</pre> + +<p><var>intElemClientWidth</var> será un entero que corresponde con el <strong>clientWidth</strong> del <var>element</var>o en pixels. <strong>clientWidth</strong> es de sólo-lectura.</p> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<p> </p> + +<p> <img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p> + + +<h2 id="Specification" name="Specification">Especificación</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Observaciones</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Notes" name="Notes">Notas</h3> + +<p><code>clientWidth</code> fue introducida en el modelo de objetos DHTML de MS IE.</p> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("api.Element.clientWidth")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("HTMLElement.offsetWidth")}}</li> + <li>{{domxref("Element.scrollWidth")}}</li> + <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li> + <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Measuring Element Dimension and Location</a></li> +</ul> diff --git a/files/es/web/api/element/closest/index.html b/files/es/web/api/element/closest/index.html new file mode 100644 index 0000000000..ecf35158b5 --- /dev/null +++ b/files/es/web/api/element/closest/index.html @@ -0,0 +1,145 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Elemento + - Referencia + - metodo +translation_of: Web/API/Element/closest +--- +<div>{{APIRef('Shadow DOM')}}</div> + +<p>El método <code><strong>closest()</strong></code> de la interfaz {{domxref("Element")}} devuelve el ascendiente más cercano al elemento actual (o el propio elemento actual) que coincida con el selector proporcionado por parámetro. Si no existe dicho ascendiente, devuelve <code>null</code>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var <em>closestElement = element</em>.closest(<em>selectors</em>); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<ul> + <li><em><code>selectors</code></em> es un {{domxref("DOMString")}} que contiene una lista de selectores como <code>"p:hover, .toto + q"</code></li> + <li><em><code>element</code></em> es el {{domxref("Element")}} en la parte superior del árbol de elementos a tratar.</li> +</ul> + +<h3 id="Valor_del_resultado">Valor del resultado</h3> + +<ul> + <li><code>closestElement</code> es el {{domxref("Element")}} ascendiente más cercano al elemento actual. Puede ser <code>null</code>.</li> +</ul> + +<h3 id="Excepciones">Excepciones</h3> + +<ul> + <li>Se lanza una excepción {{exception("SyntaxError")}} si <em><code>selectors</code></em> no es una lista de selectores válida.</li> +</ul> + +<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><article> + <div id="div-01">Here is div-01 + <div id="div-02">Here is div-02 + <div id="div-03">Here is div-03</div> + </div> + </div> +</article></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var el = document.getElementById('div-03'); + +var r1 = el.closest("#div-02"); +// returns the element with the id=div-02 + +var r2 = el.closest("div div"); +// returns the closest ancestor which is a div in div, here is div-03 itself + +var r3 = el.closest("article > div"); +// returns the closest ancestor which is a div and has a parent article, here is div-01 + +var r4 = el.closest(":not(div)"); +// returns the closest ancestor which is not a div, here is the outmost article</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Para los navegadores que no tengan soporte para <code>Element.closest()</code>, pero sí lo tengan para <code>document.querySelectorAll()</code> (o un equivalente prefijado, es decir IE9+), existe un polyfill:</p> + +<pre class="brush: js">if (!Element.prototype.matches) { + Element.prototype.matches = Element.prototype.msMatchesSelector || + Element.prototype.webkitMatchesSelector; +} + +if (!Element.prototype.closest) { + Element.prototype.closest = function(s) { + var el = this; + + do { + if (el.matches(s)) return el; + el = el.parentElement || el.parentNode; + } while (el !== null && el.nodeType === 1); + return null; + }; +}</pre> + +<p>Sin embargo, si realmente se necesita soporte para IE 8, entonces el siguiente polyfill servirá para conseguirlo de forma muy lenta, pero lo hará. Sin embargo, sólo admitirá selectores CSS 2.1 en IE 8, puede causar picos severos de retraso en sitios web en producción.</p> + +<pre class="brush: js">if (window.Element && !Element.prototype.closest) { + Element.prototype.closest = + function(s) { + var matches = (this.document || this.ownerDocument).querySelectorAll(s), + i, + el = this; + do { + i = matches.length; + while (--i >= 0 && matches.item(i) !== el) {}; + } while ((i < 0) && (el = el.parentElement)); + return el; + }; +} +</pre> + +<h2 id="Especificacion" name="Especificacion">Especificación</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<p>{{Compat("api.Element.closest")}}</p> + +<h3 id="Notas_de_compatibilidad">Notas de compatibilidad</h3> + +<ul> + <li>En Edge <code>document.createElement(element).closest(element)</code> devolverá <code>null</code> si el elemento no es el primero del DOM</li> +</ul> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>La interfaz {{domxref("Element")}}.</li> + <li> + <div class="syntaxbox"><a href="/es/docs/Web/CSS/Introducción/Selectors">Sintaxis de los Selectores</a></div> + </li> + <li> + <div class="syntaxbox">Otros métodos que toman selectores: {{domxref("element.querySelector()")}} y {{domxref("element.matches()")}}.</div> + </li> +</ul> diff --git a/files/es/web/api/element/computedstylemap/index.html b/files/es/web/api/element/computedstylemap/index.html new file mode 100644 index 0000000000..656312b1f5 --- /dev/null +++ b/files/es/web/api/element/computedstylemap/index.html @@ -0,0 +1,99 @@ +--- +title: Element.computedStyleMap() +slug: Web/API/Element/computedStyleMap +tags: + - API + - CSS Typed Object Model API + - Element + - Experimental + - Houdini + - Method + - Reference + - StylePropertyMapReadOnly + - computedStyleMap() +translation_of: Web/API/Element/computedStyleMap +--- +<p>{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}</p> + +<p><span class="seoSummary">El método <strong><code>computedStyleMap()</code></strong> de la interfaz {{domxref("Element")}} devuelve una interfaz {{domxref("StylePropertyMapReadOnly")}} que provee una representación de solo-lectura de un bloque de declaración de CSS que es una alternativa a {{domxref("CSSStyleDeclaration")}}. </span></p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">var <var>stylePropertyMapReadOnly</var> = Element.computedStyleMap()</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<p>Ninguno.</p> + +<h3 id="Valor_de_resultado">Valor de resultado</h3> + +<p>Una interfaz {{domxref("StylePropertyMapReadOnly")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Comenzamos con algo de HTML simple: un párrafo con un enlace, y una lista de definición a la cual le añadiremos todos los pares de Propiedad CSS / Valor.</p> + +<pre class="brush: html notranslate"><p> + <a href="https://example.com">Link</a> +</p> +<dl id="regurgitation"></dl></pre> + +<p>Añadimos un poco de CSS</p> + +<pre class="brush: css notranslate">a { + --colour: red; + color: var(--colour); +}</pre> + +<p>Añadimos Javascript para tomar nuestro enlace y devolvemos una lista de definición de todos los valores de propiedades CSS usando <code>computedStyleMap().</code></p> + +<pre class="brush: js notranslate">// obtenemos el elemento +const myElement = document.querySelector('a'); + +// obtenemos la <dl> que llenaremos +const stylesList = document.querySelector('#regurgitation'); + +// recuperamos todos los estilos calculados con computedStyleMap() +const allComputedStyles = myElement.computedStyleMap(); + +// iteramos a través del mapa de todas las propiedades y valores, añadiendo un <dt> y <dd> para cada mapa +for (const [prop, val] of allComputedStyles) { + // propiedades + const cssProperty = document.createElement('dt'); + cssProperty.appendChild(document.createTextNode(prop)); + stylesList.appendChild(cssProperty); + + // valores + const cssValue = document.createElement('dd'); + cssValue.appendChild(document.createTextNode(val)); + stylesList.appendChild(cssValue); +}</pre> + +<p>En <a href="/en-US/docs/Web/API/Element/computedStyleMap#Browser_compatibility">navegadores que soportan <code>computedStyleMap()</code></a>, verás una lista de todas las propiedades CSS y valores. En otros navegadores verás un enlace.</p> + +<p>{{EmbedLiveSample("Examples", 300, 300)}}</p> + +<p>¿Te diste cuenta cuántas propiedades CSS por defecto tenía un enlace? Actualiza el '<code>a</code>' a un '<code>p</code>', y notarás una diferencia en los valores calculados por defecto del <code>margin-top</code> y <code>margin-bottom</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('CSS Typed OM','#dom-element-computedstylemap','computedStyleMap()')}}</td> + <td>{{Spec2('CSS Typed OM')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navedadores">Compatibilidad con navedadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una "pull request".</div> + +<p>{{Compat("api.Element.computedStyleMap")}}</p> diff --git a/files/es/web/api/element/currentstyle/index.html b/files/es/web/api/element/currentstyle/index.html new file mode 100644 index 0000000000..620ff01129 --- /dev/null +++ b/files/es/web/api/element/currentstyle/index.html @@ -0,0 +1,80 @@ +--- +title: Element.currentStyle +slug: Web/API/Element/currentStyle +tags: + - API + - Compatibilidad en los navegadores móviles + - Property +translation_of: Web/API/Element/currentStyle +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{ Non-standard_header() }}</p> + +<h2 id="Sumario">Sumario</h2> + +<p><strong><code>Element.currentStyle </code></strong><span lang="es"><span>es</span> <span>una propiedad</span> <span>que es una</span> <span>alternativa propietaria</span> <span>del método estandarizado</span></span> {{domxref("window.getComputedStyle")}} . <span id="result_box" lang="es"><span>Está disponible en</span> <span>las versiones anteriores de</span> <span>Microsoft</span> <span>Internet Explorer</span><span>.</span></span></p> + +<h2 id="Especificación">Especificación</h2> + +<p>No forma parte de ninguna especificación.</p> + +<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx">tiene una descripción MSDN</a>.</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad en los Navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Microsoft Edge</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>6</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_También">Ver También</h2> + +<ul> + <li>{{domxref("Element.runtimeStyle")}} </li> +</ul> diff --git a/files/es/web/api/element/getattribute/index.html b/files/es/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..91f55e2c43 --- /dev/null +++ b/files/es/web/api/element/getattribute/index.html @@ -0,0 +1,48 @@ +--- +title: Element.getAttribute() +slug: Web/API/Element/getAttribute +tags: + - API + - DOM + - metodo +translation_of: Web/API/Element/getAttribute +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p><span class="seoSummary"><code>getAttribute()</code> devuelve el valor del atributo especificado en el elemento.</span> Si el atributo especificado no existe, el valor retornado puede ser tanto <code>null</code> como <code>""</code> (una cadena vacía); ver {{Anch("Notes")}} para más detalles.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><em>var atributo</em> = element.getAttribute(<em>nombreAtributo</em>); +</pre> + +<p>donde</p> + +<ul> + <li><code><em>atributo</em></code> es una cadena que contiene el valor del atributo <code><em>nombreAtributo</em></code>.</li> + <li><code><em>nombreAtributo</em></code> es el nombre del atributo del cual se quiere obtener el valor.</li> +</ul> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="brush:js">var div1 = document.getElementById("div1"); +var align = div1.getAttribute("align"); + +alert(align); // Muestra el valor de la alineación(align) del elemento con id="div1"</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Cuando es invocado en un elemento HTML desde un DOM marcado como documento HTML, <code>getAttribute()</code> convierte a minúsculas el argumento antes de proceder.</p> + +<p>Esencialmente todos los navegadores (Firefox, Internet Explorer, versiones recientes de Opera, Safari, Konqueror, y iCab, siendo una lista no exhaustiva) devuelven <code>null</code> cuando el atributo especificado no existe en el elemento especificado y esto es lo que establece <a href="http://dom.spec.whatwg.org/#dom-element-getattribute" title="http://dom.spec.whatwg.org/#dom-element-getattribute">el actual borrador de la especificación del DOM</a>. Por otra parte, la antigua especificación del DOM 3 Core dice que el valor correcto de retorno es de hecho una <em>cadena vacía</em>, y algunas implementaciones de DOM aplican este comportamiento. La implementación de getAttribute en XUL (Gecko) sigue la especificación de DOM 3 Core y retorna una cadena vacía. Por consiguiente, es recomendable usar {{domxref("element.hasAttribute()")}} para verificar la existencia de un atributo previo a la utilización de <code>getAttribute()</code> si es posible que el atributo requerido no exista en el elemento especificado.</p> + +<div>{{DOMAttributeMethods}}</div> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-666EE0F9">DOM Level 2 Core: getAttribute</a> (introducido en <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">DOM Level 1 Core</a>)</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> +</ul> diff --git a/files/es/web/api/element/getattributenodens/index.html b/files/es/web/api/element/getattributenodens/index.html new file mode 100644 index 0000000000..07ca649174 --- /dev/null +++ b/files/es/web/api/element/getattributenodens/index.html @@ -0,0 +1,38 @@ +--- +title: Element.getAttributeNodeNS() +slug: Web/API/Element/getAttributeNodeNS +tags: + - API + - DOM + - Referencia + - metodo +translation_of: Web/API/Element/getAttributeNodeNS +--- +<p>{{ APIRef("DOM") }}</p> + +<h2 id="Summary" name="Summary">Sumario</h2> + +<p>Dados namespace y nodeName del element, devuelve su <code>Attr</code> .</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="eval"><em>attributeNode</em> = element.getAttributeNodeNS(<em>namespace</em>,<em>nodeName</em>) +</pre> + +<ul> + <li><code>attributeNode</code> es el nodo para el atributo especificado.</li> + <li><code>namespace</code> es la cadena que define el namespace del atributo.</li> + <li><code>nodeName</code> es la cadena que define el name del atributo.</li> +</ul> + +<p><span class="comment">== Example == TBD The example needs to be fixed pre> // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "<a class="external" href="http://www.mozilla.org/ns/specialspace" rel="freelink">http://www.mozilla.org/ns/specialspace</a>", "id"); // iNode.value = "full-top" </pre</span></p> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p><code>getAttributeNodeNS</code> es más específica <a href="en/DOM/element.getAttributeNode">getAttributeNode</a> en el sentido de que puedes especificar atributos de un namespace en particular. Su método setter es <a href="en/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">DOM Level 2 Core: getAttributeNodeNS</a></p> diff --git a/files/es/web/api/element/getboundingclientrect/index.html b/files/es/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..9d1b6ae4bb --- /dev/null +++ b/files/es/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,98 @@ +--- +title: element.getBoundingClientRect +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - Boundary + - Bounding + - Bounds + - CSSOM View + - Cliente + - DOM + - Elemento + - Minimo + - Referencia + - metodo +translation_of: Web/API/Element/getBoundingClientRect +--- +<div>{{APIRef("DOM")}}</div> + +<p>El método <code><strong>Element.getBoundingClientRect()</strong></code> devuelve el tamaño de un elemento y su posición relativa respecto a la ventana de visualización (<em>viewport).</em></p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><em>domRect</em> = <em>element</em>.getBoundingClientRect();</pre> + +<h3 id="Valor">Valor</h3> + +<p>El valor devuelto es un objeto {{domxref("DOMRect")}} que es la unión de los rectángulos devueltos por {{domxref("Element.getClientRects", "getClientRects()")}}para el elemento, es decir, las <em>CSS border-boxes</em> asociadas con el elemento. El resultado es el rectángulo más pequeño que contiene al elemento completo, con las propiedades de solo lectura <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code> describiendo la <em>border-box</em> total en pixels. Excepto <code>width</code> and <code>height</code> las propiedades son relativas a la esquina superior izquierda (<em>top-left</em>) de la ventana.</p> + +<p style="display: block;"><img alt="Explicación de los valores DOMRect" src="https://mdn.mozillademos.org/files/15087/rect.png" style="float: right; height: 300px; width: 300px;" title="Explicación de los valores DOMRect"></p> + +<p>Las <em>border-boxes</em> vacías son ignoradas. Si todas las <em>border-boxes</em> del elemento estan vacías, entonces se devuelve un rectángulo con <code>width</code> and <code>height</code> iguales a cero donde el <code>top</code> y el <code>left</code> son el top-left de la <em>border-box</em> de la primera <em>CSS box</em> (en onden de contenido) para el elemento.</p> + +<p>La cantidad de <em>scrolling</em> realizado en la ventana (o cualquier otro elemento <em>scrollable</em>) se tiene en cuenta cuando se calcula el rectángulo. Esto implica que los bordes del rectángulo (<code>top</code>, <code>left</code>, <code>bottom</code>, and <code>right</code>) cambián sus valores cada vez que la posición de <em>scrolling</em> cambia (ya que sus valores no son absolutos sino relativos a la ventana). Si se necesita el <em>bounding rectangle</em> relativo a la esquina <em>top-left</em> del documento, hay que añadir la posición de <em>scrolling</em> actual a las propiedades <code>top</code> and <code>left</code> (dicha posición de <em>scrolling</em> puede obtenerse usando {{domxref("window.scrollX")}} y {{domxref("window.scrollY")}}) para obtener el <em>bounding rectangle</em> independiente de la posición de <em>scrolling</em>.</p> + +<h3 id="Fallback_para_todos_los_navegadores">Fallback para todos los navegadores</h3> + +<p>Los scripts que requieran una alta compatibilidad <em>cross-browser</em> pueden usar {{domxref("window.pageXOffset")}} y {{domxref("window.pageYOffset")}} en lugar de <code>window.scrollX</code> y <code>window.scrollY.</code> Si no se tiene acceso a esas propiedades puede usarse el siguiente código:</p> + +<pre class="brush: js notranslate">// Para scrollX +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft +// Para scrollY +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.scrollTop == 'number' ? t : document.body).scrollTop +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush:js notranslate">// rect es un objeto DOMRect con ocho propiedades: left, top, right, bottom, x, y, width, height +var rect = obj.getBoundingClientRect(); +</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("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h3 id="Notas">Notas</h3> + +<p>El objeto <code>DOMRect</code> devuelto puede modificarse en navegadores modernos. Esto no era así en versiones anteriores que devolvían <code>DOMRectReadOnly</code> de forma efectiva. Con IE y Edge, el hecho de no poder agregar propiedades faltantes a su objeto <code>ClientRect</code> <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, devuelto impide rellenar los valores <code>x</code> e <code>y</code>.</p> + +<p>Debido a problemas de compatibilidad (ver a continuación), es más seguro confiar sólo en las propiedades <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code>. </p> + +<p>Las propiedades en el objeto <code>DOMRect</code> devuelto no son suyas. Mientras que el operador <code>in</code> y <code>for...in</code> encontrarán las propiedades devueltas, otras API como <code>Object.keys()</code> fallarán. Además, e inesperadamente, ES2015 y nuevas características como <code>Object.assign()</code> y los operadores rest/spread de los objetos, no podrán copiar las propiedades devueltas.</p> + +<pre class="brush: js notranslate">rect = elt.getBoundingClientRect() +// El resultado en emptyObj es {} +emptyObj = Object.assign({}, rect) +emptyObj = { ...rect } +{width, ...emptyObj} = rect +</pre> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{Compat("api.Element.getBoundingClientRect")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li> + <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li> + <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, una versión anterior a <code>DOMRect</code> </li> +</ul> diff --git a/files/es/web/api/element/getclientrects/index.html b/files/es/web/api/element/getclientrects/index.html new file mode 100644 index 0000000000..507cda7bb8 --- /dev/null +++ b/files/es/web/api/element/getclientrects/index.html @@ -0,0 +1,54 @@ +--- +title: element.getClientRects +slug: Web/API/Element/getClientRects +tags: + - NeedsBrowserCompatibility + - NeedsExample + - NeedsLiveSample + - NeedsUpdate + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/getClientRects +--- +<p> {{ ApiRef("DOM") }}</p> + +<p>El método <code><strong>Element.getClientRects()</strong></code> devuelve una colección de objetos {{domxref("DOMRect")}} que indican los rectángulos que delimitan el rectángulo de cada línea de texto en el navegador.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre><code>var <em>rectCollection</em> = <var>object</var>.getClientRects();</code></pre> + +<h3 id="Devuelve" name="Devuelve">Devuelve</h3> + +<p>El valor devuelto es una colección de objetos rectangulares {{domxref("DOMRect")}}, uno para cada cuadro borde CSS asociado al elemento. Cada objeto {{domxref("DOMRect")}} contiene las propiedades de sólo lectura: <code>left</code>, <code>top</code>, <code>right</code> y <code>bottom</code>, que describen la caja, en pixeles, con el valor top-left relativo al valor top-left del <em>viewport. </em>En el caso de tablas con subtítulos, el subtítulo es incluido aún cuado esté fuera del cuadro borde de la tabla. En caso de ser ejecutado en algún elemento SVG que no sea el <code><svg> </code>externo, el "viewport" al cual los rectángulos de resultado serán relativos será el "viewport" que establece el <code><svg> </code>externo (y serán transformados por las trasnformaciones del <code><svg> </code>externo, si estas existen).</p> + +<p>{{ fx_minversion_note(3.5, "Firefox 3.5 ha agregado las propiedades <code>width</code> y <code>height</code> al objeto TextRectangle.") }}</p> + +<p>La cantidad de desplazamiento que ha tenido el área del viewport (o cualquier otro elemento desplazable) se tiene en cuenta al calcular los rectángulos.</p> + +<p>Los rectángulos devueltos no incluyen los márgenes de ningún elemento hijo que se haya podido haber desbordado.</p> + +<p>Para los elementos de AREA en HTML, elementos SVG que no renderizen nada por si mismos, los elementos <code>display:none</code>, y generalmente cualquier elemento que no sea renderizado directamente, se devuelve una lista vacia.</p> + +<p>Aún si la caja CSS tiene bordes vacios, se devuelven las coordenadas. Las coordenadas <code>left</code>, <code>top</code>, <code>right</code> y <code>bottom</code> pueden aún tener significado.</p> + +<p>Es posible que los valores de desplazamiento sean fracciones de pixel.</p> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<pre class="eval">var rects = obj.getClientRects(); +var numLines = rects.length; +</pre> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p>No forma parte de ninguna especificación W3C.</p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p><code>getClientRects()</code> apareció por primera vez en el modelo de objeto de MS IE DHTML.</p> + +<h3 id="Referencias" name="Referencias">Referencias</h3> + +<ul> + <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms536435.aspx">MSDN's getClientRects definition</a></li> +</ul> diff --git a/files/es/web/api/element/getelementsbyclassname/index.html b/files/es/web/api/element/getelementsbyclassname/index.html new file mode 100644 index 0000000000..a1e6d7b3e3 --- /dev/null +++ b/files/es/web/api/element/getelementsbyclassname/index.html @@ -0,0 +1,112 @@ +--- +title: Element.getElementsByClassName() +slug: Web/API/Element/getElementsByClassName +translation_of: Web/API/Element/getElementsByClassName +--- +<p>{{APIRef("DOM")}}</p> + +<p>El método <strong><code>Element.getElementsByClassName()</code></strong> retorna una {{domxref("HTMLCollection")}} "viva" conteniendo todos los elementos hijos que tienen todos los nombres de clase dados. Cuando se llama en el objeto document, se realiza la búsqueda en el documento completo, incluyendo el nodo raíz.</p> + +<p>De forma similar, el método {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} actúa en todo el documento; retornará los elementos que sean descendientes del documento raiz especificado que tengan los nombres de clase dados.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre> + +<ul> + <li><em><var>elements</var></em> es una {{ domxref("HTMLCollection") }} "viva" de los elementos encontrados.</li> + <li><em><var>names</var></em> es una cadena representando la lista de nombres de clase que deben concordar; los nombres de clase está separados por espacios en blanco.</li> + <li><em>element</em> es cualquier {{domxref("Element")}} de un documento.</li> +</ul> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Obtiene todos los elementos que tienen una clase <code>test</code>:</p> + +<pre class="brush: js">element.getElementsByClassName('test');</pre> + +<p>Obtiene todos los elementos que tienen tanto la clase <code>red</code> como <code>test</code>:</p> + +<pre class="brush: js">element.getElementsByClassName('red test');</pre> + +<p>Obtiene todos los elementos que tienen la clase of <code>test</code>, dentro de un elemento que tiene el <code>id</code> <code>main</code>:</p> + +<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre> + +<p>Podemos también usar métodos de {{jsxref("Array.prototype")}} en cualquier {{ domxref("HTMLCollection") }} pasando <code><var>el HTMLCollection</var></code> como el valor <var>this</var> del método. Aquí encontramos todos los elementos {{HTMLElement("div")}} que tienen una clase <code>test</code>:</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="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Observaciones</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Prestación</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>9</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [2]</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Prestación</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }} [1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Anteriormente a Firefox 19, este método retornaba una {{domxref("NodeList")}}; se cambió para reflejar el cambio en la especificación.</p> + +<p>[2] Safari en iOS 8 y OS X 10.10 retorna una {{domxref("NodeList")}}.</p> diff --git a/files/es/web/api/element/getelementsbytagname/index.html b/files/es/web/api/element/getelementsbytagname/index.html new file mode 100644 index 0000000000..6080c186af --- /dev/null +++ b/files/es/web/api/element/getelementsbytagname/index.html @@ -0,0 +1,50 @@ +--- +title: element.getElementsByTagName +slug: Web/API/Element/getElementsByTagName +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/getElementsByTagName +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>Devuelve una lista de elementos que tienen un <a href="es/DOM/element.tagName">tag name</a> determinado. Se explora el árbol por debajo del elemento dado, excluyendo el propio elemento.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval"><em>elements</em> =<em>element</em>.getElementsByTagName(<em>tagName</em>) +</pre> + +<ul> + <li><code>elements</code> es un <code>NodeList</code> del elemento encontrado en el orden en que aparece en el árbol.</li> + <li><code>element</code> es el elemento a partir del cual debe empezar la búsqueda. Recuerda que sólo se buscan los elementos descendentes del elemento dado, sin incluir el propio elemento.</li> + <li><code>tagName</code> es el nombre que se busca. La cadena especial <code>"*"</code> representa todos los elementos.</li> +</ul> + +<div class="note"> +<p>En Firefox 2 (Gecko 1.8.1) y anteriores, este método no funcionaba correctamente si el árbol contenía algún elemento con etiqueta de nombre conteniendo espacios. (Ver {{ Bug(206053) }} para más detalles).</p> + +<p>Es recomendable usar <a href="es/DOM/document.getElementsByTagNameNS">DOM:document.getElementsByTagNameNS</a> cuando se manejan documentos con "multi-namespace".</p> +</div> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<pre>// comprueba la alineación de las celdas en una tabla. +var table = document.getElementById("forecast-table"); +var cells = table.getElementsByTagName("td"); +for (var i = 0; i < cells.length; i++) { + status = cells[i].getAttribute("status"); + if ( status == "open") { + // grab the data + } +} +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p><code>element.getElementsByTagName</code> es similar a <a href="es/DOM/document.getElementsByTagName">document.getElementsByTagName</a>, excepto por que su búsqueda está restringida a los elementos que descienden del elemento especificado.</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-1938918D">DOM Level 2 Core: Element.getElementsByTagName </a></p> diff --git a/files/es/web/api/element/getelementsbytagnamens/index.html b/files/es/web/api/element/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..3f8a92ef90 --- /dev/null +++ b/files/es/web/api/element/getelementsbytagnamens/index.html @@ -0,0 +1,128 @@ +--- +title: Element.getElementsByTagNameNS() +slug: Web/API/Element/getElementsByTagNameNS +translation_of: Web/API/Element/getElementsByTagNameNS +--- +<div>{{APIRef("DOM")}}</div> + +<p>El método <code><strong>Element.getElementsByTagNameNS()</strong></code> devuelve una {{domxref("HTMLCollection")}} viva de elementos con el nombre de etiqueta dado perteneciente al espacio de nombres dado. Es similar a {{Domxref("Document.getElementsByTagNameNS")}}, con la excepción de que su búsqueda está limitada a los descendientes del elemento especificado.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>elementos</var> = <var>elemento</var>.getElementsByTagNameNS(<var>espacioNombreURI</var>, <var>nombreLocal</var>)</pre> + +<ul> + <li><code>elementos</code> es una {{domxref("HTMLCollection")}} viva de elementos encontrados en el orden en el que aparecen en el árbol.</li> + <li><code>elemento</code> es el elemento desde el cual la búsqueda debería comenzar. Nótese que sólo los descendientes de este elemento están incluídos en la búsqueda, no el nodo en sí.</li> + <li><code>espacioNombreURI</code> es el URI del espacio de nombres de los elementos a buscar (vea {{domxref("Node.namespaceURI")}}). Por ejemplo, si usted necesita buscar elementos XHTML, use el URI de espacio de nombres de XHTML, <span class="nowiki"><code>http://www.w3.org/1999/xhtml</code></span>.</li> + <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">nombreLocal</span></font> puede ser el nombre local de los elementos a buscar o el valor especial <code>"*"</code>, que encuentra todos los elementos (vea {{domxref("Node.localName")}}).</li> +</ul> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush:js">// verifica la alineación en un número de celdas en una tabla en un documento XHTML. +var table = document.getElementById("forecast-table"); +var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td"); + +for (var i = 0; i < cells.length; i++) { + var axis = cells[i].getAttribute("axis"); + if (axis == "year") { + // obtiene los datos + } +}</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-element-getelementsbytagnamens', 'Element.getElementsByTagNameNS()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Cambió el valor devuelto de {{domxref("NodeList")}} a {{domxref("HTMLCollection")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Sin cambios desde {{SpecName('DOM2 Core')}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los 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>1.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>5.5</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td>getElementsByTagName("*")</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>6.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</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}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Inicialmente, este método devolvía una {{domxref("NodeList")}}; luego fue modificado para reflejar el cambio en la especificación.</p> + +<p>[2] El comportamiento de <code>element.getElementsByTagNameNS</code> cambió entre Firefox 3.5 y Firefox 3.6. En Firefox 3.5 y anteriores, esta función automáticamente convertía mayúsculas o minúsculas en las consultas, de manera que una búsqueda de "foo" encontraría "Foo" o "foo". En Firefox 3.6 y posteriores esta función es sensible a mayúsculas y minúsculas, por lo que una consulta por "foo" sólo encontrará "foo" y no "Foo". Para más información al respecto, por favor vea el <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=542185#c5">comentario de Henri Sivonen sobre este cambio</a>. También puede ver <a href="/en-US/docs/Case_Sensitivity_in_class_and_id_Names">la parte relevante del estándar, que establece qué partes de la API son sensibles a mayúsculas y minúsculas y qué partes no.</a></p> + +<p>Previo a Firefox 19, este método devolvía una {{domxref("NodeList")}}; luego fue modificado para reflejar el cambio en la especificación.</p> diff --git a/files/es/web/api/element/hasattribute/index.html b/files/es/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..ea7a38ddff --- /dev/null +++ b/files/es/web/api/element/hasattribute/index.html @@ -0,0 +1,123 @@ +--- +title: Element.hasAttribute() +slug: Web/API/Element/hasAttribute +translation_of: Web/API/Element/hasAttribute +--- +<div>{{APIRef("DOM")}}</div> + +<p>El método <strong><code>Elemento.hasAttribute()</code></strong> devuelve un valor <strong>Booleano</strong> indicando si el elemento tiene el atributo especificado o no.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: js"><var>var <em>resultado</em></var> = <em><var>elemento</var></em>.hasAttribute(<em><var>nombre</var></em>); +</pre> + +<dl> + <dt><code>resultado</code></dt> + <dd>contendrá el valor devuelto (<code>true</code> o <code>false)</code>.</dd> + <dt><code>nombre</code></dt> + <dd>consiste en una cadena de caracteres que representa el nombre del atributo a chequear.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush:js">var foo = document.getElementById("foo"); +if (foo.hasAttribute("bar")) { + // hacer algo +} +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush:js">;(function(prototype) { + prototype.hasAttribute = prototype.hasAttribute || function(name) { + return !!(this.attributes[name] && + this.attributes[name].specified); + } +})(Element.prototype); +</pre> + +<h2 id="Notas">Notas</h2> + +<div>{{DOMAttributeMethods}}</div> + +<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-element-hasattribute', 'Element.hasAttribute()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} to {{domxref("Element")}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No change from {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Initial definition.</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>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>8.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>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/api/element/id/index.html b/files/es/web/api/element/id/index.html new file mode 100644 index 0000000000..b75cd87e77 --- /dev/null +++ b/files/es/web/api/element/id/index.html @@ -0,0 +1,119 @@ +--- +title: Element.id +slug: Web/API/Element/id +tags: + - API + - DOM + - Elemento + - Propiedad + - Referencia +translation_of: Web/API/Element/id +--- +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<p>La propiedad <strong><code>Element.id</code></strong> representa el identificador del elemento, reflejando el atributo global de <strong><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></strong>.</p> + +<p>debe ser un único documento, y con frecuencia es utilizado para recuperar el elemento usando {{domxref("document.getElementById", "getElementById")}}. Otros usos comunes de <code>id</code> incluyen la utilización de elementos <a href="/en-US/docs/Web/CSS/ID_selectors" title="Web/CSS/ID_selectors">ID como un selector</a> cuando se está estilando el documento con <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: los identificadores distinguen mayúsculas y minúsculas, pero se debe evitar la creación de IDs que difieran solamente en la capitalization (ver <a href="/en-US/docs/Case_Sensitivity_in_class_and_id_Names" title="Case_Sensitivity_in_class_and_id_Names">diferenciación de mayúsculas y minúsculas en nombres y destacados </a>).</p> +</div> + +<h2 id="Syntax" name="Syntax">Síntasix</h2> + +<pre class="syntaxbox">var <em>idStr</em> = <em>elt</em>.id; // Get the id. +<em>elt</em>.id = <em>idStr; // Set the id</em> +</pre> + +<ul> + <li><em><code>idStr</code></em> es el identificador del elemento.</li> +</ul> + +<h2 id="Specification" name="Specification">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-element-id', 'id')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change from {{SpecName('DOM2 HTML')}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>No change from {{SpecName('DOM1')}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</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> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</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>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> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>La <a href="/en-US/docs/Web/HTML/Global_attributes/id"><strong>id </strong></a> del atributo global DOM.</li> +</ul> diff --git a/files/es/web/api/element/index.html b/files/es/web/api/element/index.html new file mode 100644 index 0000000000..a689499051 --- /dev/null +++ b/files/es/web/api/element/index.html @@ -0,0 +1,539 @@ +--- +title: element +slug: Web/API/Element +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element +--- +<p>{{ ApiRef("DOM") }} Este capítulo proporciona una breve explicación para los métodos generales, las propiedades y los eventos disponibles para los elementos HTML y XML en el DOM de Gecko.</p> + +<p>Varias especificaciones aplicadas a los elementos:</p> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/">Especificaciones esenciales del DOM</a> —describe las interfaces esenciales compartidas por la mayoría de los objetos DOM en los documentos HTML y XML.</li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/">Especificaciones HTML del DOM</a> —describe las interfaces para objetos en documentos HTML y XHTML construidos con la especificación base.</li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/">Especificiones de los eventos DOM</a> —describe los eventos compartidos por la mayoría de objetos DOM, construidos con las especificaciones y base DOM <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/">Opiniones</a>.</li> +</ul> + +<p>Los artículos listados aquí amplían lo antedicho e incluyen enlaces a la especificación apropiada del DOM de W3C.</p> + +<p>Mientras que estas interfaces son generalmente compartidas por la mayoría de los elementos HTML y XML, hay muchas más especiales para los objetos particulares listados en la especificación HTML del DOM —por ejemplo las interfaces del <a href="/es/DOM/table" title="es/DOM/table">elemento tabla de HTML</a> y <a href="/es/DOM/form" title="es/DOM/form">elemento formulario de HTML</a>.</p> + +<h3 id="Propiedades" name="Propiedades">Propiedades</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Nombre</th> + <th>Descripción</th> + <th>Tipo</th> + <th>Disponibilidad</th> + </tr> + <tr> + <td><code><a href="/es/DOM/element.attributes" title="es/DOM/element.attributes">attributes</a></code></td> + <td>Todos los atributos asociados a un elemento.</td> + <td><code><a href="/es/DOM/NamedNodeMap" title="es/DOM/NamedNodeMap">NamedNodeMap</a></code></td> + <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.childNodes" title="es/DOM/element.childNodes">childNodes</a></code></td> + <td>Todos los nodos hijos de un elemento.</td> + <td><code><a href="/es/DOM/NodeList" title="es/DOM/NodeList">Listado de nudo</a></code></td> + <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.className" title="es/DOM/element.className">className</a></code></td> + <td>La clase del elemento.</td> + <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a>, <a href="/es/XUL" title="es/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.clientHeight" title="es/DOM/element.clientHeight">clientHeight</a></code></td> + <td>El alto interior del elemento.</td> + <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.clientWidth" title="es/DOM/element.clientWidth">clientWidth</a></code></td> + <td>El ancho interior del elemento.</td> + <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.dir" title="es/DOM/element.dir">dir</a></code></td> + <td>La direccionalidad del elemento.</td> + <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a>, <a href="/es/XUL" title="es/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.firstChild" title="es/DOM/element.firstChild">firstChild</a></code></td> + <td>El primer hijo directo del elemento, <code>null</code> si no hay.</td> + <td><code><a href="/es/DOM/Node" title="es/DOM/Node">Nudo</a></code></td> + <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.id" title="es/DOM/element.id">id</a></code></td> + <td>La identificación del elemento.</td> + <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a>, <a href="/es/XUL" title="es/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.innerHTML" title="es/DOM/element.innerHTML">innerHTML</a></code></td> + <td>El contenido y el código que hay dentro del elemento.</td> + <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.lang" title="es/DOM/element.lang">lang</a></code></td> + <td>El lenguaje de los atributos, texto y contenidos del elemento.</td> + <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.lastChild" title="es/DOM/element.lastChild">lastChild</a></code></td> + <td>El último hijo directo del elemento, <code>null</code> si no hay.</td> + <td><code><a href="/es/DOM/Node" title="es/DOM/Node">Node</a></code></td> + <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.localName" title="es/DOM/element.localName">localName</a></code></td> + <td>La parte local del nombre cualificado del elemento.</td> + <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td> + <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td> + </tr> + <tr> + <th>Nombre</th> + <th>Descripción</th> + <th>Tipo</th> + <th>Disponibilidad</th> + </tr> + <tr> + <td><code><a href="/es/DOM/element.name" title="es/DOM/element.name">name</a></code></td> + <td>El nombre del elemento.</td> + <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="En/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.namespaceURI" title="es/DOM/element.namespaceURI">namespaceURI</a></code></td> + <td>El URI del espacio de nombre de ese nodo, <code>null</code> si no está especificado.</td> + <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="En/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td> + <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.nextSibling" title="es/DOM/element.nextSibling">nextSibling</a></code></td> + <td>El nodo inmediatamente posterior al primero dado en el árbol, <code>null</code> si no hay.</td> + <td><code><a href="/es/DOM/Node" title="es/DOM/Node">Nudo</a></code></td> + <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.nodeName" title="es/DOM/element.nodeName">nodeName</a></code></td> + <td>El nombre del nodo de ese elemento.</td> + <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="En/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td> + <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.nodeType" title="es/DOM/element.nodeType">nodeType</a></code></td> + <td>Un número que representa el tipo del nodo. Lo mismo que <code>1</code> para los elementos DOM.</td> + <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="En/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td> + <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.nodeValue" title="es/DOM/element.nodeValue">nodeValue</a></code></td> + <td>El valor del nodo. Lo mismo que <code>null</code> para los elementos DOM.</td> + <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="En/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td> + <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.offsetHeight" title="es/DOM/element.offsetHeight">offsetHeight</a></code></td> + <td>El alto de un elemento, tal cual está escrito en la composición.</td> + <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="En/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.offsetLeft" title="es/DOM/element.offsetLeft">offsetLeft</a></code></td> + <td>La distancia que hay desde el borde izquierdo del elemento al de su <code>offsetParent</code>.</td> + <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="En/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.offsetParent" title="es/DOM/element.offsetParent">offsetParent</a></code></td> + <td>El elemento del cual todos los cálculos de distancia son actualmente computados.</td> + <td><code><a href="/es/DOM/element" title="es/DOM/element">Elemento</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.offsetTop" title="es/DOM/element.offsetTop">offsetTop</a></code></td> + <td>La distancia desde el borde superior del elemento hasta el de su <code>offsetParent</code>.</td> + <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="En/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.offsetWidth" title="es/DOM/element.offsetWidth">offsetWidth</a></code></td> + <td>El ancho de un elemento, tal cual está escrito en la composición.</td> + <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="En/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.ownerDocument" title="es/DOM/element.ownerDocument">ownerDocument</a></code></td> + <td>El documento en el cual está ese nodo, <code>null</code> si no hay.</td> + <td><code><a href="/es/DOM/document" title="es/DOM/document">Documento</a></code></td> + <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td> + </tr> + <tr> + <th>Nombre</th> + <th>Descripción</th> + <th>Tipo</th> + <th>Disponibilidad</th> + </tr> + <tr> + <td><code><a href="/es/DOM/element.parentNode" title="es/DOM/element.parentNode">parentNode</a></code></td> + <td>El elemento original(padre) de ese nodo, <code>null</code> si no hay dentro del <a href="/es/DOM/document" title="es/DOM/document">documento de DOM</a>.</td> + <td><code><a href="/es/DOM/Node" title="es/DOM/Node">Nudo</a></code></td> + <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.prefix" title="es/DOM/element.prefix">prefix</a></code></td> + <td>El prefijo del espacio de nombre del nodo, <code>null</code> si no está especificado.</td> + <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="En/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td> + <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.previousSibling" title="es/DOM/element.previousSibling">previousSibling</a></code></td> + <td>El nodo inmediatamente anterior al primero dado en el árbol , <code>null</code> si no hay.</td> + <td><code><a href="/es/DOM/Node" title="es/DOM/Node">Nudo</a></code></td> + <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.scrollHeight" title="es/DOM/element.scrollHeight">scrollHeight</a></code></td> + <td>Muestra la altura de deslizamiento del elemento.</td> + <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="En/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.scrollLeft" title="es/DOM/element.scrollLeft">scrollLeft</a></code></td> + <td>Obtiene/establece el offset de scroll izquierdo de un elemento.</td> + <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.scrollTop" title="es/DOM/element.scrollTop">scrollTop</a></code></td> + <td>Obtiene/establece el offset de scroll superior de un elemento.</td> + <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.scrollWidth" title="es/DOM/element.scrollWidth">scrollWidth</a></code></td> + <td>Muestra el ancho de deslizamiento de un elemento.</td> + <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/Es/DOM/Element.style" title="Es/DOM/Element.style">style</a></code></td> + <td>Un objeto representando las declaraciones de los atributos de estilo del elemento.</td> + <td><code><a href="/es/DOM/CSSStyleDeclaration" title="es/DOM/CSSStyleDeclaration">Estilo CSS</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a>, <a href="/es/XUL" title="es/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.tabIndex" title="es/DOM/element.tabIndex">tabIndex</a></code></td> + <td>Obtiene/establece la posición del elemento en el órden de tabulación.</td> + <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="En/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.tagName" title="es/DOM/element.tagName">tagName</a></code></td> + <td>El nombre de la etiqueta para el elemento dado.</td> + <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="En/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td> + <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.textContent" title="es/DOM/element.textContent">textContent</a></code></td> + <td>Obtiene/establece los contenidos textuales de un elemento y todos sus descendentes.</td> + <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="En/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td> + <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td> + </tr> + </tbody> +</table> + +<h3 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Nombre y Descripción</th> + <th>Devuelve</th> + <th>Disponible</th> + </tr> + <tr> + <td><code><a href="/es/DOM/element.addEventListener" title="es/DOM/element.addEventListener">addEventListener</a>( <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="En/Core_JavaScript_1.5_Reference/Global_Objects/String">type</a>, <a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/JavaScript/Reference/Global_Objects/Function">handler</a>, <a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global_Objects/Boolean">bubble</a>)</code><br> + Registra un controlador de evento para un tipo de evento específico en un elemento.</td> + <td>-</td> + <td><small><a href="/es/DOM/event" title="es/DOM/event">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Node/appendChild" title="es/DOM/element.appendChild">appendChild</a>( <a href="/es/DOM/Node" title="es/DOM/Node">appendedNode</a> )</code><br> + Inserta un nodo así como el último nodo hijo de este elemento.</td> + <td><a href="/es/DOM/Node" title="es/DOM/Node">Node</a></td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.blur" title="es/DOM/element.blur">blur</a>()</code><br> + Quita el foco del teclado del elemento actual.</td> + <td>-</td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a>, <a href="/es/XUL" title="es/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.click" title="es/DOM/element.click">click</a>()</code><br> + Simula un clic sobre el elemento actual.</td> + <td>-</td> + <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a>, <a href="/es/XUL" title="es/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Node/cloneNode" title="es/DOM/element.cloneNode">cloneNode</a>( <a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global_Objects/Boolean">deep</a>)</code><br> + Hace copia de un nudo, y opcionalmente, de todo sus contenidos</td> + <td><a href="/es/DOM/Node" title="es/DOM/Node">Node</a></td> + <td><small>para <a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/DOM/element.dispatchEvent" title="es/DOM/element.dispatchEvent">dispatchEvent</a>( <a href="/es/DOM/event" title="es/DOM/event">event</a> )</code><br> + Envía un evento a este nodo en el DOM.</td> + <td><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/getAttribute" title="es/DOM/element.getAttribute">getAttribute</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Devuelve el valor de un atributo nombrado desde el nodo actual.</td> + <td><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Object" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a></td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/getAttributeNS" title="es/DOM/element.getAttributeNS">getAttributeNS</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Devuelve el valor del atributo con el nombre especificado, desde el nodo actual.</td> + <td><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Object" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a></td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/getAttributeNode" title="es/DOM/element.getAttributeNode">getAttributeNode</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Devuelve la representación del nodo del atributo nombrado desde el nodo actual.</td> + <td><a href="/es/DOM/Attr" title="es/DOM/Attr">Attr</a></td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/getAttributeNodeNS" title="es/DOM/element.getAttributeNodeNS">getAttributeNodeNS</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Devuelve la representación del nodo del atributo con el nombre especificado, desde el nodo actual.</td> + <td><a href="/es/DOM/Attr" title="es/DOM/Attr">Attr</a></td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <th>Nombre y Descripción</th> + <th>Devuelve</th> + <th>Disponibilidad</th> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/getElementsByTagName" title="es/DOM/element.getElementsByTagName">getElementsByTagName</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Devuelve un conjunto de todos los elementos descendentes, de un nombre de etiqueta particular, desde el elemento actual.</td> + <td><a href="/es/DOM/NodeSet" title="es/DOM/NodeSet">NodeSet</a></td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/getElementsByTagNameNS" title="es/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Devuelve un conjunto de todos los elementos descendentes, de un nombre de etiqueta y espacio particular, desde el elemento actual.</td> + <td><a href="/es/DOM/NodeSet" title="es/DOM/NodeSet">NodeSet</a></td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/hasAttribute" title="es/DOM/element.hasAttribute">hasAttribute</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Verifica si el elemento tiene el atributo especificado o no.</td> + <td><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/hasAttributeNS" title="es/DOM/element.hasAttributeNS">hasAttributeNS</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Verifica si el elemento tiene el atributo especificado, en el nombre de espacio especificado o no.</td> + <td><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/hasAttributes" title="es/DOM/element.hasAttributes">hasAttributes</a>()</code><br> + Verifica si el elemento tiene o no algún atributo.</td> + <td><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Node/hasChildNodes" title="es/DOM/element.hasChildNodes">hasChildNodes</a>()</code><br> + Verifica si el elemento tiene nodos hijos o no.</td> + <td><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Node/insertarAntes" title="es/DOM/element.insertBefore">insertBefore</a>( <a href="/es/DOM/Node" title="es/DOM/Node">insertedNode</a>, <a href="/es/DOM/Node" title="es/DOM/Node">adjacentNode</a> )</code><br> + Inserta el primer nodo antes que el segundo, Nodo hijo en el DOM.</td> + <td><a href="/es/DOM/Node" title="es/DOM/Node">Node</a></td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Node/normalize" title="es/DOM/element.normalize">normalize</a>()</code><br> + Limpia todos los nodos de texto debajo de este elemento (une lo adyacente, quita lo vacío).</td> + <td>-</td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/removeAttribute" title="es/DOM/element.removeAttribute">removeAttribute</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Quita el atributo nombrado desde el nodo actual.</td> + <td>-</td> + <td><small><a href="/es/DOM" title="es/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/removeAttributeNS" title="es/DOM/element.removeAttributeNS">removeAttributeNS</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Quita el atributo con el nombre y nombre de espacio especificado desde el nodo actual.</td> + <td>-</td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <th>Nombre y Descripción</th> + <th>Devuelve</th> + <th>Disponibilidad</th> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/removeAttributeNode" title="es/DOM/element.removeAttributeNode">removeAttributeNode</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Quita la representación del nodo del atributo nombrado desde el nodo actual.</td> + <td>-</td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Node/removeChild" title="es/DOM/element.removeChild">removeChild</a>( <a href="/es/DOM/Node" title="es/DOM/Node">removedNode</a> )</code><br> + Quita el nodo hijo desde el elemento actual.</td> + <td><a href="/es/DOM/Node" title="es/DOM/Node">Node</a></td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/removeEventListener" title="es/DOM/element.removeEventListener">removeEventListener</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">type</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Function" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Function">handler</a> )</code><br> + Quita un oyente de evento desde el elemento.</td> + <td>-</td> + <td><small><a href="/es/DOM/event" title="es/DOM/event">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Node/replaceChild" title="es/DOM/element.replaceChild">replaceChild</a>( <a href="/es/DOM/Node" title="es/DOM/Node">insertedNode</a>, <a href="/es/DOM/Node" title="es/DOM/Node">replacedNode</a> )</code><br> + Reemplaza un nodo hijo en el elemento actual con otro.</td> + <td><a href="/es/DOM/Node" title="es/DOM/Node">Node</a></td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/scrollIntoView" title="es/DOM/element.scrollIntoView">scrollIntoView</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">alignWithTop</a> )</code><br> + Recorre la página hasta que el elemento se obtiene en la vista.</td> + <td>-</td> + <td><small><a href="/es/HTML" title="es/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/setAttribute" title="Es/DOM/Element.setAttribute">setAttribute</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Object" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Object">value</a> )</code><br> + Establece el valor de un atributo nombrado desde el nodo actual.</td> + <td>-</td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/setAttributeNS" title="es/DOM/element.setAttributeNS">setAttributeNS</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Object" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Object">value</a> )</code><br> + Establece el valor del atributo con el nombre y nombre de espacio especificado desde el nodo actual.</td> + <td>-</td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/setAttributeNode" title="es/DOM/element.setAttributeNode">setAttributeNode</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a>, <a href="/es/DOM/Attr" title="es/DOM/Attr">attrNode</a> )</code><br> + Establece la representación del nodo del atributo nombrado desde el nodo actual.</td> + <td>-</td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + <tr> + <td><code><a href="/es/docs/Web/API/Element/setAttributeNodeNS" title="es/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a>, <a href="/es/DOM/Attr" title="es/DOM/Attr">attrNode</a> )</code><br> + Establece la representación del nodo del atributo con el nombre y nombre de espacio especificado desde el nodo actual.</td> + <td>-</td> + <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td> + </tr> + </tbody> +</table> + +<h3 id="Eventos" name="Eventos">Eventos</h3> + +<p>Son propiedades correspondientes a los atributos del evento "on" en HTML.</p> + +<p>A diferencia de los atributos correspondientes, los valores de esas propiedades son funciones (o cualquier otro objeto trabajando con la interfaz <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener">EventListener</a>) más bien que una cadena de carácteres. En efecto, asignar un atributo de evento en HTML crea una función envolvente alrededor del código especificado. Por ejemplo, el siguiente HTML:</p> + +<pre><div onclick="foo();">clic aquí!</div> +</pre> + +<p>Si <code>element</code> es una referencia a esta <code>div</code>, el valor de <code>element.onclick</code> será:</p> + +<pre>function onclick(event) { + foo(); +} +</pre> + +<p>El objeto <a href="/es/DOM/event" title="es/DOM/event">event</a> es pasado al parámetro <code>event</code> de esta función envolvente.</p> + +<dl> + <dt><a href="/es/DOM/element.onblur" title="es/DOM/element.onblur">onblur</a> - (al quitar el foco)</dt> + <dd>Devuelve el código de manejo de evento para el evento <code>blur</code>.</dd> +</dl> + +<dl> + <dt><a href="/es/DOM/element.onchange" title="es/DOM/element.onchange">onchange</a> - (al modificar)</dt> + <dd>Devuelve el código de manejo de evento para el evento <code>change</code>.</dd> +</dl> + +<dl> + <dt><a href="/es/DOM/element.onclick" title="es/DOM/element.onclick">onclick</a> - (al hacer clic)</dt> + <dd>Devuelve el código de manejo de evento para el evento <code>onclick</code>.</dd> +</dl> + +<dl> + <dt><a href="/es/DOM/element.ondblclick" title="es/DOM/element.ondblclick">ondblclick</a> - (al hacer doble clic)</dt> + <dd>Devuelve el código de manejo de evento para el evento <code>ondblclick</code>.</dd> +</dl> + +<dl> + <dt><a href="/es/DOM/element.onfocus" title="es/DOM/element.onfocus">onfocus</a> - (al poner el foco)</dt> + <dd>Devuelve el código de manejo de evento para el evento <code>onfocus</code>.</dd> +</dl> + +<dl> + <dt><a href="/es/DOM/element.onkeydown" title="es/DOM/element.onkeydown">onkeydown</a> - (al tener una tecla apretada)</dt> + <dd>Devuelve el código de manejo de evento para el evento <code>onkeydown</code>.</dd> +</dl> + +<dl> + <dt><a href="/es/DOM/element.onkeypress" title="es/DOM/element.onkeypress">onkeypress</a> - (al apretar una tecla)</dt> + <dd>Devuelve el código de manejo de evento para el evento <code>onkeypress</code>.</dd> +</dl> + +<dl> + <dt><a href="/es/DOM/element.onkeyup" title="es/DOM/element.onkeyup">onkeyup</a> - (al soltar una tecla)</dt> + <dd>Devuelve el código de manejo de evento para el evento <code>onkeyup</code>.</dd> +</dl> + +<dl> + <dt><a href="/es/DOM/element.onmousedown" title="es/DOM/element.onmousedown">onmousedown</a> - (al tener el botón del ratón apretado)</dt> + <dd>Devuelve el código de manejo de evento para el evento <code>onmousedown</code>.</dd> +</dl> + +<dl> + <dt><a href="/es/DOM/element.onmousemove" title="es/DOM/element.onmousemove">onmousemove</a> - (al mover el ratón)</dt> + <dd>Devuelve el código de manejo de evento para el evento <code>onmousemove</code>.</dd> +</dl> + +<dl> + <dt><a href="/es/DOM/element.onmouseout" title="es/DOM/element.onmouseout">onmouseout</a> - (al quitar el puntero del ratón)</dt> + <dd>Devuelve el código de manejo de evento para el evento <code>onmouseout</code>.</dd> +</dl> + +<dl> + <dt><a href="/es/DOM/element.onmouseover" title="es/DOM/element.onmouseover">onmouseover</a> - (al pasar el ratón encima)</dt> + <dd>Devuelve el código de manejo de evento para el evento <code>onmouseover</code>.</dd> +</dl> + +<dl> + <dt><a href="/es/DOM/element.onmouseup" title="es/DOM/element.onmouseup">onmouseup</a> - (al soltar el botón del ratón)</dt> + <dd>Devuelve el código de manejo de evento para el evento <code>onmouseup</code>.</dd> +</dl> + +<dl> + <dt><a href="/es/DOM/element.onresize" title="es/DOM/element.onresize">onresize</a> - (al re-dimensionar la pantalla)</dt> + <dd>Devuelve el código de manejo de evento para el evento <code>onresize</code>.</dd> +</dl> diff --git a/files/es/web/api/element/innerhtml/index.html b/files/es/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..b0e9552b47 --- /dev/null +++ b/files/es/web/api/element/innerhtml/index.html @@ -0,0 +1,151 @@ +--- +title: element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - API + - DOM + - Gecko + - Propiedad + - Referencia +translation_of: Web/API/Element/innerHTML +--- +<p>{{APIRef("DOM")}}</p> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La propiedad <strong><code>Element.innerHTML</code></strong> devuelve o establece la sintaxis HTML describiendo los descendientes del elemento.</p> + +<p>Al establecerse se reemplaza la sintaxis HTML del elemento por la nueva.</p> + +<div class="note"><strong>Nota: </strong>Si un nodo tiene un texto secundario que incluye los caracteres <code>(&), (<),</code> o <code>(>)</code>, <code>innerHTML</code> devuelve estos caracteres como &amp, &lt y &gt respectivamente. Use {{ domxref("Node.textContent") }} para conseguir una copia correcta del contenido de estos nodos de texto.</div> + +<p>Para <strong>insertar el código HTML</strong> en el documento en lugar de cambiar el contenido de un elemento, use el método <a href="https://developer.mozilla.org/es/docs/Web/API/Element/insertAdjacentHTML">insertAdjacentHTML().</a></p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><em>const content</em> = <em>element</em>.innerHTML; + +<em>element</em>.innerHTML = <em>htmlString</em>;</pre> + +<h3 class="brush: js" id="Valor">Valor</h3> + +<p>La variable constante <code>content</code> contiene un <a href="https://developer.mozilla.org/es/docs/Web/API/DOMString">DOMString</a> que contiene el código HTML serializado describiendo todos los descendientes de <code>element</code>. Cuando se establece el valor de innerHTML, <strong>se eliminan todos los descendientes de <code>element</code></strong>, analiza la cadena <code>htmString</code> y asigna los nodos resultantes como descendientes de <code>element</code>.</p> + +<h3 id="Excepciones">Excepciones</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>Se intentó establecer el valor de <code>innerHTML</code> utilizando una cadena que no está formada correctamente en HTML</dd> + <dt><code>NoModificationAllowedError</code></dt> + <dd>Se intentó insertar el código HTML en un nodo cuyo elemento primario es <a href="https://developer.mozilla.org/es/docs/Web/API/Document">document</a>.</dd> +</dl> + +<h2 id="Notes" name="Notes">Notas de uso</h2> + +<p>La propiedad <code>innerHTML</code> de muchos tipos de elementos—incluyendo {{ HTMLElement("body") }} o {{ HTMLElement("html") }}—puede ser devuelta o establecida. Esta propiedad se puede usar para ver el código HTML de la página actual, incluida la que haya sido modificada dinámicamente:</p> + +<h3 id="Devolver_la_sintaxis_HTML_de_un_elemento">Devolver la sintaxis HTML de un elemento</h3> + +<p>Devolver el valor de <code>innerHTML</code><font><font>hace que el agente de usuario serialice el fragmento HTML compuesto por los descendientes del elemento. </font><font>La cadena resultante es devuelta.</font></font></p> + +<pre><em>const content</em><code> = </code><em>element</em>.innerHTML; +</pre> + +<p>Esto le permite ver la sintaxis HTML de los nodos contenidos en el elemento.</p> + +<h3 id="Reemplazar_el_contenido_de_un_elemento">Reemplazar el contenido de un elemento</h3> + +<p>Esta propiedad proporciona una forma sencilla de cambiar completamente los contenidos de un elemento por contenido nuevo. Por ejemplo, los contenidos completos del cuerpo del documento se pueden borrar así:</p> + +<pre class="brush: js">document.body.innerHTML = ""; // Reemplaza el contenido de <body> con una cadena vacía +</pre> + +<p>El siguiente ejemplo recupera la sintaxis HTML actual del documento y reemplaza los caracteres "<code><</code>" con la entidad HTML "<code>&lt;</code>", convirtiendo esencialmente el HTML en texto plano. Esto luego se envuelve en un elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre"><pre></a>. Entonces el valor de innerHTML se cambia a esta nueva cadena. Como resultado, se muestra en pantalla el código fuente completo de la página.</p> + +<pre><code>document.documentElement.innerHTML = "<pre>" + + document.documentElement.innerHTML.replace(/</g,"&lt;") + + "</pre>";</code> +</pre> + +<div class="note"> +<p>Esta propiedad fue inicialmente implementada por navegadores web, y luego especificada por el WHATWG y el W3C en HTML5. Implementaciones antiguas no la implementarán exactamente igual. Por ejemplo, cuando el texto es ingresado en una caja de <strong>texto multilinea (elemento <code>textarea</code>)</strong>, Internet Explorer <font><font>cambiará el valor de la propiedad <code>innerHTML</code> del </font></font><strong>elemento <code>textarea</code></strong><font><font>, mientras que los navegadores Gecko no lo hacen.</font></font></p> +</div> + +<h3 id="Consideración_de_seguridad">Consideración de seguridad</h3> + +<p>No es extraño que <code>innerHTML</code> sea usado para introducir texto en una página web. Esto añade un riesgo de seguridad.</p> + +<pre class="brush: js">//ejemplo 1 +var name = "Juan"; +// asumiendo que 'el' es un elemento de HTML DOM +el.innerHTML = name; // sin peligro + +// ... + +//ejemplo 2 +name = "<script>alert('Soy Juan con una alerta molesta!')</script>"; +el.innerHTML = name; // fíjese que<span id="result_box" lang="es"> <span class="hps">el</span> <span class="hps">texto</span> <span class="hps">es molesto</span> <span class="hps">y no es realmente</span> <span class="hps">lo que se esperaba</span><span>.</span></span> +</pre> + +<p>Aunque esto, el ejemplo 2, puede parecer un ataque <a class="external" href="http://en.wikipedia.org/wiki/Cross-site_scripting">cross-site scripting</a>, <strong>el resultado es inofensivo</strong>, ya que HTML5 especifica que un tag <code><a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/script"><script></a> </code>insertado a través innerHTML <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">no debe ejecutarse</a>.</p> + +<p>Sin embargo, hay maneras de ejecutar JavaScript sin necesidad de utilizar el elemento <code><script></code>, por lo que todavía hay un riesgo de seguridad cada vez que se utiliza <code>innerHTML</code> para establecer cadenas de texto sobre las que no tiene control. Por ejemplo:</p> + +<pre class="brush: js">const name = "<img src='x' onerror='alert(1)'>"; +el.innerHTML = name; // con peligro, la alerta ahora si es mostrada</pre> + +<p>Por esa razón, cuando solo tratamos con texto, es recomendable no usar <code>innerHTML</code>, sino <a href="/En/DOM/Node.textContent">Node.textContent</a>, que no interpretará la cadena pasada como HTML, sino como texto plano.</p> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="brush: html"><!doctype html> +<html> + <head> + <meta charset="utf-8"> + <title>Documento sin título</title> + </head> + <body> + <div id="txt"> + <p>primer parrafo hijo de div id="txt"</p> + <p>segundo parrafo hijo de id="txt" txt</p> + </div> + </body> +</html></pre> + +<pre class="brush: js">txt = document.getElementById("txt"); +console.log(txt.innerHTML); +/* +La siguiente cadena (string) se muestra en la ventana de la consola: +<p>primer parrafo hijo de div id="txt"</p> +<p>segundo parrafo hijo de id="txt" txt</p> +*/</pre> + +<h2 id="Specification" name="Specification">Especificaciones</h2> + +<ul> + <li>W3C's HTML 5 <code>innerHTML</code> para <a class="external" href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0" title="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">documentos </a><a class="external" href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0" title="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">HTML</a></li> + <li>W3C's HTML 5 <code>innerHTML</code> para <a class="external" href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml1" title="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml1">documentos </a><a class="external" href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml1" title="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml1">XHTML</a></li> +</ul> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li><code><a class="external" href="http://innerdom.sourceforge.net/">innerDOM</a></code> - Para aquellos que desean adherirse a los estándares, aquí hay un conjunto de funciones JavaScript que ofrecen serializar o analizar XML para así establecer contenidos de elementos definidos como cadena(s) via el DOM o para conseguir contenidos de elementos obtenidos del DOM como cadenas.</li> + <li><a class="external" href="http://code.google.com/p/jssaxparser/" title="http://code.google.com/p/jssaxparser/">jssaxparser</a> - Una solución más robusta (aunque más pesada) que innerDOM (soporta análisis con espacios de nombres, atributos entre comillas simples, secciones CDATA, etc) es este analizador SAX2 cuando se utiliza con su manejador de contenido DOM. (Ofrece String to DOM, DOM to string es <a class="external" href="http://code.assembla.com/brettz9/subversion/nodes/DOMToString" title="http://code.assembla.com/brettz9/subversion/nodes/DOMToString">significativamente más fácil</a>)</li> +</ul> + +<div class="s3gt_translate_tooltip_mini_box" id="s3gt_translate_tooltip_mini" style="background: initial !important; border: initial !important; border-radius: initial !important; border-collapse: initial !important; direction: ltr !important; font-weight: initial !important; height: initial !important; letter-spacing: initial !important; max-width: initial !important; min-height: initial !important; margin: auto !important; outline: initial !important; padding: initial !important; position: absolute; text-align: initial !important; text-shadow: initial !important; width: initial !important; display: initial !important; color: inherit !important; font-size: 13px !important; font-family: X-LocaleSpecific, sans-serif, Tahoma, Helvetica !important; line-height: 13px !important; vertical-align: top !important; white-space: inherit !important; left: 163px; top: 957px; opacity: 0.85;"> +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div> + +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Escuchar"> </div> + +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copiar texto al Portapapeles"> </div> +</div> + +<div class="s3gt_translate_tooltip_mini_box" id="s3gt_translate_tooltip_mini" style="background: initial !important; border: initial !important; border-radius: initial !important; border-collapse: initial !important; direction: ltr !important; font-weight: initial !important; height: initial !important; letter-spacing: initial !important; max-width: initial !important; min-height: initial !important; margin: auto !important; outline: initial !important; padding: initial !important; position: absolute; text-align: initial !important; text-shadow: initial !important; width: initial !important; display: initial !important; color: inherit !important; font-size: 13px !important; font-family: X-LocaleSpecific, sans-serif, Tahoma, Helvetica !important; line-height: 13px !important; vertical-align: top !important; white-space: inherit !important; left: 503px; top: 778px; opacity: 0.15;"> +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div> + +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Escuchar"> </div> + +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copiar texto al Portapapeles"> </div> +</div> diff --git a/files/es/web/api/element/insertadjacentelement/index.html b/files/es/web/api/element/insertadjacentelement/index.html new file mode 100644 index 0000000000..4f06780e1e --- /dev/null +++ b/files/es/web/api/element/insertadjacentelement/index.html @@ -0,0 +1,115 @@ +--- +title: Element.insertAdjacentElement() +slug: Web/API/Element/insertAdjacentElement +translation_of: Web/API/Element/insertAdjacentElement +--- +<p>{{APIRef("DOM")}}</p> + +<p>El método <strong><code>insertAdjacentElement()</code></strong> inserta un elemento nodo dado en una posición dada con respecto al elemento sobre el que se invoca.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="notranslate"><em>elementoObjetivo</em>.insertAdjacentElement(<em>posición</em>, <em>elemento</em>);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>posición</code></dt> + <dd>Un {{domxref("DOMString")}} representando la posición relativa al <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">elementoObjetivo</span></font>; debe ser una de las siguientes cadenas: + <ul> + <li><code style="color: red;">'beforebegin'</code>: Antes del <code>elementoObjetivo</code>.</li> + <li><code style="color: green;">'afterbegin'</code>: Dentro del <code>elementoObjetivo</code>, antes de su primer hijo.</li> + <li><code style="color: blue;">'beforeend'</code>: Dentro del <code>elementoObjetivo</code>, después de su último hijo.</li> + <li><code style="color: magenta;">'afterend'</code>: Después del <code>elementoObjetivo</code>.</li> + </ul> + </dd> + <dt><code>elemento</code></dt> + <dd>El elemento HTML a ser insertado.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>El elemento insertado o <code>null</code>, si la inserción falla.</p> + +<h3 id="Excepciones">Excepciones</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Excepción</th> + <th scope="col">Explicación</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>SyntaxError</code></td> + <td>La <code>posición</code> especificada no tiene un valor reconocido.</td> + </tr> + <tr> + <td><code>TypeError</code></td> + <td>El <code>elemento</code> especificado no es un elemento válido.</td> + </tr> + </tbody> +</table> + +<h3 id="Visualización_de_los_nombres_de_posición">Visualización de los nombres de posición</h3> + +<pre class="notranslate"><!-- <strong><code style="color: red;">beforebegin</code></strong> --> +<code style="font-weight: bold;"><p></code> + <!-- <strong><code style="color: green;">afterbegin</code></strong> --> + foo + <!-- <strong><code style="color: blue;">beforeend</code></strong> --> +<code style="font-weight: bold;"></p></code> +<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> + +<div class="note"><strong>Nota:</strong> Las posiciones <code>beforebegin</code> y <code>afterend</code> sólo funcionan si el nodo está en un árbol y tiene un padre.</div> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="brush: js notranslate">beforeBtn.addEventListener('click', function() { + var tempDiv = document.createElement('div'); + tempDiv.style.backgroundColor = randomColor(); + activeElem.insertAdjacentElement('beforebegin',tempDiv); + setListener(tempDiv); +}); + +afterBtn.addEventListener('click', function() { + var tempDiv = document.createElement('div'); + tempDiv.style.backgroundColor = randomColor(); + activeElem.insertAdjacentElement('afterend',tempDiv); + setListener(tempDiv); +});</pre> + +<p>Mira nuestro <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html">insertAdjacentElement.html</a> demo en Github (mira el<a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html"> código fuente</a> también.) Aquí tenemos una secuencia de elementos {{htmlelement("div")}} dentro de un contenedor. Cuando uno es clickeado, se torna en seleccionado y tu puedes presionar los botones <em>Insert before</em> e <em>Insert after</em> para insertar nuevos divs antes o despues del elemento seleccionado usando <code>insertAdjacentElement()</code>.</p> + +<h2 id="Specification" name="Specification">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-element-insertadjacentelement', 'insertAdjacentElement()')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad con Navegadores</h2> + +<p>{{Compat("api.Element.insertAdjacentElement")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>{{domxref("Element.insertAdjacentHTML()")}}</li> + <li>{{domxref("Element.insertAdjacentText()")}}</li> + <li>{{domxref("Node.insertBefore()")}} (similar to <code>beforebegin</code>, with different arguments)</li> + <li>{{domxref("Node.appendChild()")}} (mismo efecto que <code>beforeend</code>)</li> +</ul> diff --git a/files/es/web/api/element/insertadjacenthtml/index.html b/files/es/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..03be31a430 --- /dev/null +++ b/files/es/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,99 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +tags: + - API + - Cambiando el DOM + - DOM + - HTML + - Insertando Elementos + - Insertando Nodos + - Referencia + - insertAdjacentHTML + - metodo +translation_of: Web/API/Element/insertAdjacentHTML +--- +<div>{{APIRef("DOM")}}</div> + +<p>EL método <strong><code>insertAdjacentHTML()</code></strong> de la interfaz {{domxref("Element")}} analiza la cadena de texto introducida como cadena HTML o XML e inserta al árbol DOM los nodos resultantes de dicho análisis en la posición especificada. Este método no re-analiza el elemento sobre el cual se está invocando y por lo tanto no corrompe los elementos ya existentes dentro de dicho elemento. Esto evita el paso adicional de la serialización, haciéndolo mucho más rápido que la manipulación directa con {{domxref("Element.innerHTML", "innerHTML")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>element</em>.insertAdjacentHTML(<em>posición</em>, <em>texto</em>);</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code><strong>posición</strong></code></dt> + <dd>Un {{domxref("DOMString")}} que representa la posición relativa al <code>elemento</code>, y deberá ser una de las siguientes cadenas: + <ul> + <li><code style="color: red;">'beforebegin'</code>: Antes que el propio <code>elemento</code>.</li> + <li><code style="color: green;">'afterbegin'</code>: Justo dentro del <code>elemento</code>, antes de su primer elemento hijo.</li> + <li><code style="color: blue;">'beforeend'</code>: Justo dentro del <code>elemento</code>, después de su último elemento hijo.</li> + <li><code style="color: magenta;">'afterend'</code>: Después del propio <code>elemento</code>.</li> + </ul> + </dd> + <dt><code>texto</code></dt> + <dd>Es la cadena a ser analizada como HTML o XML e insertada en el árbol.</dd> +</dl> + +<h3 id="Visualizacion_de_las_posiciones">Visualizacion de las posiciones</h3> + +<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> +<code style="font-weight: bold;"><p></code> + <!-- <strong><code style="color: green;">afterbegin</code></strong> --> + foo + <!-- <strong><code style="color: blue;">beforeend</code></strong> --> +<code style="font-weight: bold;"></p></code> +<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> + +<div class="note"><strong>Nota: </strong>Las posiciones <code>beforebegin</code> y <code>afterend</code> funcionan únicamente si el nodo se encuentra en el árbol DOM y tiene un elemento padre.</div> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: js">// <div id="one">one</div> +var d1 = document.getElementById('one'); +d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); + +// En este punto, la nueva estructura es: +// <div id="one">one</div><div id="two">two</div></pre> + +<h2 id="Notas">Notas</h2> + +<h3 id="Consideraciones_de_seguridad">Consideraciones de seguridad</h3> + +<p>Cuando se inserte texto HTML en una página usando <code>insertAdjacentHTML()</code> debe tener cuidado de no usar cadenas de texto que no contengan las secuencias de escape pertinentes según sea el caso.</p> + +<p>Se recomienda no usar <code>insertAdjacentHTML()</code> cuando se pretende insertar texto plano; en su lugar, se debe utilizar la propiedad {{domxref("Node.textContent")}} o el método {{domxref("Element.insertAdjacentText()")}}. Este método no interpreta el contenido pasado como HTML, si no que lo inserta como texto plano.</p> + +<h2 id="Especificación">Especificación</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 Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td> + <td>{{ Spec2('DOM Parsing') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("api.Element.insertAdjacentHTML")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("Element.insertAdjacentText()")}}</li> + <li>{{domxref("XMLSerializer")}}: Contruir una representación del DOM de un texto XML</li> + <li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> por Henri Sivonen incluye puntos de referencia mostrando que insertAdjacentHTML puede ser mucho más rápido en algunos casos.</span></li> +</ul> diff --git a/files/es/web/api/element/localname/index.html b/files/es/web/api/element/localname/index.html new file mode 100644 index 0000000000..0876729853 --- /dev/null +++ b/files/es/web/api/element/localname/index.html @@ -0,0 +1,152 @@ +--- +title: Element.localName +slug: Web/API/Element/localName +tags: + - API + - Compatibilidad de los Navegadores en Móviles + - Compatibilidad de los navegadores + - DOM + - Propiedad + - Referencia +translation_of: Web/API/Element/localName +--- +<div>{{APIRef("DOM")}}</div> + +<p>La propiedad únicamente de lectura <code><strong>Element.localName</strong></code> devuelve la parte local del nombre calificado de un objeto.</p> + +<div class="note"> +<p>Antes de DOM4 esta API fué definida dentro de la interfaz{{domxref("Node")}}.</p> +</div> + +<h2 id="Sintasix">Sintasix</h2> + +<pre class="syntaxbox"><var>name</var> = <var>element</var>.localName +</pre> + +<h3 id="Valor_de_Retorno">Valor de Retorno</h3> + +<p> {{domxref("DOMString")}} <span id="result_box" lang="es"><span>que representa la parte</span> <span>local del</span> <span>nombre cualificado</span> <span>del elemento.</span></span></p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>(debe ser servido con contenido tipo XML , como <code>text/xml</code> o <code>application/xhtml+xml</code>.)</p> + +<pre class="brush:xml"><html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> + <script type="application/javascript"><![CDATA[ + function test() { + var text = document.getElementById('text'); + var circle = document.getElementById('circle'); + + text.value = "<svg:circle> has:\n" + + "localName = '" + circle.localName + "'\n" + + "namespaceURI = '" + circle.namespaceURI + "'"; + } + ]]></script> +</head> +<body onload="test()"> + <svg:svg version="1.1" + width="100px" height="100px" + viewBox="0 0 100 100"> + <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> + </svg:svg> + <textarea id="text" rows="4" cols="55"/> +</body> +</html> +</pre> + +<h2 id="Notas">Notas</h2> + +<p><span id="result_box" lang="es"><span>El nombre local</span> <span>de un nodo</span> <span>es la parte del</span> <span>nombre completo</span> <span>del</span> <span>nodo que</span> <span>va situado después de</span> <span>los dos puntos.</span> <span>Nombres calificados</span> <span>se utilizan normalmente en</span> <span>XML</span> <span>como parte</span> <span>del espacio de los nombres</span> <span>(s)</span> <span>de los</span> <span>documentos particulares XML</span> <span>.</span> <span>Por ejemplo</span><span>,</span> <span>en el nombre</span> calificado <span>ecomm</span> <span>:</span> <span>socios</span><span>,</span> <span>socios</span> <span>es el nombre</span> <span>local y</span> <span>ecomm</span> <span>es</span> <span>el prefijo</span><span>:</span></span></p> + +<pre class="brush:xml line-numbers language-xml"><code class="language-xml"><span class="tag token"><span class="tag token"><span class="punctuation token">1 <</span><span class="namespace token">ecomm:</span>business</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soda_shop<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>brick_n_mortar<span class="punctuation token">"</span></span> <span class="attr-name token"><span class="namespace token">xmlns:</span>ecomm</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://example.com/ecomm<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +2 <span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">ecomm:</span>partners</span><span class="punctuation token">></span></span> +3 <span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">ecomm:</span>partner</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1001<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Tony's Syrup Warehouse +4 <span class="tag token"><span class="tag token"><span class="punctuation token"></</span><span class="namespace token">ecomm:</span>partner</span><span class="punctuation token">></span></span> +5 <span class="tag token"><span class="tag token"><span class="punctuation token"></</span><span class="namespace token">ecomm:</span>partner</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token">6 </</span><span class="namespace token">ecomm:</span>business</span><span class="punctuation token">></span></span></code></pre> + +<div class="note"> +<p><strong>Nota:</strong> En {{Gecko("1.9.2")}} y anteriores,devuelve la versión en mayúsculas del nombre local para elementos HTML en HTML DOMs (en contraposición a elementos XHTML en XML DOMs). En versiones posteriores, en concordancia con HTML5,<span id="result_box" lang="es"><span>la propiedad devuelve</span> <span>en</span> <span>el caso de</span> <span>almacenamiento</span> <span>interno DOM</span></span> , <span id="result_box" lang="es"> <span>minúscula</span> <span>para ambos elementos</span> <span>HTML en</span> <span>HTML</span> <span>DOM</span> <span>y</span> <span>elementos XHTML</span> <span>en</span> <span>DOM</span> <span>XML</span></span>. La propiedad {{domxref("element.tagName","tagName")}} continua devolviéndolo en mayúsculas para elementos HTML en HTML DOMs.</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">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM4', '#interface-element', 'Element.localName')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td>definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>46.0<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Android</th> + <th>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>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Esta API estaba disponible previamente en la {{domxref("Node")}} API.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("Element.namespaceURI")}}</li> + <li>{{domxref("Element.prefix")}}</li> + <li>{{domxref("Attr.localName")}}</li> + <li>{{domxref("Node.localName")}}</li> +</ul> diff --git a/files/es/web/api/element/matches/index.html b/files/es/web/api/element/matches/index.html new file mode 100644 index 0000000000..eef4ae271d --- /dev/null +++ b/files/es/web/api/element/matches/index.html @@ -0,0 +1,120 @@ +--- +title: Element.matches() +slug: Web/API/Element/matches +tags: + - API + - DOM + - Elemento + - Referencia + - metodo + - msMatchesSelector + - webkitMatchesSelector +translation_of: Web/API/Element/matches +--- +<div>{{APIRef("DOM")}}</div> + +<p>El método <strong><code>matches()</code></strong> comprueba si el {{domxref("Element")}} sería seleccionable por el selector CSS especificado en la cadena; en caso contrario, retorna <code>false</code>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">var <var>result</var> = <var>element</var>.matches(<var>selectorString</var>); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<p><code><var>selectorString</var></code> es una cadena de texto que representa el selector a probar.</p> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p><code><var>result</var></code> es un {{domxref("Boolean")}}.</p> + +<h3 id="Excepciones">Excepciones</h3> + +<dl> + <dt><code>SYNTAX_ERR</code></dt> + <dd>La cadena especificada como selector no es válida.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: html notranslate"><ul id="aves"> + <li>Loro de alas naranja</li> + <li class="amenazada">Ágila Filipina</li> + <li>Gran Pelícano Blancpo/li> +</ul> + +<script type="text/javascript"> + var aves = document.getElementsByTagName('li'); + + for (var i = 0; i < aves.length; i++) { + if (aves[i].matches('.amenazada')) { + console.log('El ' + aves[i].textContent + ' está amenazada de extinción!'); + } + } +</script> +</pre> + +<p>Esto mostrará "El Águila Filipina está amenazada de extinción!" en el log de la consola, dado que el elemento tiene un atributo <code>class</code> con valor <code>amenazada</code>.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Para navegadores que no soportan <code>Element.matches()</code> o <code>Element.matchesSelector()</code>, pero aun incorporan soporte para <code>document.querySelectorAll()</code>, existe un polyfill:</p> + +<pre class="notranslate">if (!Element.prototype.matches) { + Element.prototype.matches = + Element.prototype.matchesSelector || + Element.prototype.mozMatchesSelector || + Element.prototype.msMatchesSelector || + Element.prototype.oMatchesSelector || + Element.prototype.webkitMatchesSelector || + function(s) { + var matches = (this.document || this.ownerDocument).querySelectorAll(s), + i = matches.length; + while (--i >= 0 && matches.item(i) !== this) {} + return i > -1; + }; +}</pre> + +<p>However, given the practicality of supporting older browsers, the following should suffice for most (if not all) practical cases (ej. soporte IE9+).</p> + +<pre class="brush: js notranslate">if (!Element.prototype.matches) { + Element.prototype.matches = Element.prototype.msMatchesSelector || + Element.prototype.webkitMatchesSelector; +} +</pre> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Observaciones</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Definición Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("api.Element.matches")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li> + <div class="syntaxbox"><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">The syntax of Selectors</a></div> + </li> + <li> + <div class="syntaxbox">Otros métodos que usan selectores: {{domxref("element.querySelector()")}} and {{domxref("element.closest()")}}.</div> + </li> +</ul> diff --git a/files/es/web/api/element/mousedown_event/index.html b/files/es/web/api/element/mousedown_event/index.html new file mode 100644 index 0000000000..4a207e28f3 --- /dev/null +++ b/files/es/web/api/element/mousedown_event/index.html @@ -0,0 +1,223 @@ +--- +title: mousedown +slug: Web/API/Element/mousedown_event +tags: + - API + - DOM + - Evento + - Interfaz +translation_of: Web/API/Element/mousedown_event +--- +<p>El evento <code>mousedown</code> se activa cuando el botón de un dispositivo apuntador (usualmente el botón de un ratón) es presionado en un elemento.</p> + +<h2 id="General_info">General info</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-mousedown">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Sí</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">Sí</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Elemento</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">Varios: Comenzar una acción de arrastrar y soltar; comenzar la selección de un texto; comenzar una interacción de desplazamiento (en combinación con el botón medio del mouse, si es soportado)</dd> +</dl> + +<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>The event target (the topmost target in the DOM tree).</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>The type of event.</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>Whether the event normally bubbles or not</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>Whether the event is cancellable or not?</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> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>A count of consecutive clicks that happened in a short amount of time, incremented by one.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</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="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Sólo funciona para elementos {{HTMLElement("textarea")}} y algunos elementos tipo {{HTMLElement("input")}}.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{event("mousedown")}}</li> + <li>{{event("mouseup")}}</li> + <li>{{event("mousemove")}}</li> + <li>{{event("click")}}</li> + <li>{{event("dblclick")}}</li> + <li>{{event("mouseover")}}</li> + <li>{{event("mouseout")}}</li> + <li>{{event("mouseenter")}}</li> + <li>{{event("mouseleave")}}</li> + <li>{{event("contextmenu")}}</li> +</ul> diff --git a/files/es/web/api/element/name/index.html b/files/es/web/api/element/name/index.html new file mode 100644 index 0000000000..717ad9dd3c --- /dev/null +++ b/files/es/web/api/element/name/index.html @@ -0,0 +1,79 @@ +--- +title: Element.name +slug: Web/API/Element/name +tags: + - API + - Compatibilidad de los navegadores + - DOM + - Elemento + - Propiedad + - Referencia + - Web + - actualizacion +translation_of: Web/API +--- +<p>{{ APIRef("DOM") }}</p> + +<h2 id="Summary" name="Summary">Sumario</h2> + +<p><code><strong>name</strong></code> <span id="result_box" lang="es"><span>obtiene o establece</span> <span>la</span> <span>propiedad del nombre</span> <span>de un</span> <span>objeto DOM</span><span>;</span> <span>sólo se aplica a</span> <span>los</span> <span>siguientes elementos</span><span>:</span></span> {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, and {{ HTMLelement("textarea") }}.</p> + +<div class="note"> +<p><strong>Nota:</strong> <code>La propiedad name no esixte para otros elementos</code>; a diferencia de <a href="/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> y <a href="/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, no es una propiedad de los modos de comunicación (interfaces) {{domxref("Node")}}, {{domxref("Element")}} or {{domxref("HTMLElement")}}.</p> +</div> + +<p><code>name</code> puede ser utilizado en el método{{ domxref("document.getElementsByName()") }} , en una <a href="/en/DOM/HTMLFormElement" title="en/DOM/form">configuración</a> y con la colección de <a href="/en/DOM/form.elements" title="en/DOM/form.elements">elementos</a> de la configuración. cuando utilizamos una configuración o elementos de una colección, puede devolver un solo elemento o una colección.</p> + +<h2 id="Syntax" name="Syntax">Síntasix</h2> + +<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; +var elName = <em>HTMLElement</em>.name; + +var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; +var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; +</pre> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="eval"><form action="" name="formA"> + <input type="text" value="foo"> +</form> + +<script type="text/javascript"> + + // Get a reference to the first element in the form + var formElement = document.forms['formA'].elements[0]; + + // Give it a name + formElement.name = 'inputA'; + + // Show the value of the input + alert(document.forms['formA'].elements['inputA'].value); + +</script> +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>En Internet Explorer (IE), la propiedad <code>name</code> de los objetos DOM , creada utilizando{{ domxref("document.createElement()") }} no puede ser establecida o modificada</p> + +<h2 id="Specification" name="Specification">Especificaciones</h2> + +<p>W3C DOM 2 HTML Specification:</p> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">Button</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> +</ul> diff --git a/files/es/web/api/element/namespaceuri/index.html b/files/es/web/api/element/namespaceuri/index.html new file mode 100644 index 0000000000..e2403ce0a5 --- /dev/null +++ b/files/es/web/api/element/namespaceuri/index.html @@ -0,0 +1,125 @@ +--- +title: Element.namespaceURI +slug: Web/API/Element/namespaceURI +tags: + - API + - Compatibilidad de los navegadores + - DOM + - Propiedad + - Referencia +translation_of: Web/API/Element/namespaceURI +--- +<div>{{APIRef("DOM")}}</div> + +<p>La propiedad <code><strong>Element.namespaceURI</strong></code> unicamente de lectura devuelve la URI namespace de el elemento, <code>o la anula si el elemento no está en un</code> namespace.</p> + +<div class="note"> +<p>Antes de DOM4 esta API fué definida dentro de la interfaz {{domxref("Node")}}.</p> +</div> + +<h2 id="Síntasix">Síntasix</h2> + +<pre class="syntaxbox"><var>namespace</var> = <var>element</var>.namespaceURI</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>En este snippet, un elemento está siendo examinado por su {{domxref("localName")}} y su <code>namespaceURI</code>. Si el <code>namespaceURI</code> devuelve el XUL namespace y el <code>localName</code> devuelve "browser", entonces se entiende que el nodo es XUL <code><browser/></code>.</p> + +<pre class="brush:js">if (element.localName == "browser" && + element.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { + // this is a XUL browser +}</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p><span id="result_box" lang="es"><span>Esto no es un</span> <span>valor calculado</span> <span>resultante</span><span> de</span> <span>una búsqueda de</span> un namespace<span>, basado</span> <span>en un examen de</span> <span>las</span> <span>declaraciones</span> <span>del namespace</span> <span>en el campo de aplicación</span><span>.</span> <span>La</span> <span>URI del namespace</span> <span>de un nodo</span> <span>se congela</span> <span>en el momento</span> <span>de creación</span> <span>del nodo</span><span>.</span></span></p> + +<div id="gt-input-tool"> +<div dir="ltr" style="zoom: 1;">En Firefox 3.5 y versiones anteriores, la URI del namespace para elementos HTML en documentos HTML <code>es nula</code>. En versiones posteriores, de conformidad con HTML5, es <code><a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a></code> como en XHTML. {{gecko_minversion_inline("1.9.2")}}</div> + +<div dir="ltr" style="zoom: 1;"> </div> +</div> + +<p>Se puede crear un elemento con el <code>namespaceURI</code> especificado utilizando el método DOM Level 2 <a href="/en-US/docs/Web/API/Document/createElementNS" title="Document.createElementNS">document.createElementNS</a>.</p> + +<p>El DOM no maneja o hace valer la validación del namespace por si mismo. Depende de la aplicación DOM para hacer cualquier validación necesaria. Date cuenta también que el prefijo del namespace , una vez que se asocia con un particular elemento, no puede ser cambiado.</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("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_los_navegadores">Compatibilidad en los navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>46.0<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Android</th> + <th>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>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Esta API estaba disponible previamente en {{domxref("Node")}} API.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("Element.localName")}}</li> + <li>{{domxref("Element.prefix")}}</li> + <li>{{domxref("Attr.namespaceURI")}}</li> + <li>{{domxref("Node.namespaceURI")}}</li> +</ul> diff --git a/files/es/web/api/element/ongotpointercapture/index.html b/files/es/web/api/element/ongotpointercapture/index.html new file mode 100644 index 0000000000..156c25f4fb --- /dev/null +++ b/files/es/web/api/element/ongotpointercapture/index.html @@ -0,0 +1,133 @@ +--- +title: Element.ongotpointercapture +slug: Web/API/Element/ongotpointercapture +tags: + - API + - Controlador + - DOM + - Elemento + - Eventos Puntero + - Propiedad + - Referencia +translation_of: Web/API/GlobalEventHandlers/ongotpointercapture +--- +<p>{{ ApiRef("DOM") }}</p> + +<p><code>ongotpointercapture</code> es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}} <span id="result_box" lang="es"><span>que devuelve</span> <span>el controlador de eventos</span> <span>(función</span><span>)</span> <span>para el</span></span> evento tipo {{event("gotpointercapture")}}.</p> + +<h2 id="Syntax" name="Syntax">Síntasix</h2> + +<pre class="eval">var gotCaptureHandler = target.ongotpointercpature; +</pre> + +<h3 id="Return_Value" name="Return_Value">Valor de Retorno</h3> + +<dl> + <dt><code>gotCaptureHandler</code></dt> + <dd><span id="result_box" lang="es"><span>El controlador de eventos</span> <span>gotpointercapture</span> para el <span>elemento target</span><span>.</span></span></dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: js"><html> +<script> +function overHandler(ev) { + // Determine the target event's gotpointercapture handler + var gotCaptureHandler = ev.target.ongotpointercapture; +} +function init() { + var el=document.getElementById("target"); + el.onpointerover = overHandler; +} +</script> +<body onload="init();"> +<div id="target"> Touch me ... </div> +</body> +</html> +</pre> + +<h2 id="Specifications" name="Specifications">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('Pointer Events 2','#widl-Element-ongotpointercapture', 'ongotpointercapture')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>Versión no estable.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-Element-ongotpointercapture', 'ongotpointercapture')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad en los Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}} <sup>[1]</sup></td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</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>Soporte Básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implementación retirada. Ver {{Bug("1166347")}}.</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{ event("gotpointercapture") }}</li> +</ul> diff --git a/files/es/web/api/element/onlostpointercapture/index.html b/files/es/web/api/element/onlostpointercapture/index.html new file mode 100644 index 0000000000..336c672605 --- /dev/null +++ b/files/es/web/api/element/onlostpointercapture/index.html @@ -0,0 +1,132 @@ +--- +title: Element.onlostpointercapture +slug: Web/API/Element/onlostpointercapture +tags: + - API + - Controlador de Eventos + - DOM + - Eventos Puntero + - Propiedad + - Referencia +translation_of: Web/API/GlobalEventHandlers/onlostpointercapture +--- +<p>{{ ApiRef("DOM") }}</p> + +<p><code>onlostpointercapture</code> es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}} <span id="result_box" lang="es"><span>que devuelve</span> <span>el controlador de eventos</span> <span>(función</span><span>)</span> <span>para el evento tipo </span></span>{{event("lostpointercapture")}} .</p> + +<h2 id="Syntax" name="Syntax">Síntasix</h2> + +<pre class="eval">var lostCaptureHandler = target.onlostpointercpature; +</pre> + +<h3 id="Return_Value" name="Return_Value">Valor de Retorno</h3> + +<dl> + <dt><code>lostCaptureHandler</code></dt> + <dd>El controlador de eventos <em>lostpointercapture</em> para el elemento <code>target</code>.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: js"><html> +<script> +function overHandler(ev) { + // Determine the target event's lostpointercapture handler + var lostCaptureHandler = ev.target.onlostpointercapture; +} +function init() { + var el=document.getElementById("target"); + el.onpointerover = overHandler; +} +</script> +<body onload="init();"> +<div id="target"> Touch me ... </div> +</body> +</html> +</pre> + +<h2 id="Specifications" name="Specifications">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('Pointer Events 2','#widl-Element-onlostpointercapture', 'onlostpointercapture')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>Versión no estable.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-Element-onlostpointercapture', 'onlostpointercapture')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad en los Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}} <sup>[1]</sup></td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</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>Soporte Básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implementación retirada. Ver {{Bug("1166347")}}.</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{ event("lostpointercapture") }}</li> +</ul> diff --git a/files/es/web/api/element/onwheel/index.html b/files/es/web/api/element/onwheel/index.html new file mode 100644 index 0000000000..b8f829969b --- /dev/null +++ b/files/es/web/api/element/onwheel/index.html @@ -0,0 +1,31 @@ +--- +title: Element.onwheel +slug: Web/API/Element/onwheel +tags: + - API + - DOM + - Gecko + - Propiedad + - Referencia +translation_of: Web/API/GlobalEventHandlers/onwheel +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>{{ non-standard_header() }}</p> + +<h3 id="Sumario">Sumario</h3> + +<p>La propiedad <code>onwheel</code> devuelve el código del controlador de eventos <code>onwheel</code> en el elemento actual.</p> + +<h3 id="Syntax">Syntax</h3> + +<pre class="eval">element.onwheel = <em>event handling code</em> +</pre> + +<h3 id="Notas">Notas</h3> + +<p>El evento <code>wheel</code> se genera cuando el usuario desplaza el contenido de un elemento.</p> + +<h3 id="Ver_también">Ver también</h3> + +<p><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=18542" title="https://www.w3.org/Bugs/Public/show_bug.cgi?id=18542">Bug 18542 – el atributo onmousewheel debe ser reemplazado con onwheel</a></p> diff --git a/files/es/web/api/element/outerhtml/index.html b/files/es/web/api/element/outerhtml/index.html new file mode 100644 index 0000000000..7e9647f0db --- /dev/null +++ b/files/es/web/api/element/outerhtml/index.html @@ -0,0 +1,143 @@ +--- +title: Element.outerHTML +slug: Web/API/Element/outerHTML +translation_of: Web/API/Element/outerHTML +--- +<p>{{APIRef("DOM")}}</p> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El atributo <code>outerHTML</code> del interfaz DOM {{ domxref("element") }} obtiene el fragmento HTML serializado que describe el elemento incluyendo sus descendientes. Puede ser asignado para reemplazar el elemento por los nodos resultantes de examinar de la cadena proporcionada.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="eval"><em>var content</em> = <em>element</em>.outerHTML; +</pre> + +<p>Al retorno, <code>content</code> contendrá el fragmento de HTML serializado que describe al elemento <code>element</code> y a sus descendientes.</p> + +<pre class="eval"><em>element</em>.outerHTML = content; +</pre> + +<p>Reemplaza el elemento por los nodos generados del análisis de la cadena <code>content</code> con el padre de <code>element</code> como el nodo de contexto para el algoritmo de procesado del fragmento.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<p>Ontener el valor de la propiedas <code>outerHTML</code> de un elemento:</p> + +<pre class="brush: js">// HTML: +// <div id="d"><p>Content</p><p>Further Elaborated</p></div> + +d = document.getElementById("d"); +dump(d.outerHTML); + +// La cadena '<div id="d"><p>Content</p><p>Further Elaborated</p></div>' +// es volcada a la ventana de la consola. +</pre> + +<p>Reemplazar un nodo mediante la asignación de la propiedad <code>outerHTML</code>:</p> + +<pre class="brush: js">// HTML: +// <div id="container"><div id="d">This is a div.</div></div> + +container = document.getElementById("container"); +d = document.getElementById("d"); +console.log(container.firstChild.nodeName); // logs "DIV" + +d.outerHTML = "<p>This paragraph replaced the original div.</p>"; +console.log(container.firstChild.nodeName); // logs "P" + +// El div #d no será parte del árbol del documento, +// el nuevo párrafo lo reemplazará. +</pre> + +<h2 id="Notas">Notas</h2> + +<p>Si el elemento no tiene elemento padre, esto es, si es el elemento raíz del documento, la asignación de su propiedad <code>outerHTML</code> lanzará una <code><a href="/en/DOM/DOMException" title="DOMException">DOMException</a></code> con el código de error <code>NO_MODIFICATION_ALLOWED_ERR</code>. Por ejemplo:</p> + +<pre class="brush: js">document.documentElement.outerHTML = "test"; // lanza una DOMException +</pre> + +<p>Además, aunque el elemento es reemplazado en el documento, la variable cuya propiedad <code>outerHTML</code> fue asignada continuará conteniendo una referencia al elemento original:</p> + +<pre class="brush: js">var p = document.getElementsByTagName("p")[0]; +console.log(p.nodeName); // muestra: "P" +p.outerHTML = "<div>This div replaced a paragraph.</div>"; +console.log(p.nodeName); // sigue mostrando: "P"; +</pre> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Observaciones</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td> + <td>{{ Spec2('DOM Parsing') }}</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>Prestación</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatGeckoDesktop("11") }}</td> + <td>0.2</td> + <td>4.0</td> + <td>7</td> + <td>1.3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Prestiación</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("11") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("HTMLElement.outerText")}}</li> + <li>MSDN: <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534310%28v=vs.85%29.aspx">Propiedad outerHTML</a></li> +</ul> diff --git a/files/es/web/api/element/prefix/index.html b/files/es/web/api/element/prefix/index.html new file mode 100644 index 0000000000..4fc15aed1a --- /dev/null +++ b/files/es/web/api/element/prefix/index.html @@ -0,0 +1,115 @@ +--- +title: Element.prefix +slug: Web/API/Element/prefix +tags: + - API + - Compatibilidad de los Navegadores en Móviles + - Compatibilidad de los navegadores + - DOM + - Propiedad + - Referencia +translation_of: Web/API/Element/prefix +--- +<div>{{APIRef("DOM")}}</div> + +<p>La propiedad <code><strong>Element.prefix</strong></code> unicamente de lectura devuelve el namespace prefix de el elemento especificado, o<code> null si no hay especificado </code>prefix .</p> + +<div class="note"> +<p>Antes de DOM4 esta API fué definida dentro de la interfaz {{domxref("Node")}}.</p> +</div> + +<h2 id="Síntasix">Síntasix</h2> + +<pre class="syntaxbox"><var>string</var> = <var>element</var>.prefix +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p><span class="short_text" id="result_box" lang="es"><span>Los siguientes registros</span> <span>"</span><span>x</span><span>"</span> <span>en la consola.</span></span></p> + +<pre class="brush:xml"><x:div onclick="console.log(this.prefix)"/> +</pre> + +<h2 id="Notas">Notas</h2> + +<p> Solo funcionará cuando se utiliza un analizador de namespace, ej. Cuando un documento es servido con un tipo XML MIME . No funcionará para documentos HTML.</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("DOM4", "#dom-element-prefix", "Element.prefix")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>46.0<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Android</th> + <th>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>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Esta API estaba previamente disponible en {{domxref("Node")}} API.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("Element.namespaceURI")}}</li> + <li>{{domxref("Element.localName")}}</li> + <li>{{domxref("Attr.prefix")}}</li> + <li>{{domxref("Node.prefix")}}</li> +</ul> diff --git a/files/es/web/api/element/queryselector/index.html b/files/es/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..8ce9cbe15f --- /dev/null +++ b/files/es/web/api/element/queryselector/index.html @@ -0,0 +1,187 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +<div>{{APIRef("DOM")}}</div> + +<p>El método <code><strong>querySelector() </strong></code>de la intrefaz <strong> </strong>{{domxref("Element")}} devuelve el primer descendiente del elemento sobre el cual es invocado que coincida con el o los selectores especificados.</p> + +<h2 id="Syntax" name="Syntax">Sintáxis</h2> + +<pre class="syntaxbox notranslate"><var>elemento</var> = elementoBase.querySelector(<em>selectore</em>s); +</pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>selectores</code></dt> + <dd>Es el grupo de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectores</a> que servirán para filtrar los elementos descendientes del {{domxref("Element")}} <code>elementoBase</code>; debe tener una sintáxis CSS válida o se producirá una excepción <code>SyntaxError</code>. Devuelve el primer elemento que encuentre que coincida con el grupo de selectores.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Devolverá el primer descendiente del elemento <code>elementoBase</code> que coincida con el grupo de <code>selectores</code> especificado. Para la comparación se recorrerá la jerarquía completa de elementos, incluyendo a aquellos que no son descendientes del <code>elementoBase</code>; en otras palabras, los <code>selectores</code> se aplican primero al documento completo, no sólo al <code>elementoBase</code>, creando una lista inicial de elementos potencialmente seleccionables. Después se examina dicha lista para comprobar qué elementos son descendientes del <code>elementoBase</code>. El método <code>querySelector()</code> devolverá el primero de dichos elementos descendientes.</p> + +<p>Si no hubiera coincidencias, devolverá el valor <code>null</code>.</p> + +<h3 id="Excepciones">Excepciones</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>Los <code>selectores</code> especificados no son válidos.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Vamos a ver unos cuantos ejemplos.</p> + +<h3 id="Encontrar_un_elemento_a_traves_del_valor_de_sus_atributos">Encontrar un elemento a traves del valor de sus atributos</h3> + +<p>En este primer ejemplo, obtendremos el primer elemento {{HTMLElement("style")}} del body del documento HTML que no tenga atributo "type" o cuyo atributo "type" sea igual a "text/css":</p> + +<pre class="brush:js notranslate">var el = document.body.querySelector("style[type='text/css'], style:not([type])"); +</pre> + +<h3 id="Toda_la_jerarquía_cuenta">Toda la jerarquía cuenta</h3> + +<p>El ejemplo que mostramos a continuación, demuestra que la jerarquía de todo el documento se tiene en cuenta cuando se aplican los <code>selectores</code>, de modo que se tienen en cuenta todos los niveles que se encuentran fuera de la jerarquía del <code>elementoBase</code> para localizar coincidencias.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div> + <h5>Original content</h5> + <p> + inside paragraph + <span>inside span</span> + inside paragraph + </p> +</div> +<div> + <h5>Output</h5> + <div id="output"></div> +</div></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">var baseElement = document.querySelector("p"); +document.getElementById("output").innerHTML = + (baseElement.querySelector("div span").innerHTML);</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>El resultado es el siguiente:</p> + +<p>{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}</p> + +<p>Podemos ver que el selector <code>"div span"</code> coincide con el elemento {{HTMLElement("span")}}, aunque <code>baseElement</code> excluye el elemento {{domxref("div")}} al no ser parte de su selector.</p> + +<h3 id="Más_ejemplos">Más ejemplos</h3> + +<p>Puedes ver más ejemplos sobre el formato apropiado para los <code>selectores</code> aquí {{domxref("Document.querySelector()")}}.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll()')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td> + <td>{{Spec2('Selectors API Level 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2> + +<p>{{ CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>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>{{ CompatChrome(1) }}<br> + </td> + <td> + <p>{{ CompatGeckoDesktop(1.9.1) }}</p> + </td> + <td> + <p>9 [1]</p> + </td> + <td> + <p>{{CompatVersionUnknown}}</p> + </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>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</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] <code>querySelector()</code> funciona en IE8, pero solo para selectores CSS 2.1.</p> + +<h2 id="También_puedes_consultar">También puedes consultar:</h2> + +<ul> + <li><a href="/es/docs/Referencia_DOM_de_Gecko/Localizando_elementos_DOM_usando_selectores">Localizando elementos DOM usando selectores</a></li> + <li><a href="/es/docs/Web/CSS/Selectores_atributo">Selectores de atributo</a> en la guia de CSS</li> + <li><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos">Selectores de atributo</a> en MDN Learning</li> + <li>{{domxref("Element.querySelectorAll()")}}</li> + <li>{{domxref("Document.querySelector()")}} y {{domxref("Document.querySelectorAll()")}}</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">Code snippets for querySelector</a></li> + <li>Otros métodos que toman selectores: {{domxref("element.closest()")}} y {{domxref("element.matches()")}}.</li> +</ul> diff --git a/files/es/web/api/element/removeattribute/index.html b/files/es/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..bc4573b0af --- /dev/null +++ b/files/es/web/api/element/removeattribute/index.html @@ -0,0 +1,41 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +tags: + - API + - DOM + - Elemento + - Referencia +translation_of: Web/API/Element/removeAttribute +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code>removeAttribute</code> elimina un atributo del elemento especificado.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="eval"><em>element</em>.removeAttribute(<em>attrName</em>); +</pre> + +<ul> + <li><code>attrName</code> es una cadena que nombra el atributo a ser eliminado de <em>element</em>.</li> +</ul> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre>// <div id="div1" align="left" width="200px"> +document.getElementById("div1").removeAttribute("align"); +// ahora: <div id="div1" width="200px"> +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Debe usarse preferiblemente <code>removeAttribute</code> en lugar de establecer el valor del atributo a <code>null</code> usando <a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute</a>.</p> + +<p>Intentar eliminar un atributo que no existe en el elemento no disparará una excepción.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core: removeAttribute</a> (introducido en <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">DOM Level 1 Core</a>)</p> diff --git a/files/es/web/api/element/requestfullscreen/index.html b/files/es/web/api/element/requestfullscreen/index.html new file mode 100644 index 0000000000..823330dbe8 --- /dev/null +++ b/files/es/web/api/element/requestfullscreen/index.html @@ -0,0 +1,104 @@ +--- +title: Element.requestFullscreen() +slug: Web/API/Element/requestFullScreen +tags: + - Pantalla completa +translation_of: Web/API/Element/requestFullScreen +--- +<div>{{APIRef("DOM")}}{{seeCompatTable}}</div> + +<p>Asynchronously requests that the element be made full-screen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">element.mozRequestFullScreen(); +</pre> + +<h2 id="Notas">Notas</h2> + +<p>No esta garantizado que el elemento se cambie a modo pantalla completa. Si la autorización para entrar a modo pantalla completa es permitida, el documento obtendrá un evento "mozfullscreenchange" para hacerle saber que esta en modo pantalla completa en ese momento. Si la autorización es denegada, el documento obtiene un evento "mozfullscreenerror".</p> + +<p>Ve a <a href="/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode">Using full-screen mode</a> para mas detalles y ejemplos.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td>Initial definition</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>Feature</th> + <th>Chrome</th> + <th>Firefox</th> + <th>Edge<br> + Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}} (also as webkitRequestFullScreen)</td> + <td>{{CompatGeckoDesktop("9.0")}} (as mozRequestFullScreen)</td> + <td>11 {{property_prefix("ms")}}<a href="https://msdn.microsoft.com/en-us/library/dn254939%28v=vs.85%29.aspx">¹</a><br> + 20<a href="https://msdn.microsoft.com/en-us/library/dn265028%28v=vs.85%29.aspx">¹</a><a href="https://msdn.microsoft.com/en-us/library/dn254939%28v=vs.85%29.aspx">²</a></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode">Using full-screen mode</a></li> + <li>{{domxref("document.mozCancelFullScreen()")}}</li> + <li>{{domxref("document.mozFullScreen")}}</li> + <li>{{domxref("document.mozFullScreenElement")}}</li> + <li>{{domxref("document.mozFullScreenEnabled")}}</li> + <li>{{cssxref(":-moz-full-screen")}}</li> + <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}}</li> +</ul> diff --git a/files/es/web/api/element/runtimestyle/index.html b/files/es/web/api/element/runtimestyle/index.html new file mode 100644 index 0000000000..289c3fe13b --- /dev/null +++ b/files/es/web/api/element/runtimestyle/index.html @@ -0,0 +1,82 @@ +--- +title: Element.runtimeStyle +slug: Web/API/Element/runtimeStyle +tags: + - API + - Necesidad de compatibilidad de los navegadores + - Necesidad de compatibilidad de los navegadores móviles + - Necesidad de ejemplo + - Propiedad +translation_of: Web/API/Element/runtimeStyle +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{ Non-standard_header() }}</p> + +<h2 id="Sumario">Sumario</h2> + +<p><span id="result_box" lang="es"><strong><span>Element.runtimeStyle</span></strong> <span>es una</span> <span>propiedad exclusiva</span> <span>similar a</span> <span>{</span><span>{</span><span>domxref</span> <span>(</span><span>"</span><span>HTMLElement.style</span><span>"</span><span>)</span><span>}</span><span>}</span><span>, excepto</span> <span>sus</span> <span>estilos,</span> <span>que tienen</span> <span>mayor precedencia</span> <span>y</span> <span>modificaciön.It</span> <span>no modifica</span> <span>el contenido del atributo</span> </span><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style">style</a></code> <span lang="es"><span>.</span> <span>Está disponible en</span> <span>las versiones anteriores de</span> <span>Microsoft</span> <span>Internet Explorer</span><span>.</span></span></p> + +<h2 id="especificación">especificación</h2> + +<p>No forma parte de ninguna especificación.</p> + +<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535889(v=vs.85).aspx">tiene una descripción en MSDN</a>.</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de los Navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Microsoft Edge</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>6</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("Element.currentStyle")}} </li> +</ul> diff --git a/files/es/web/api/element/scrollheight/index.html b/files/es/web/api/element/scrollheight/index.html new file mode 100644 index 0000000000..d281054beb --- /dev/null +++ b/files/es/web/api/element/scrollheight/index.html @@ -0,0 +1,212 @@ +--- +title: Element.scrollHeight +slug: Web/API/Element/scrollHeight +tags: + - API + - Necesidad de Ejemplo de eliminación DHTML + - Propiedad + - Referencia + - Vista CSSOM +translation_of: Web/API/Element/scrollHeight +--- +<p>{{APIRef("DOM")}}</p> + +<p><span id="result_box" lang="es"><span>El elemento </span><strong> <span>Element.scrollHeight</span></strong> <span>atributo unicamente de lectura</span> <span>es una medida de</span> <span>la altura del</span> <span>contenido de un elemento</span><span>,</span> <span>incluyendo el contenido</span> que <span>no es visible</span> <span>en la pantalla</span> <span>debido al desbordamiento</span><span>.</span> <span>El valor</span> </span><code>scrollHeight</code><span lang="es"> <span>es</span> <span>igual a la</span> <span>altura mínima (</span><span>donde la altura</span> <span>incluye el relleno</span> <span>, pero no incluye</span> <span>bordes y márgenes</span><span>)</span> <span>El elemento</span> <span>lo necesita</span> <span>con el fin de</span> <span>adaptarse a</span> <span>todos los contenidos</span> <span>en</span> <span>el punto de vista</span> <span>sin necesidad de utilizar</span> <span>una barra de desplazamiento</span> <span>vertical.</span> <span>Incluye</span> <span>el </span> <span>elemento</span> <span>relleno pero no</span> <span>su margen</span><span>.</span></span></p> + +<div class="note"> +<p><span id="result_box" lang="es"><span>Esta propiedad</span> <span>redondea</span> <span>el valor a</span> <span>un número entero</span><span>.</span> <span>Si se necesita</span> <span>un valor fraccionario</span><span>,</span> <span>utilizar </span></span>{{domxref("Element.getBoundingClientRect()")}}.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">var <em>intElemScrollHeight</em> = <em>element</em>.scrollHeight;</pre> + +<p><em>intElemScrollHeight</em> es una variable que almacena un número entero correspondiente al valor scrollHeight en pixels del elemento. scrollHeight es una propiedad unicamente de lectura.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> + +<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong>Left</strong> <strong>Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div> + +<p><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p> + +<h2 id="Problemas_y_Soluciones">Problemas y Soluciones</h2> + +<h3 id="Determina_si_un_elemento_ha_sido_totalmente_desplazado"><span id="result_box" lang="es"><span>Determina</span> <span>si un elemento</span> <span>ha sido totalmente</span> <span>desplazado</span></span></h3> + +<p>La siguiente equivalencia devuelve <code>true</code> si un elemento está al final de su desplazamiento, <code>false</code> si no es así.</p> + +<pre class="syntaxbox notranslate">element.scrollHeight - element.scrollTop === element.clientHeight</pre> + +<h2 id="scrollHeight_Demo">scrollHeight Demo</h2> + +<p>As<code>ociada al evento <a href="/en-US/docs/DOM/element.onscroll">onscroll</a></code> , esta equivalencia puede ser útil para determinar si un usuario ha leido un texto o no (ver también las propiedades de <code><a href="/en-US/docs/DOM/element.scrollTop">element.scrollTop</a></code> y <code><a href="/en-US/docs/DOM/element.clientHeight">element.clientHeight</a></code> ). Por ejemplo:</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><form name="registration"> + <p> + <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna. +Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus +neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at +velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus +ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id. +Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem, +mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta +at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent +dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas +luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem +sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue +turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum. +Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in +ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse +platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat +consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et +a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam +pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum +ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit +interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer +laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, +nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum. + </textarea> + </p> + <p> + <input type="checkbox" id="agree" name="accept" /> + <label for="agree">I agree</label> + <input type="submit" id="nextstep" value="Next" /> + </p> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">#notice { + display: inline-block; + margin-bottom: 12px; + border-radius: 5px; + width: 600px; + padding: 5px; + border: 2px #7FDF55 solid; +} + +#rules { + width: 600px; + height: 130px; + padding: 5px; + border: #2A9F00 solid 2px; + border-radius: 5px; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">function checkReading () { + if (checkReading.read) { + return; + } + checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight; + document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read; + checkReading.noticeBox.innerHTML = checkReading.read ? "Thank you." : "Please, scroll and read the following text."; +} + +onload = function () { + var oToBeRead = document.getElementById("rules"); + checkReading.noticeBox = document.createElement("span"); + document.registration.accept.checked = false; + checkReading.noticeBox.id = "notice"; + oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead); + oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead); + oToBeRead.onscroll = checkReading; + checkReading.call(oToBeRead); +}</pre> + +<p>{{EmbedLiveSample('scrollHeight_Demo', '640', '400')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Especificación</th> + <th>Estado</th> + <th>Comentario</th> + </tr> + <tr> + <td>{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Inicial definición</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_los_Navegadores">Compatibilidad de los Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>4.0</td> + <td>3.0<sup>[1]</sup></td> + <td>8.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] En versiones anteriores a Firefox 21, <span id="result_box" lang="es"><span>cuando el contenido</span> <span>de</span> <span>un elemento</span> <span>no genera una</span> <span>barra de desplazamiento vertical</span><span>,</span></span>su propiedad <code>scrollHeight</code> es igual a su propiedad <code>clientHeight</code> . Esto puede significar que el contenido es demasiado breve para necesitar una barra de desplazamiento vertical, o que el elemento tiene un estilo CSS con un valor <code>overflow</code> <code>que desborda el contenido visible</code> (no desplazable).</p> + +<h2 id="Ver_También">Ver También</h2> + +<ul> + <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9</a></li> + <li>{{domxref("Element.clientHeight")}}</li> + <li>{{domxref("HTMLElement.offsetHeight")}}</li> + <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determinación de las dimensiones de los elementos</a></li> +</ul> diff --git a/files/es/web/api/element/scrollintoview/index.html b/files/es/web/api/element/scrollintoview/index.html new file mode 100644 index 0000000000..7c0b23a429 --- /dev/null +++ b/files/es/web/api/element/scrollintoview/index.html @@ -0,0 +1,151 @@ +--- +title: Element.scrollIntoView() +slug: Web/API/Element/scrollIntoView +tags: + - Experimental + - Expérimental(2) + - metodo +translation_of: Web/API/Element/scrollIntoView +--- +<div>{{ APIRef("DOM")}}</div> + +<p>El método <code><strong>scrollIntoView()</strong></code> de la interfaz {{domxref("Element")}} desplaza el contenedor principal del elemento de forma que el elemento sobre el cual se invoca <code>scrollIntoView()</code> sea visible al usuario.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox notranslate">element.scrollIntoView(); // Equivalente a <code>element.scrollIntoView(true) +</code>element.scrollIntoView(<em>alignToTop</em>); // Argumentos booleanos +element.scrollIntoView(<em>scrollIntoViewOptions</em>); // Argumento objeto +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><em><code>alignToTop</code></em></dt> + <dd>Es un valor {{jsxref("Boolean")}}: + <ul> + <li>Si es <code>true</code>, la parte superior del elemento se alineará con la parte superior del área visible del elemento desplazable antecesor.</li> + <li>Si es <code>false</code>, la parte inferior del elemento se alineará con la parte inferior del área visible del elemento desplazable antecesor.</li> + </ul> + </dd> + <dt><em><code>scrollIntoViewOptions</code></em> {{optional_inline}} {{experimental_inline}}</dt> + <dd>Un booleano o un objeto con las siguientes opciones:</dd> + <dt><code>behavior</code> {{optional_inline}}</dt> + <dd>Establece la transición de la animación.<br> + Puede ser <code>auto</code> o <code>smooth</code>. Por defecto es <code>auto</code>.</dd> + <dt><code>block</code> {{optional_inline}}</dt> + <dd>Establece el alineamiento vertical.<br> + Puede ser <code>start</code>, <code>center</code>, <code>end</code>, o <code>nearest</code>. Por defecto es <code>start</code>.</dd> + <dt><code>inline</code> {{optional_inline}}</dt> + <dd>Establece el alineamiento horizontal<br> + Puede ser <code>start</code>, <code>center</code>, <code>end</code>, o <code>nearest</code>. Por defecto es <code>nearest</code>.</dd> +</dl> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="brush: javascript notranslate">var element = document.getElementById("box"); + +element.scrollIntoView(); +element.scrollIntoView(false); +element.scrollIntoView({block: "end"}); +element.scrollIntoView({block: "end", behavior: "smooth"}); +</pre> + +<h2 id="Notas">Notas</h2> + +<p>Puede que el desplazamiento no sea llevado completamente a la parte superior o inferior dependiente de la disposición de otros elementos. </p> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<table> + <thead> + <tr> + <th>Especificación</th> + <th>Estado</th> + <th>Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<ul> + <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollintoview" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollintoview">CSSOM: Scrolling elements into view</a></li> +</ul> + +<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>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Implementación básica</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>6</td> + <td>10.0 and possibly older versions</td> + <td>4 and possibly older versions</td> + </tr> + <tr> + <td> + <p>Implementan<br> + <code>scrollIntoViewOptions</code></p> + </td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop(36) }}</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>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Implementación básica</td> + <td>?</td> + <td>{{ CompatGeckoMobile(1.0) }}</td> + <td>?</td> + <td>?</td> + <td>?</td> + </tr> + <tr> + <td> + <p>Implementan<br> + <code>scrollIntoViewOptions</code></p> + </td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile(36) }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/api/element/scrollleft/index.html b/files/es/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..df527ccdc5 --- /dev/null +++ b/files/es/web/api/element/scrollleft/index.html @@ -0,0 +1,153 @@ +--- +title: Element.scrollLeft +slug: Web/API/Element/scrollLeft +tags: + - API + - Necesita Tabla de Compatibilidad + - Necesita Trabajo de Markup + - Necesita tabla de Especificaciones + - Propiedad + - Referencia + - Vista CSSOM +translation_of: Web/API/Element/scrollLeft +--- +<p>{{ APIRef("DOM") }}</p> + +<p>La propiedad <strong><code>Element.scrollLeft</code></strong><span id="result_box" lang="es"><span> obtiene o establece el número de píxeles que desplaza el contenido de un elemento hacia la izquierda.</span></span></p> + +<p><span id="result_box" lang="es"><span>Tenga en cuenta que si el elemento <code>{{cssxref ( "dirección")}} </code>del elemento es <code>rtl </code>(</span></span>derecha-a-izquierda<span lang="es"><span>), entonces<code> scrollLeft</code> es 0 cuando la barra de desplazamiento está en su posición más a la derecha (al inicio del contenido desplazado) y cada vez más</span> <span>Negativo mientras se desplaza hacia el final del contenido.</span></span></p> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Síntasix</h2> + +<pre class="eval">// <span class="short_text" id="result_box" lang="es"><span>Obtener el número de píxeles desplazados</span></span> +var <var>sLeft</var> = <var>element</var>.scrollLeft; +</pre> + +<p><span id="result_box" lang="es"><span><em>SLeft</em> es un número entero que representa el número de píxeles que el elemento ha desplazado hacia la izquierda.</span></span></p> + +<pre class="eval">// <span class="short_text" id="result_box" lang="es"><span>Establecer el número de píxeles desplazados</span></span> +<var>element</var>.scrollLeft = 10; +</pre> + +<p><span id="result_box" lang="es"><span><code>ScrollLeft</code> se puede establecer en cualquier valor entero, sin embargo:</span></span></p> + +<ul> + <li> + <div id="gt-text-top"> + <div class="g-unit" id="gt-src-c"> + <div id="gt-src-p"> + <div id="gt-src-wrap"> + <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span>Si el elemento no se puede desplazar (por ejemplo, no tiene desbordamiento), <code>scrollLeft </code>se establece en 0.</span></span></div> + </div> + </div> + </div> + </div> + </li> + <li> <span id="result_box" lang="es"><span>Si se establece en un valor menor que 0 (mayor que 0 para elementos de derecha a izquierda), <code>scrollLeft</code> se establece en 0.</span></span></li> + <li><span id="result_box" lang="es"><span>Si se establece en un valor mayor que el máximo que se puede desplazar el contenido,<code> scrollLeft </code>se establece en el valor máximo.</span></span></li> +</ul> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + #container { + border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px; + } + #content { + background-color: #ccc; width: 250px; + } + </style> + <script> + document.addEventListener('DOMContentLoaded', function () { + var button = document.getElementById('slide'); + button.onclick = function () { + document.getElementById('container').scrollLeft += 20; + }; + }, false); + </script> +</head> +<body> + <div id="container"> + <div id="content">Lorem ipsum dolor sit amet.</div> + </div> + <button id="slide" type="button">Slide</button> +</body> +</html> +</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('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_los_navegadores">Compatibilidad en los navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</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>Función</th> + <th>Android</th> + <th>Android Webview</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>Soporte Básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/api/element/scrolltop/index.html b/files/es/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..5b4fb19139 --- /dev/null +++ b/files/es/web/api/element/scrolltop/index.html @@ -0,0 +1,69 @@ +--- +title: Element.scrollTop +slug: Web/API/Element/scrollTop +translation_of: Web/API/Element/scrollTop +--- +<p>{{ APIRef("DOM") }}</p> + +<p>La propiedad <code><strong>Element.scrollTop</strong></code> obtiene o establece el número de pixels que el contenido de un elemento ha sido desplazado (enrollado) hacia arriba. El <code>scrollTop</code> de un elemento es una medida de la distancia desde el límite superior de un elemento al límite superior de su contenido visible. Cuando un elemento no genera una barra de scroll vertical, el valor de su <code>scrollTop</code> es establecido por defecto a <code>0</code>.</p> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxis</h2> + +<pre class="brush: js">// Obtiene el número de pixels desplazados +var <var> intElemScrollTop</var> = someElement.scrollTop; +</pre> + +<p><var>Después de ejecutar este código, </var><code><var>intElemScrollTop</var></code> es un entero que corresponde al número de pixesl que el contenido del {{domxref("element")}} ha sido desplazado hacia arriba.</p> + +<pre class="brush: js">// Establece el número de pixels desplazados +<var>element</var>.scrollTop = <var>intValue</var>; +</pre> + +<p><code>scrollTop</code> puede ser establecido a cualquier valor entero, con ciertas salvedades:</p> + +<ul> + <li>Si el elemento no puede ser desplazado (p.e. no tiene desbordamiento (overflow) o si el elemento no es desplazable (<strong>non-scrollable</strong>), <code>scrollTop</code> es establecido a <code>0</code>.</li> + <li>Si se asigna un valor menor que <code>0</code>, <code>scrollTop</code> es establecido a <code>0</code>.</li> + <li>Si se asigna un valor mayor que el máximo al que el contenido puede ser desplazado, <code>scrollTop</code> es establecido al valor máximo.</li> +</ul> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> + +<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div> + +<p><img alt="Image:scrollTop.png" class="internal" src="/@api/deki/files/842/=ScrollTop.png"></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">Observaciones</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Referencias">Referencias</h2> + +<ul> + <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop">Borrador del Módulo Vista del W3C</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx">definición de scrollTop en MSDN</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx">Medidas de Dimensión y Ubicación de Elementos en MSDN</a></li> +</ul> diff --git a/files/es/web/api/element/scrolltopmax/index.html b/files/es/web/api/element/scrolltopmax/index.html new file mode 100644 index 0000000000..9e5fc20255 --- /dev/null +++ b/files/es/web/api/element/scrolltopmax/index.html @@ -0,0 +1,80 @@ +--- +title: Element.scrollTopMax +slug: Web/API/Element/scrollTopMax +tags: + - API + - CSSOM View + - Elemento + - Propiedad + - Read-only + - Referencia + - Solo lectura +translation_of: Web/API/Element/scrollTopMax +--- +<p>{{APIRef("DOM")}}{{Non-standard_header}}</p> + +<p>La propiedad de solo lectura(read-only) <code><strong>Element.scrollTopMax</strong></code> retorna un {{jsxref("Number")}} que representa el máximo offset posible para el elemento.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre>var <em>pxl</em> = <em>elt</em>.scrollTopMax;</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p><em>Esta propiedad no es parte de ninguna especificación.</em></p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoDesktop(16) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile(16) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{domxref("Element.scrollLeftMax")}} dada la misma información para otros ejes.</li> +</ul> diff --git a/files/es/web/api/element/scrollwidth/index.html b/files/es/web/api/element/scrollwidth/index.html new file mode 100644 index 0000000000..aaeb7486a8 --- /dev/null +++ b/files/es/web/api/element/scrollwidth/index.html @@ -0,0 +1,119 @@ +--- +title: Element.scrollWidth +slug: Web/API/Element/scrollWidth +translation_of: Web/API/Element/scrollWidth +--- +<div>{{ APIRef("DOM") }}</div> + +<p>La propiedad de sólo lectura <strong><code>Element.scrollWidth</code></strong> retorna bien la anchura en pixels del contenido de un elemento o bien la anchura del elemento en si, la que sea mayor de ambas. Si el elemento es más ancho que su área contenedora (por ejemplo, si existen barras de desplazamiento para desplazarse a través del contenido), <code>scrollWidth</code> es mayor que <code>clientWidth</code>.</p> + +<div class="note"> +<p>El valor de esta propiedad será red redondedo a un entero. Si necesita un valor fraccional, use {{ domxref("element.getBoundingClientRect()") }}.</p> +</div> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxis</h2> + +<pre class="syntaxbox">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;</pre> + +<p><var>xScrollWidth</var> es el ancho del contenido de <var>element</var> en pixels.</p> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html> +<head> + <title>Ejemplo</title> + <style> + div { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + #aDiv { + width: 100px; + } + + button { + margin-bottom: 2em; + } + </style> +</head> + +<body> + <div id="aDiv"> + FooBar-FooBar-FooBar-FooBar + </div> + <button id="aButton"> + Check for overflow + </button> + + <div id="anotherDiv"> + FooBar-FooBar-FooBar-FooBar + </div> + <button id="anotherButton"> + Check for overflow + </button> +</body> +<script> + var buttonOne = document.getElementById('aButton'), + buttonTwo = document.getElementById('anotherButton'), + divOne = document.getElementById('aDiv'), + divTwo = document.getElementById('anotherDiv'); + + //comprueba si un desbordamiento está ocurriendo + function isOverflowing(element) { + return (element.scrollWidth > element.offsetWidth); + } + + function alertOverflow(element) { + if (isOverflowing(element)) { + alert('El contenido desborda el contenedor.'); + } else { + alert('Sin desobordamiento!'); + } + } + + buttonOne.addEventListener('click', function() { + alertOverflow(divOne); + }); + + buttonTwo.addEventListener('click', function() { + alertOverflow(divTwo); + }); +</script> +</html> + +</pre> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Especificación</th> + <th>Estado</th> + <th>Observaciones</th> + </tr> + <tr> + <td>{{SpecName("CSSOM View", "#dom-element-scrollwidth", "Element.scrollWidth")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Element.scrollWidth")}}</p> + + <h2 id="See_also" name="See_also">Ver también</h2> + + +<ul> + <li>{{domxref("Element.clientWidth")}}</li> + <li>{{domxref("HTMLElement.offsetWidth")}}</li> + <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determinando las dimensiones de elementos</a></li> +</ul> diff --git a/files/es/web/api/element/setattribute/index.html b/files/es/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..725efd11fc --- /dev/null +++ b/files/es/web/api/element/setattribute/index.html @@ -0,0 +1,88 @@ +--- +title: Element.setAttribute +slug: Web/API/Element/setAttribute +tags: + - API + - DOM + - Elemento + - NeedsBrowserCompatibility + - NeedsSpecTable + - Referencia + - metodo + - setAttribute +translation_of: Web/API/Element/setAttribute +--- +<p>{{APIRef("DOM")}}</p> + +<p>Establece el valor de un atributo en el elemento indicado. Si el atributo ya existe, el valor es actualizado, en caso contrario, el nuevo atributo es añadido con el nombre y valor indicado.</p> + +<p>Para obtener el valor actual de un atributo, se utiliza {{domxref("Element.getAttribute", "getAttribute()")}}; para eliminar un atributo, se llama a {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>Element</em>.setAttribute(<em>name</em>, <em>value</em>); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Un {{domxref("DOMString")}} indicando el nombre del atributo cuyo valor se va a cambiar. El nombre del atributo se convierte automáticamente en minúsculas cuando <code>setAttribute()</code> se llama sobre un elemento HTML en un documento HTML.</dd> + <dt><code>value</code></dt> + <dd>Un {{domxref("DOMString")}} que contenga el valor que asignar al atributo. Cualquier valor indicado que no sea una cadena de texto se convierte automáticamente en una cadena de texto.</dd> +</dl> + +<p>Los atributos booleanos se consideran <code>true</code> si al menos están presentes en el elemento, independientemente de su <code>value</code> actual; como regla, se debería especificar una cadena de texto vacía (<code>""</code>) en <code>value</code> (algunas personas utilizan el nombre del atributo; esto funciona pero no es un standard). Vea un {{anch("Ejemplo", "ejemplo")}} posterior para una demostración práctica.</p> + +<p>Dado que <code>value</code> se convierte en una cadena de texto, indicando <code>null</code> no necesariamente hace lo que se espera. En lugar de eliminar el atributo o establecer su valor para ser {{jsxref("null")}}, establece el valor del atributo a la cadena de texto <code>"null"</code>. Si se desea eliminar un atributo, se debe llamar a {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h3 id="Excepciones">Excepciones</h3> + +<dl> + <dt><code>InvalidCharacterError</code></dt> + <dd>El atributo especificado <code>name</code> contiene uno o más caracteres que no son válidos en el nombre del atributo.</dd> +</dl> + +<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2> + +<p>En el siguiente ejemplo, <code>setAttribute()</code> se utiliza para establecer atributos en un {{HTMLElement("button")}}.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><button>Hola Mundo</button></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush:js">var b = document.querySelector("button"); + +b.setAttribute("name", "helloButton"); +b.setAttribute("disabled", ""); +</pre> + +<p>Esto demuestra dos cosas:</p> + +<ul> + <li>La primera llamada a <code>setAttribute()</code> muestra cómo se cambia el valor del atributo <code>name</code> a "helloButton". Puede ver esto utilizando el inspector de página de su navegador (<a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles/?hl=es">Chrome</a>, <a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide">Edge</a>, <a href="/es/docs/Tools/Page_Inspector">Firefox</a>, <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html">Safari</a>).</li> + <li>Para establecer el valor de un atributo booleano, como <code>disabled</code>, se puede especificar cualquier valor. Una cadena de texto vacía o el nombre de un atributo son valores recomendados. Todo lo que importa es que si el atributo está presente, <em>independientemente de su valor actual</em>, su valor se considera como <code>true</code>. La ausencia del atributo significa que su valor es <code>false</code>. Estableciendo una cadena vacía (<code>""</code>) como el valor del atributo <code>disabled</code>, se estaría cambiando <code>disabled</code> a <code>true</code>, lo que provoca que el botón sea deshabilitado.</li> +</ul> + +<p>{{ EmbedLiveSample('Example', '300', '50') }}</p> + +<p>{{DOMAttributeMethods}}</p> + +<h2 id="Especificación" name="Especificación">Especificación</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (introducido en <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs en documentos HTML</a></li> +</ul> + +<h2 id="Compatibilidad con navegadores" name="Compatibilidad con navegadores">Compatibilidad con navegadores</h2> + +<h3 id="Notas" name="Notas">Notas Gecko</h3> + +<p>Utilizando <code>setAttribute()</code> para modificar ciertos atributos, el más notable es <code>value</code> en XUL, funciona de forma inconsistente, ya que el atributo especifica el valor determinado. Para acceder o modificar los valores actuales, se deben utilizar las propiedades. Por ejemplo, utilizar <code>Element.value</code> en lugar de <code>Element.setAttribute()</code>.</p> diff --git a/files/es/web/api/element/setattributens/index.html b/files/es/web/api/element/setattributens/index.html new file mode 100644 index 0000000000..59a4d9809e --- /dev/null +++ b/files/es/web/api/element/setattributens/index.html @@ -0,0 +1,33 @@ +--- +title: Element.setAttributeNS() +slug: Web/API/Element/setAttributeNS +translation_of: Web/API/Element/setAttributeNS +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code>setAttributeNS añade un nuevo atributo o cambia el valor de un atributo con el namespace dado y el nombre.</code></p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="eval"><em>elemento</em>.setAttributeNS(<em>namespace</em>,<em>nombre</em>,<em>valor</em>) +</pre> + +<ul> + <li><code>namespace</code> es un string especificando el namespace del atributo.</li> + <li><code>name es un string identificando el atributo a ser puesto.</code></li> + <li><code>value es el string del valor deseado del nuevo atributo.</code></li> +</ul> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="eval">var d = document.getElementById("d1"); +d.setAttributeNS("<span class="nowiki">http://www.mozilla.org/ns/specialspace</span>", "align", "center"); +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">DOM Level 2 Core: setAttributeNS</a></p> diff --git a/files/es/web/api/element/setcapture/index.html b/files/es/web/api/element/setcapture/index.html new file mode 100644 index 0000000000..b0c3ef52ab --- /dev/null +++ b/files/es/web/api/element/setcapture/index.html @@ -0,0 +1,86 @@ +--- +title: Element.setCapture() +slug: Web/API/Element/setCapture +tags: + - API + - DOM + - Element + - Método(2) + - Referencia +translation_of: Web/API/Element/setCapture +--- +<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("2.0") }}</p> + +<p><span id="result_box" lang="es"><span>Llame a este método durante el manejo de un evento mousedown para redirigir todos los eventos de mouse a este elemento hasta que se suelte el botón del mouse o se llame {{domxref ( "document.releaseCapture ()")}}.</span></span></p> + +<h2 id="Syntax" name="Syntax">Sintasix</h2> + +<pre class="eval">element.setCapture(<em>retargetToElement</em>); +</pre> + +<dl> + <dt><code>retargetToElement</code></dt> + <dd><span id="result_box" lang="es"> <span>Si es verdadero, todos los eventos se dirigen directamente a este elemento;</span> <span>Si es falso, los eventos también pueden descargar a los descendientes de este elemento.</span></span></dd> +</dl> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<p><span id="result_box" lang="es"><span>En este ejemplo, las coordenadas actuales del mouse se dibujan mientras situas el mouse alrededor después de hacer clic y mantener pulsado un elemento.</span></span></p> + +<pre class="brush: html"><html> +<head> + <title>Mouse Capture Example</title> + <style type="text/css"> + #myButton { + border: solid black 1px; + color: black; + padding: 2px; + -moz-box-shadow:black 2px 2px; + } + </style> + + <script type="text/javascript"> + function init() { + var btn = document.getElementById("myButton"); + btn.addEventListener("mousedown", mouseDown, false); + btn.addEventListener("mouseup", mouseUp, false); + } + + function mouseDown(e) { + e.target.setCapture(); + e.target.addEventListener("mousemove", mouseMoved, false); + } + + function mouseUp(e) { + e.target.removeEventListener("mousemove", mouseMoved, false); + } + + function mouseMoved(e) { + var output = document.getElementById("output"); + output.innerHTML = "Position: " + e.clientX + ", " + e.clientY; + } + </script> +</head> +<body onload="init()"> + <p>This is an example of how to use mouse capture on elements in Gecko 2.0.</p> + <p><a id="myButton" href="#">Test Me</a></p> + <div id="output">No events yet</div> +</body> +</html> +</pre> + +<p><a href="/samples/domref/mousecapture.html">Ver ejemplo en vivo</a></p> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p><span id="result_box" lang="es"><span>El elemento no puede desplazarse completamente hacia arriba o hacia abajo dependiendo del diseño de otros elementos.</span></span></p> + +<h2 id="Specification" name="Specification">Especificación</h2> + +<p>Ninguna.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{ domxref("document.releaseCapture()") }}</li> +</ul> diff --git a/files/es/web/api/element/shadowroot/index.html b/files/es/web/api/element/shadowroot/index.html new file mode 100644 index 0000000000..17af57bb3c --- /dev/null +++ b/files/es/web/api/element/shadowroot/index.html @@ -0,0 +1,83 @@ +--- +title: Element.shadowRoot +slug: Web/API/Element/shadowRoot +translation_of: Web/API/Element/shadowRoot +--- +<div>{{APIRef("Shadow DOM")}}</div> + + + +<p>La propiedad de solo lectura 'Element.shadowRoot' representa el shadow root alojado por el elemento. Use {{DOMxRef("Element.attachShadow()")}} para agregar un shadow root a un elemento existente.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>shadowroot =</em><em> element</em>.shadowRoot; +</pre> + +<h3 id="Value">Value</h3> + +<p>A {{DOMxRef("ShadowRoot")}} object instance, or <code>null</code> if the associated shadow root was attached with its {{DOMxRef("ShadowRoot.mode", "mode")}} set to <code>closed</code>. (See {{DOMxRef("Element.attachShadow()")}} for further details).</p> + +<h2 id="Examples">Examples</h2> + +<p>The following snippets are taken from our <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">life-cycle-callbacks</a> example (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks">see it live also</a>), which creates an element that displays a square of a size and color specified in the element's attributes.</p> + +<p>Inside the <code><custom-square></code> element's class definition we include some life cycle callbacks that make a call to an external function, <code>updateStyle()</code>, which actually applies the size and color to the element. You'll see that we are passing it <code>this</code> (the custom element itself) as a parameter.</p> + +<pre class="brush: js">connectedCallback() { + console.log('Custom square element added to page.'); + updateStyle(this); +} + +attributeChangedCallback(name, oldValue, newValue) { + console.log('Custom square element attributes changed.'); + updateStyle(this); +}</pre> + +<p>In the <code>updateStyle()</code> function itself, we get a reference to the shadow DOM using {{domxref("Element.shadowRoot")}}. From here we use standard DOM traversal techniques to find the {{htmlelement("style")}} element inside the shadow DOM and then update the CSS found inside it:</p> + +<pre class="brush: js">function updateStyle(elem) { + const shadow = elem.shadowRoot; + const childNodes = Array.from(shadow.childNodes); + + childNodes.forEach(childNode => { + if (childNode.nodeName === 'STYLE') { + childNode.textContent = ` + div { + width: ${elem.getAttribute('l')}px; + height: ${elem.getAttribute('l')}px; + background-color: ${elem.getAttribute('c')}; + } + `; + } + }); +}</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('DOM WHATWG', '#dom-element-shadowroot', 'shadowRoot')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Element.shadowRoot")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/es/web/api/element/tagname/index.html b/files/es/web/api/element/tagname/index.html new file mode 100644 index 0000000000..5f522efc3e --- /dev/null +++ b/files/es/web/api/element/tagname/index.html @@ -0,0 +1,44 @@ +--- +title: element.tagName +slug: Web/API/Element/tagName +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/tagName +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>Devuelve el nombre del elemento.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval"><em>elementName</em> = element.tagName +</pre> + +<ul> + <li><code>elementName</code> es una cadena que contiene el nombre del elemento actual.</li> +</ul> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>En XML (y los lenguajes basados en XML tales como XHTML) el código <code>tagName</code> es sensible a las mayúsculas. En HTML, <code>tagName</code> devuelve el nombre del elemento en forma canonica, es decir con todas sus letras en mayúscula. El valor del código of <code>tagName</code> es el mismo que el de la instrucción <a href="es/DOM/element.nodeName">nodeName</a>.</p> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<p>Si tenemos la siguiente línea de código:</p> + +<pre class="eval"><span id="born">Cuando yo nací...</span> +</pre> + +<p>y el siguiente script</p> + +<pre class="eval">var span = document.getElementById("born"); +alert(span.tagName); +</pre> + +<p>en XHTML (o alguna otra forma de XML) el resultado de la alerta será el contenido de "span". En HTML, el contenido será el de "SPAN".</p> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815">DOM Level 2 Core: tagName</a></p> diff --git a/files/es/web/api/element/wheel_event/index.html b/files/es/web/api/element/wheel_event/index.html new file mode 100644 index 0000000000..6b4e69d173 --- /dev/null +++ b/files/es/web/api/element/wheel_event/index.html @@ -0,0 +1,320 @@ +--- +title: wheel +slug: Web/API/Element/wheel_event +tags: + - eventos +translation_of: Web/API/Element/wheel_event +--- +<p>El evento "wheel" se dispara cuando la ruleta de un dispositivo (usualmente un ratón) gira. Este evento reemplaza al ahora obsoleto evento {{event("mousewheel")}}.</p> + +<h2 id="Información_general">Información general</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("WheelEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Sincronía</dt> + <dd style="margin: 0 0 0 120px;">asíncrono</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubble</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;">defaultView, Document, Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Acción predet.</dt> + <dd style="margin: 0 0 0 120px;">Scroll, atras/adelante (historial), o zoom.</dd> +</dl> + +<h2 id="Propiedades">Propiedades</h2> + +<p><em>Este evento implementa las propiedades de: {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.</em></p> + +<h3 id="Propiedades_de_WheelEvent">Propiedades de <code>WheelEvent</code></h3> + +<p>{{page("/en-US/docs/Web/API/WheelEvent", "Properties")}}</p> + +<h3 id="Propiedades_de_MouseEvent">Propiedades de <code>MouseEvent</code></h3> + +<p>{{page("/en-US/docs/Web/API/MouseEvent", "Properties")}}</p> + +<h3 id="Propiedades_UIEvent">Propiedades <code>UIEvent</code></h3> + +<p>{{page("/en-US/docs/Web/API/UIEvent", "Properties")}}</p> + +<h3 id="Propiedades_Event">Propiedades <code>Event</code></h3> + +<p>{{page("/en-US/docs/Web/API/Event", "Properties")}}</p> + +<h2 id="Métodos">Métodos</h2> + +<p><em>Este evento implementa los métodos de: {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.</em></p> + +<h3 id="Métodos_de_WheelEvent">Métodos de <code>WheelEvent</code></h3> + +<p>{{page("/en-US/docs/Web/API/WheelEvent", "Methods")}}</p> + +<h3 id="Métodos_de_MouseEvent">Métodos de <code>MouseEvent</code></h3> + +<p>{{page("/en-US/docs/Web/API/MouseEvent", "Methods")}}</p> + +<h3 id="Métodos_de_UIEvent">Métodos de <code>UIEvent</code></h3> + +<p>{{page("/en-US/docs/Web/API/UIEvent", "Methods")}}</p> + +<h3 id="Métodos_de_Event">Métodos de <code>Event</code></h3> + +<p>{{page("/en-US/docs/Web/API/Event", "Methods")}}</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('DOM3 Events','DOM3-Events.html#event-type-wheel','wheel')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad">Compatibilidad</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>31</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("17.0")}}</td> + <td>{{CompatIE("9.0")}}<sup>[1]</sup></td> + <td>18</td> + <td>7.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("17.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer solo toma el evento "wheel" mediante <code>addEventListener</code>, no se permite el atributo <code>onwheel</code> en objetos del DOM. <a href="https://connect.microsoft.com/IE/feedback/details/782835/missing-onwheel-attribute-for-the-wheel-event-although-its-supported-via-addeventlistener">Bug report.</a><br> + </p> + +<h3 id="Escuchar_al_evento_en_distintos_navegadores">Escuchar al evento en distintos navegadores</h3> + +<p>En el siguiente script se crea el método multi-navegador <code>addWheelListener </code>que permite escuchar el evento wheel en diferentes navegadores a la vez que se previene el funcionamiento por defecto.</p> + +<pre class="brush:js;">// crea el metodo "addWheelListener" global +// ejemplo: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } ); +(function(window,document) { + + var prefix = "", _addEventListener, support; + + // detecta el tipo de evento permitido por el navegador + if ( window.addEventListener ) { + _addEventListener = "addEventListener"; + } else { + _addEventListener = "attachEvent"; + prefix = "on"; + } + + // detecta el tipo de evento wheel manejado por el navegador + support = "onwheel" in document.createElement("div") ? "wheel" : // Los navegadores modernos permiten "wheel" + document.onmousewheel !== undefined ? "mousewheel" : // Webkit e IE soportan al menos "mousewheel" + "DOMMouseScroll"; // Asumiremos que el resto de navegadores son Firefox antiguos + + window.addWheelListener = function( elem, callback, useCapture ) { + _addWheelListener( elem, support, callback, useCapture ); + + // controlaremos MozMousePixelScroll en Firefox antiguos + if( support == "DOMMouseScroll" ) { + _addWheelListener( elem, "MozMousePixelScroll", callback, useCapture ); + } + }; + + function _addWheelListener( elem, eventName, callback, useCapture ) { + elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) { + !originalEvent && ( originalEvent = window.event ); + + // Creamos un objeto de evento + var event = { + // tomamos como referencia el objeto original + originalEvent: originalEvent, + target: originalEvent.target || originalEvent.srcElement, + type: "wheel", + deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1, + deltaX: 0, + deltaZ: 0, + preventDefault: function() { + originalEvent.preventDefault ? + originalEvent.preventDefault() : + originalEvent.returnValue = false; + } + }; + + // calculamos deltaY (y deltaX) dependiendo del evento + if ( support == "mousewheel" ) { + event.deltaY = - 1/40 * originalEvent.wheelDelta; + // Webkit tambien soporta wheelDeltaX + originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX ); + } else { + event.deltaY = originalEvent.detail; + } + + // Disparamos el callback + return callback( event ); + + }, useCapture || false ); + } + +})(window,document);</pre> + +<h2 id="Notas_para_Gecko">Notas para Gecko</h2> + +<h3 id="Orden_de_los_eventos_en_eventos_antiguos">Orden de los eventos en eventos antiguos</h3> + +<p>Si el evento wheel no ha sido implementado, los eventos <code>DOMMouseScroll</code> y <code>MozMousePixelScroll</code> se usarán para dar retrocompativilidad. Sus atributos se calculan dependiendo del delta del evento wheel y el padre más cercano. Si el evento wheel o alguno de los anteriores invoca<span style="line-height: 1.5;"> {{ domxref("event.preventDefault()") }}, no ocurrirá nada.</span></p> + +<p>El orden de ejecución del evento es:</p> + +<ol> + <li>Eventos wheel en grupo de eventos por defecto (aplicaciones web y add-ons pueden manejar los eventos de este grupo)</li> + <li><code>Un evento DOMMouseScroll</code> vertical en caso de que el deltaY, en consecutivas llamadas del evento se vuelva mayor que 1.0 o menor que -1.0</li> + <li><code>Un evento MozMousePixelScroll</code> vertical en caso de que el <code>deltaY</code> del último evento <code>wheel</code> no sea igual a cero</li> + <li><code>Un evento DOMMouseScroll</code> horizontal en caso de que el <code>deltaX</code> acumule un valor mayor que 1.0 o menor que -1.0</li> + <li><code>Un evento MozMousePixelScroll</code> horizontal en caso de que el <code>deltaX</code> del último evento no sea igual que cero</li> + <li>Un evento <code>wheel</code> en el grupo de sistema (Solamente add-ons pueden gestionar este grupo de eventos)</li> +</ol> + +<p><br> + <span style="font-style: inherit; line-height: 1.5;">¿Qué ocurre si</span><strong style="font-style: inherit; font-weight: 700; line-height: 1.5;"> </strong><code style="font-weight: 700; line-height: 1.5;">preventDefault()</code><strong style="font-style: inherit; font-weight: 700; line-height: 1.5;"> es llamado?</strong></p> + +<table> + <thead> + </thead> + <tbody> + <tr> + <th scope="row"><code>wheel</code> (grupo por defecto de evetos)</th> + <td><code>Se llama preventDefault()</code></td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <th scope="row"><code>DOMMouseScroll</code> (Vertical)</th> + <td>No se llama</td> + <td><code>Se llama preventDefault()</code></td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <th scope="row"><code>MozMousePixelScroll</code> (Vertical)</th> + <td>No se llama</td> + <td><code>defaultPrevented</code> devuelve true</td> + <td><code>Se llama preventDefault()</code></td> + <td> </td> + <td> </td> + </tr> + <tr> + <th scope="row"><code>DOMMouseScroll</code> (Horizontal)</th> + <td>No se llama</td> + <td>No se ve afectado</td> + <td>No se ve afectado</td> + <td><code>Se llama preventDefault()</code></td> + <td> </td> + </tr> + <tr> + <th scope="row"><code>MozMousePixelScroll</code> (Horizontal)</th> + <td>No se llama</td> + <td>No se ve afectado</td> + <td>No se ve afectado</td> + <td><code>defaultPrevented</code> devuelve true</td> + <td><code>Se llama preventDefault()</code></td> + </tr> + <tr> + <th scope="row"><code>wheel</code> (grupo de eventos de sistema)</th> + <td><code>defaultPrevented</code> devuelve true</td> + <td><code>defaultPrevented</code> devuelve true</td> + <td><code>defaultPrevented</code> devuelve true</td> + <td><code>defaultPrevented</code> devuelve true</td> + <td><code>defaultPrevented</code> devuelve true</td> + </tr> + </tbody> +</table> + +<p>En caso de que un Add-on necesite conocer si uno de los eventos legacy es usado por contenidos del DOM puede usar el evento wheel de #6. Lee la documentación de <a href="/en-US/docs/XPCOM_Interface_Reference/nsIEventListenerService" title="/en-US/docs/XPCOM_Interface_Reference/nsIEventListenerService"><code>nsIEventListenerService</code></a> para mayor detalle acerca del grupo de eventos de sistema.</p> + +<p>Los valores delta y las acciones por defecto de eventos predefinidos pueden ser personalizados en las preferencias de usuario (<a href="https://wiki.mozilla.org/Gecko:Mouse_Wheel_Scrolling#Preferences_for_customizing_delta_values_and_default_action" title="/en-US/docs/HTML/Element/details">details</a>). Por lo tanto, no se debe presuponer que alguna acción en concreto va a ocurrir tras recibir este evento.</p> + +<h3 id="Valores_delta">Valores delta</h3> + +<p>Los valores delta no indican la cantidad de scroll actual de manera predeterminada. Si el usuario presiona alguna tecla mdificadora mientras mueve la rueda de scroll, dicha acción puede causar otra totalmente diferente a la esperada, como ir adelante o atras por el historial o hacer zoom. Además, incluso cuando la acción sea la esperada, el elemento que la recibe puede ser distinto al deseado.<br> + El objetivo del evento wheel solo está definido por la posición del cursor en el momento que se dispara este.</p> + +<h3 id="El_valor_de_deltaMode">El valor de deltaMode</h3> + +<p>En Windows, los siguientes 3 eventos nativos del DOM causan eventos <code>wheel</code>.</p> + +<dl> + <dt>WM_MOUSEWHEEL (Evento wheel vertical del ratón)</dt> + <dd>El <code>deltaMode</code> puede ser <code>DOM_DELTA_LINE</code> o <code>DOM_DELTA_PAGE</code>. Depende de las preferencias de usuario en Windows (Para configuraciones por defecto, debería ser <code>DOM_DELTA_LINE</code>).</dd> + <dt>WM_MOUSEHWHEEL (Evento wheel horizontal del ratón)</dt> + <dd><code>EldeltaMode</code> puede ser <code>DOM_DELTA_LINE</code> o <code>DOM_DELTA_PAGE</code>. Sin embargo, ni la configuración de velocidad de rueda de ratón de Windows ni ningún UI similar de drivers permite modificar el scroll de páginas. De modo que, normalmente este valor es <code>DOM_DELTA_LINE</code>.</dd> + <dt>WM_GESTURE (Solo utilizado en navegación gestual)</dt> + <dd>El <code>deltaMode</code> es siempre <code>DOM_DELTA_PIXEL</code>. Pero la mayoría de dispositivos táctiles de portatiles emulan la rueda de ratón en lugar de usar este evento. Este evento es usado típicamente en Tablet PC.</dd> +</dl> + +<p>En Mac, el valor de <code>deltaMode</code> depende del dispositivo. Si el dispositivo permite alta resolución, el scroll se hará en pixels, de manera que el valor del <code>deltaMode</code> será <code>DOM_DELTA_PIXEL</code>. De todos modos, el usuario puede cambiarlo a <code>DOM_DELTA_LINE</code> con la preferencia <code>"mousewheel.enable_pixel_scrolling"</code>. Si el dispositivo no soporta alta resolución, es siembre <code>DOM_DELTA_LINE</code>.</p> + +<p>En otras plataformas, el valor de <code>deltaMode</code> es siempre <code>DOM_DELTA_LINE</code>.</p> + +<h3 id="Eventos_no_confiables">Eventos no confiables</h3> + +<p>Los eventos <code>wheel</code> no nativos nunca causarán acción por defecto.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{ domxref("WheelEvent") }}</li> + <li>Gecko's legacy events: <code>DOMMouseScroll</code> and <code>MozMousePixelScroll</code></li> + <li>Non-Gecko browsers' legacy event: <code>mousewheel</code></li> + <li>WebKit bug: <a href="https://bugs.webkit.org/show_bug.cgi?id=94081" title="https://bugs.webkit.org/show_bug.cgi?id=94081">https://bugs.webkit.org/show_bug.cgi?id=94081</a></li> +</ul> |