From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/api/element/accesskey/index.html | 22 + files/es/web/api/element/animate/index.html | 208 ++++++++ files/es/web/api/element/attachshadow/index.html | 158 ++++++ files/es/web/api/element/attributes/index.html | 157 ++++++ files/es/web/api/element/classlist/index.html | 215 ++++++++ files/es/web/api/element/classname/index.html | 130 +++++ files/es/web/api/element/click_event/index.html | 280 +++++++++++ files/es/web/api/element/clientheight/index.html | 61 +++ files/es/web/api/element/clientleft/index.html | 58 +++ files/es/web/api/element/clienttop/index.html | 54 +++ files/es/web/api/element/clientwidth/index.html | 60 +++ files/es/web/api/element/closest/index.html | 145 ++++++ .../es/web/api/element/computedstylemap/index.html | 99 ++++ files/es/web/api/element/currentstyle/index.html | 80 +++ files/es/web/api/element/getattribute/index.html | 48 ++ .../web/api/element/getattributenodens/index.html | 38 ++ .../api/element/getboundingclientrect/index.html | 98 ++++ files/es/web/api/element/getclientrects/index.html | 54 +++ .../api/element/getelementsbyclassname/index.html | 112 +++++ .../api/element/getelementsbytagname/index.html | 50 ++ .../api/element/getelementsbytagnamens/index.html | 128 +++++ files/es/web/api/element/hasattribute/index.html | 123 +++++ files/es/web/api/element/id/index.html | 119 +++++ files/es/web/api/element/index.html | 539 +++++++++++++++++++++ files/es/web/api/element/innerhtml/index.html | 151 ++++++ .../api/element/insertadjacentelement/index.html | 115 +++++ .../web/api/element/insertadjacenthtml/index.html | 99 ++++ files/es/web/api/element/localname/index.html | 152 ++++++ files/es/web/api/element/matches/index.html | 120 +++++ .../es/web/api/element/mousedown_event/index.html | 223 +++++++++ files/es/web/api/element/name/index.html | 79 +++ files/es/web/api/element/namespaceuri/index.html | 125 +++++ .../web/api/element/ongotpointercapture/index.html | 133 +++++ .../api/element/onlostpointercapture/index.html | 132 +++++ files/es/web/api/element/onwheel/index.html | 31 ++ files/es/web/api/element/outerhtml/index.html | 143 ++++++ files/es/web/api/element/prefix/index.html | 115 +++++ files/es/web/api/element/queryselector/index.html | 187 +++++++ .../es/web/api/element/removeattribute/index.html | 41 ++ .../web/api/element/requestfullscreen/index.html | 104 ++++ files/es/web/api/element/runtimestyle/index.html | 82 ++++ files/es/web/api/element/scrollheight/index.html | 212 ++++++++ files/es/web/api/element/scrollintoview/index.html | 151 ++++++ files/es/web/api/element/scrollleft/index.html | 153 ++++++ files/es/web/api/element/scrolltop/index.html | 69 +++ files/es/web/api/element/scrolltopmax/index.html | 80 +++ files/es/web/api/element/scrollwidth/index.html | 119 +++++ files/es/web/api/element/setattribute/index.html | 88 ++++ files/es/web/api/element/setattributens/index.html | 33 ++ files/es/web/api/element/setcapture/index.html | 86 ++++ files/es/web/api/element/shadowroot/index.html | 83 ++++ files/es/web/api/element/tagname/index.html | 44 ++ files/es/web/api/element/wheel_event/index.html | 320 ++++++++++++ 53 files changed, 6506 insertions(+) create mode 100644 files/es/web/api/element/accesskey/index.html create mode 100644 files/es/web/api/element/animate/index.html create mode 100644 files/es/web/api/element/attachshadow/index.html create mode 100644 files/es/web/api/element/attributes/index.html create mode 100644 files/es/web/api/element/classlist/index.html create mode 100644 files/es/web/api/element/classname/index.html create mode 100644 files/es/web/api/element/click_event/index.html create mode 100644 files/es/web/api/element/clientheight/index.html create mode 100644 files/es/web/api/element/clientleft/index.html create mode 100644 files/es/web/api/element/clienttop/index.html create mode 100644 files/es/web/api/element/clientwidth/index.html create mode 100644 files/es/web/api/element/closest/index.html create mode 100644 files/es/web/api/element/computedstylemap/index.html create mode 100644 files/es/web/api/element/currentstyle/index.html create mode 100644 files/es/web/api/element/getattribute/index.html create mode 100644 files/es/web/api/element/getattributenodens/index.html create mode 100644 files/es/web/api/element/getboundingclientrect/index.html create mode 100644 files/es/web/api/element/getclientrects/index.html create mode 100644 files/es/web/api/element/getelementsbyclassname/index.html create mode 100644 files/es/web/api/element/getelementsbytagname/index.html create mode 100644 files/es/web/api/element/getelementsbytagnamens/index.html create mode 100644 files/es/web/api/element/hasattribute/index.html create mode 100644 files/es/web/api/element/id/index.html create mode 100644 files/es/web/api/element/index.html create mode 100644 files/es/web/api/element/innerhtml/index.html create mode 100644 files/es/web/api/element/insertadjacentelement/index.html create mode 100644 files/es/web/api/element/insertadjacenthtml/index.html create mode 100644 files/es/web/api/element/localname/index.html create mode 100644 files/es/web/api/element/matches/index.html create mode 100644 files/es/web/api/element/mousedown_event/index.html create mode 100644 files/es/web/api/element/name/index.html create mode 100644 files/es/web/api/element/namespaceuri/index.html create mode 100644 files/es/web/api/element/ongotpointercapture/index.html create mode 100644 files/es/web/api/element/onlostpointercapture/index.html create mode 100644 files/es/web/api/element/onwheel/index.html create mode 100644 files/es/web/api/element/outerhtml/index.html create mode 100644 files/es/web/api/element/prefix/index.html create mode 100644 files/es/web/api/element/queryselector/index.html create mode 100644 files/es/web/api/element/removeattribute/index.html create mode 100644 files/es/web/api/element/requestfullscreen/index.html create mode 100644 files/es/web/api/element/runtimestyle/index.html create mode 100644 files/es/web/api/element/scrollheight/index.html create mode 100644 files/es/web/api/element/scrollintoview/index.html create mode 100644 files/es/web/api/element/scrollleft/index.html create mode 100644 files/es/web/api/element/scrolltop/index.html create mode 100644 files/es/web/api/element/scrolltopmax/index.html create mode 100644 files/es/web/api/element/scrollwidth/index.html create mode 100644 files/es/web/api/element/setattribute/index.html create mode 100644 files/es/web/api/element/setattributens/index.html create mode 100644 files/es/web/api/element/setcapture/index.html create mode 100644 files/es/web/api/element/shadowroot/index.html create mode 100644 files/es/web/api/element/tagname/index.html create mode 100644 files/es/web/api/element/wheel_event/index.html (limited to 'files/es/web/api/element') 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 +--- +
{{APIRef("DOM")}}
+ +
 
+ +

La propiedad Element.accessKey establece la pulsación de teclado mediante el cual un usuario puede presionar para saltar a este elemento.

+ +
+

Nota: la propiedad Element.accessKey se usa raramente debido a sus múltiples conflictos con las asociaciones de teclas que ya están presentes  en los navegadores. Para evitar esto, los navegadores implementan el comportamiento tecla de acceso si se pulsan las claves con otras teclas "cualificadas" (como Alt + tecla de acceso).

+
+ +

 

+ +

 

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

{{APIRef('Web Animations')}} {{SeeCompatTable}}

+ +

El método Element.animate() es un método abreviado para crear y reproducir una animación en un elemento. Devuelve la instancia creada de un objeto {{domxref("Animation")}} .

+ +

Síntaxis

+ +
+
element.animate(keyframes, options); 
+
+ +

Parámetros

+ +
+
keyframes
+
+

Un Objeto formateado para representar un conjunto de fotogramas clave.

+
+
opciones
+
Puede ser un entero representando la duración de la animación  (en milisegundos), o un Objeto conteniendo una o más propiedades de sincronización: 
+
+
+
id {{optional_inline}}
+
Una propiedad única para animar(): a DOMString con la cual se hace referencia a la animación.
+
+ {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}
+
+ +

Opciones Futuras

+ +

Las siguientes opciones actualmente no se han enviado a todos los sitios, pero se añadirán en un futuro próximo.

+ +
+
composite {{optional_inline}}
+
Determina como se combinan los valores entre esta animación y otra, animaciones independientes sin especificar la composición de su propia operación. Valores predeterminados a reemplazar. +
    +
  • añadir dicta un efecto aditivo, donde cada iteración sucesiva se basa en la anterior. Por ejemplo con transform, a translateX(-200px) no anularía un valor anterior rotate(20deg) que resultaría  translateX(-200px) rotate(20deg).
    • +
  • acumular es similar pero un poco más inteligente: blur(2) y blur(5) resultaría  blur(7), no blur(2) blur(5).
    • +
  • remplazar sobreescribe el valor anterior con el nuevo.
    • +
+
+
iterationComposite {{optional_inline}}
+
Determina como se construyen los valores de una iteración a otra en esta animación. . Se puede configurar para acumular o reemplazar (ver arriba). Valores predeterminados para reemplazar.
+
spacing {{optional_inline}}
+
Determina como los keyframes sin compensación temporal  deben ser distribuidos durante la duración de la animación. Valores predeterminados para distribuir. +
    +
  • distribuir las posiciones de los 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.
    • +
  • situar las posiciones de los 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.
    • +
+ +

 

+
+
+ +

Valor de retorno

+ +

Returns an {{domxref("Animation")}}.

+ +

Ejemplo

+ +

En la demostración Down the Rabbit Hole (con la Web Animation API), utilizamos el método conveniente, animate() para inmediatamente crear y ejecutar una animación en el elemento  #tunnel  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.

+ +
document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translateY(0px)' },
+  { transform: 'translateY(-300px)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+});
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}{{Spec2('Web Animations')}}Initial definition
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome("36")}}{{CompatUnknown}}{{ CompatGeckoDesktop("48.0")}}{{CompatUnknown}}23{{CompatUnknown}}
id option{{CompatChrome(50.0)}}{{CompatUnknown}}{{ CompatGeckoDesktop("48.0")}}{{CompatUnknown}}37{{CompatUnknown}}
composite, iterationComposite, and spacing options{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatChrome(39.0)}}{{CompatChrome(39.0)}}{{ CompatGeckoMobile("48.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
id option{{CompatNo}}{{CompatChrome(50.0)}}{{CompatChrome(50.0)}}{{ CompatGeckoMobile("48.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
composite, iterationComposite, and spacing options{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver También

+ + +
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 +--- +
{{APIRef('Shadow DOM')}}
+ +

El método Element.attachShadow() adjunta un árbol DOM "sombra" al elemento especificado y devuelve una referencia a su raíz {{domxref("ShadowRoot")}}.

+ +

Elementos a los que puedes adjuntar un DOM "sombra"

+ +

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 pueden adjuntar un DOM "sombra":

+ + + +

Syntaxis

+ +
var shadowroot = element.attachShadow(shadowRootInit);
+
+ +

Parámetros

+ +
+
shadowRootInit
+
Un diccionario ShadowRootInit , que puede contener los siguientes campos: +
+
mode
+
+

Una cadena que especifique el modo de encapsulación para el árbol DOM "sombra". Este puede tener uno de los siguientes valores:

+ +
    +
  • open: Los elementos del árbol son accesibles desde fuera del elemento, por ejemplo usando {{domxref("Element.shadowRoot")}}:
    + + 
    element.shadowRoot; // Returns a ShadowRoot obj
    +
    • +
  • closed: Deniega el acceso a lo(s) nodo(s) desde fuera mediante JavaScript:
    + + 
    element.shadowRoot; // Returns null
+
    +
    • +
+
+
delegatesFocus
+
Un booleano que, si se establece a true, 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 :focus.
+
+
+
+ +

Valor retorno

+ +

Devuelve un objeto {{domxref("ShadowRoot")}}.

+ +

Excepciones

+ + + + + + + + + + + + + + + + + + +
ExcepciónExplicación
InvalidStateErrorEl elemento que estás intentando adjuntar ya tiene una DOM "sombra".
NotSupportedErrorEstá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).
+ +

Ejemplos

+ +

Los siguientes ejemplos están tomados de la demo word-count-web-component  (verlo también en modo live). Puedes ver que usamos attachShadow() en mitad del código para crear una DOM "sombra", a la que luego adjuntamos el contenido de nuesto elemento personalizado.

+ +
// 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' });
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}{{Spec2('DOM WHATWG')}}
+ +

Compatibilidad navegadores

+ + + +

{{Compat("api.Element.attachShadow")}}

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

{{ APIRef("DOM") }}

+ +

La propiedad Element.attributes retorna una colección "viva" cuyos nodos son todos los atributos registrados en el nodo especificado. Es un {{domxref("NamedNodeMap")}}, no un Array, 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 attributes es un conjunto de pares de cadenas nombre/valor que representan la información relativa a cada atributo.

+ +

Sintaxis

+ +
var attr = element.attributes;
+
+ +

Ejemplo

+ +

Ejemplos básicos

+ +
// Obtiene el primer elemento <p> en el documento
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+ +

Enumerando atributos de elemtentos

+ +

La indexación numérica es útil para recorrer de todos los atributos de un elemento.
+ 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.

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

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}{{Spec2('DOM WHATWG')}}From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} a {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM3 Core')}}Sin cambios desde {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM2 Core')}}Sin cambios desde {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM1')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]6.0 [2]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

[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.

+ +

[2] Internet Explorer 5.5 retorna un mapa conteniendo los valores en lugar de objetos attribute.

+ +

Ver también

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

La propiedad de sólo lectura Element.classList devuelve una colección activa de DOMTokenList de los atributos de clase del elemento.

+ +

Usar classList 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")}}.

+ +

Sintaxis

+ +
var elementClasses = elementNodeReference.classList;
+
+ +

elementClasses es un DOMTokenList que representa el atributo clase de elementNodeReference. Si el atributo clase no está definido o está vacío, elementClasses.length devuelve 0. element.classList por sí mismo es de sólo lectura, aunque puede ser modificado usando los métodos add() y remove().

+ +

Métodos

+ +
+
add( String [, String] )
+
Añade las clases indicadas. Si estas clases existieran en el atributo del elemento serán ignoradas.
+
remove( String [, String] )
+
Elimina las clases indicadas.
+ Nota: Eliminar una clase que no existe NO produce un error.
+
item( Number )
+
Devuelve el valor de la clase por índice en la colección.
+
toggle( String [, force] )
+
Cuando sólo hay un argumento presente: Alterna el valor de la clase; ej., si la clase existe la elimina y devuelve false, si no, la añade y devuelve true.
+ Cuando el segundo argumento está presente: Si el segundo argumento se evalúa como true, se añade la clase indicada, y si se evalúa como false, la elimina.
+
contains( String )
+
Comprueba si la clase indicada existe en el atributo de clase del elemento.
+
replace( oldClass, newClass )
+
Reemplaza una clase existente por una nueva.
+
+ +

Ejemplos

+ +
// 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");
+ +
+

Las versiones de Firefox anteriores a la 26 no implementan el uso de múltiples argumentos en los métodos add/remove/toggle. Vea https://bugzilla.mozilla.org/show_bug.cgi?id=814014

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}{{Spec2("HTML WHATWG")}}Nota en la especificación de HTML relacionada con el atributo {{htmlattrxref("class")}}.
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Definición inicial
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}} 
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico812{{CompatGeckoDesktop(1.9.2)}}10[1]11.505.1
Segundo argumento del método toggle()2412{{CompatGeckoDesktop(24)}}{{CompatNo}}[2]157
Múltiples argumentos para add() y remove()2812{{CompatGeckoDesktop(26)}}{{CompatNo}}157
replace()61{{CompatUnknown}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico3.012{{CompatGeckoMobile(1.9.2)}}10[1]11.105.0
Segundo argumento del método toggle()4.412{{CompatGeckoMobile(24)}}{{CompatNo}}[2]{{CompatUnknown}}7.0
Múltiples argumentos para add() y remove()4.412{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}7.0
replace(){{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] No soportado para elementos SVG.  Vea un informe de Microsoft acerca de esto.
+ [2] Internet Explorer no lo implementa actualmente. Vea un informe de Microsoft acerca de esto.

+ +

Vea también

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Resumen

+ +

className obtiene y establece el valor del atributo class del elemento especificado.

+ +

Sintaxis

+ +
var cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+ + + +

Ejemplo

+ +
let elm = document.getElementById('item');
+
+if(elm.className === 'active'){
+    elm.className = 'inactive';
+} else {
+    elm.className = 'active';
+}
+ +

Notas

+ +

El nombre className es utilizado para esta propiedad en lugar de class para evitar conflictos con la palabra clave "class" existente en muchos de los lenguages que son usados para manipular el DOM.

+ +

className también puede ser una instancia de {{domxref("SVGAnimatedString")}} si element es un {{domxref("SVGElement")}}. Es mejor de obtener/establecer la propiedad className de un elemento utilizando {{domxref("Element.getAttribute")}} y {{domxref("Element.setAttribute")}} si estás tratando con elementos SVG.

+ +
elm.setAttribute('class', elm.getAttribute('class'))
+ +

 

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-element-classname", "element.className")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}{{Spec2("DOM2 HTML")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

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

El evento "click" se dispara cuando se presiona el botón de un dispositivo de entrada (Mouse o Mousepad) sobre un elemento. 

+ +

Información General

+ +
+
Especificación
+
DOM L3
+
Interfaz
+
{{domxref("MouseEvent")}}
+
Bubbles
+
Yes
+
Cancelable
+
Yes
+
Target
+
Element
+
Default Action
+
Varies
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)A count of consecutive clicks that happened in a short amount of time, incremented by one.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe 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.
buttons {{readonlyInline}}unsigned shortThe 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). More info.
mozPressure {{readonlyInline}}floatThe 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).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Ejemplo

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

Compatibilidad con Navegadores

+ +

Internet Explorer

+ +

Internet Explorer 8 & 9 tiene problemas con elementos con un  valor {{cssxref("background-color")}} de transparent que es sobrepuesto a los demas elementos por lo que no les permite recibir el evento.

+ +

Un ejemplo aqui

+ +

¿Cómo evitarlo?

+ + + +

Safari Mobile

+ +

En Safari Mobile 7.0+ ( también algunas versiones anteriores) presenta un problema cuando se da click sobre elementos que no son tipicamente interactivos como es el caso de un div. 

+ +

¿Cómo evitarlo?

+ + + +

Lo siguientes elementos son considerados por Safari típicamente interactivos

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En elementos inhabilitados{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatVersionUnknown}}[2]{{CompatNo}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
En elementos inhabilitados{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Sólo funciona para los tipos {{HTMLElement("textarea")}} elements and some {{HTMLElement("input")}} .

+ +

[2] Internet Explorer sólo dispara el evento click en los elementos  {{HTMLElement("input")}} tipo checkbox o radio cuando se ha realizdo sobre ellos un doble click.

+ +

Véase también

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

{{ APIRef("DOM") }}

+ +

La propiedad de sólo lectura Element.clientHeight devuelve la altura de un elemento en píxeles, incluyendo el padding pero no las barras horizontales, el borde o el margen.

+ +

clientHeight puede ser calculado como CSS height + CSS padding - alto de la barra horizontal (si existe).

+ +
+

Nota: Esta propiedad redondeará el valor a un entero. Si necesitas un valor fraccional usa {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Sintaxis

+ +
var h = element.clientHeight;
+ +

h es un entero que representa el alto de element en píxeles.

+ +

Ejemplo

+ +

 

+ +

             Image:Dimensions-client.png

+ + +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-htmlelement-clientheight', 'clientheight')}}{{Spec2('CSSOM View')}} 
+ +

Notas

+ +

clientHeight es una propiedad introducida en el modelo de objeto de Internet Explorer.

+ +

Ver también

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

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

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 esrtl (derecha a izquierda) y si hay un desbordamiento que provoque la aparición de la barra en el lado izquierdo. clientLeft NO incluyemargin-left o padding-left. clientLeft es de sólo lectura.

+ +

Las aplicaciones "Gecko-based applications" implementan clientLeft a partir de Gecko 1.9 (Firefox 3, ver {{ Bug(111207) }}). Esta propiedad no está implementada en Firefox 2 o anteriores.

+ +

Sintaxis

+ +
var left = element.clientLeft;
+
+ +

Ejemplo

+ +
+
+

padding-top

+ +

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.

+ +

Image:BirmanCat.jpgTodos los Birmanos tienen pintas y coloración obscura en la cara, orejas, patas y cola.

+ +

La imagen del gato y el texto vienen de www.best-cat-art.com

+ +

padding-bottom

+
+LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ 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') }}
+ +

Image:clientLeft.png

+ +

La barra de desplazamiento vertical en el lado izquierdo, aparece cuando la propiedad layout.scrollbar.side tiene el valor 1 o 3

+ +

Cuando la propiedad layout.scrollbar.side se establece a 1 o a 3 y la dirección de texto está puesta a RTL, entonces la barra de desplazamiento se pone a la izquierda y esto afecta a la forma en que se calcula clientLeft.

+ +

Especificación

+ +

No es parte de ninguna especificación W3C.

+ +

Notas

+ +

clientLeft apareció por primera vez en el modelo de objetos de MS IE DHTML.

+ +

La posición de la barra de desplazamiento vertical en textosrtl depende de la preferencias de layout.scrollbar.side

+ +

Referencias

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

 

+ +

{{ Fx_minversion_header(3) }} {{ ApiRef() }}

+ +

Resumen

+ +

El ancho del borde superior de un elemento en pixel. No incluye ni elmargin-top , ni elpadding-top . clientTop es de sólo lectura.

+ +

Las aplicaciones "Gecko-based applications" implementan el uso de clientTop a partir de Gecko 1.9 (Firefox 3,ver {{ Bug(111207) }}). Esta propiedad no está disponible en Firefox 2 o anteriores.

+ +

Sintaxis

+ +
vartop = element.clientTop;
+
+ +

Ejemplo

+ +
+
+

padding-top

+ +

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.

+ +

Image:BirmanCat.jpgTodos los Birmanos tienen pintas y coloración obscura en la cara, orejas, patas y cola.

+ +

La imagen del gato y el texto vienen de www.best-cat-art.com

+ +

padding-bottom

+
+LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ 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') }}
+ +

Image:clientTop.png

+ +

Especificación

+ +

No es parte de ninguna especificación W3C.

+ +

Notas

+ +

clientTop se presento por primera vez en el modelo de objetos de MS IE DHTML.

+ +

Referencias

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

{{ APIRef("DOM") }}

+ +

La propiedad Element.clientWidth 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.

+ +
+

El valor de esta propiedad será redondeado a un entero. Si necesita un valor fraccional, use {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Sintaxis

+ +
var intElemClientWidth = element.clientWidth;
+
+ +

intElemClientWidth será un entero que corresponde con el clientWidth del elemento en pixels. clientWidth es de sólo-lectura.

+ +

Ejemplo

+ +

 

+ +

             Image:Dimensions-client.png

+ + +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}{{Spec2("CSSOM View")}} 
+ +

Notas

+ +

clientWidth fue introducida en el modelo de objetos DHTML de MS IE.

+ +

Compatibilidad con navegadores

+ +

{{Compat("api.Element.clientWidth")}}

+ +

Ver también

+ + 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 +--- +
{{APIRef('Shadow DOM')}}
+ +

El método closest() 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 null.

+ +

Sintaxis

+ +
var closestElement = element.closest(selectors);
+
+ +

Parámetros

+ + + +

Valor del resultado

+ + + +

Excepciones

+ + + +

Ejemplo

+ +

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

JavaScript

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

Polyfill

+ +

Para los navegadores que no tengan soporte para Element.closest(), pero sí lo tengan para document.querySelectorAll() (o un equivalente prefijado, es decir IE9+), existe un polyfill:

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

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.

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

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +
+

{{Compat("api.Element.closest")}}

+ +

Notas de compatibilidad

+ + +
+ +

Ver también

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

{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}

+ +

El método computedStyleMap() 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")}}.

+ +

Sintaxis

+ +
var stylePropertyMapReadOnly = Element.computedStyleMap()
+ +

Parámetros

+ +

Ninguno.

+ +

Valor de resultado

+ +

Una interfaz {{domxref("StylePropertyMapReadOnly")}}.

+ +

Ejemplos

+ +

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>
+   <a href="https://example.com">Link</a>
+</p>
+<dl id="regurgitation"></dl>
+ +

Añadimos un poco de CSS

+ +
a {
+  --colour: red;
+  color: var(--colour);
+}
+ +

Añadimos Javascript para tomar nuestro enlace y devolvemos una lista de definición de todos los valores de propiedades CSS usando computedStyleMap().

+ +
// 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);
+}
+ +

En navegadores que soportan computedStyleMap(), verás una lista de todas las propiedades CSS y valores. En otros navegadores verás un enlace.

+ +

{{EmbedLiveSample("Examples", 300, 300)}}

+ +

¿Te diste cuenta cuántas propiedades CSS por defecto tenía un enlace? Actualiza el 'a' a un 'p', y notarás una diferencia en los valores calculados por defecto del margin-top y margin-bottom.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS Typed OM','#dom-element-computedstylemap','computedStyleMap()')}}{{Spec2('CSS Typed OM')}}Definición inicial.
+ +

Compatibilidad con navedadores

+ + + +

{{Compat("api.Element.computedStyleMap")}}

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 +--- +
{{APIRef("DOM")}}
+ +

{{ Non-standard_header() }}

+ +

Sumario

+ +

Element.currentStyle es una propiedad que es una alternativa propietaria del método estandarizado {{domxref("window.getComputedStyle")}} . Está disponible en las versiones anteriores de Microsoft Internet Explorer.

+ +

Especificación

+ +

No forma parte de ninguna especificación.

+ +

Microsoft tiene una descripción MSDN.

+ +

Compatibilidad en los Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}6{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}
+
+ +

Ver También

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Resumen

+ +

getAttribute() devuelve el valor del atributo especificado en el elemento. Si el atributo especificado no existe, el valor retornado puede ser tanto null como "" (una cadena vacía); ver {{Anch("Notes")}} para más detalles.

+ +

Sintaxis

+ +
var atributo = element.getAttribute(nombreAtributo);
+
+ +

donde

+ + + +

Ejemplo

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

Notas

+ +

Cuando es invocado en un elemento HTML desde un DOM marcado como documento HTML, getAttribute() convierte a minúsculas el argumento antes de proceder.

+ +

Esencialmente todos los navegadores (Firefox, Internet Explorer, versiones recientes de Opera, Safari, Konqueror, y iCab, siendo una lista no exhaustiva) devuelven null cuando el atributo especificado no existe en el elemento especificado y esto es lo que establece el actual borrador de la especificación del DOM. Por otra parte, la antigua especificación del DOM 3 Core dice que el valor correcto de retorno es de hecho una cadena vacía, 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 getAttribute() si es posible que el atributo requerido no exista en el elemento especificado.

+ +
{{DOMAttributeMethods}}
+ +

Especificación

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

{{ APIRef("DOM") }}

+ +

Sumario

+ +

Dados namespace y nodeName del element, devuelve su Attr .

+ +

Sintaxis

+ +
attributeNode = element.getAttributeNodeNS(namespace,nodeName)
+
+ + + +

== Example == TBD The example needs to be fixed pre> // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "http://www.mozilla.org/ns/specialspace", "id"); // iNode.value = "full-top" </pre

+ +

Notas

+ +

getAttributeNodeNS es más específica getAttributeNode en el sentido de que puedes especificar atributos de un namespace en particular.  Su método setter es setAttributeNodeNS.

+ +

{{ DOMAttributeMethods() }}

+ +

Especificación

+ +

DOM Level 2 Core: getAttributeNodeNS

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 +--- +
{{APIRef("DOM")}}
+ +

El método Element.getBoundingClientRect() devuelve el tamaño de un elemento y su posición relativa respecto a la ventana de visualización (viewport).

+ +

Sintaxis

+ +
domRect = element.getBoundingClientRect();
+ +

Valor

+ +

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 CSS border-boxes 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 left, top, right, bottom, x, y, width, and height describiendo la border-box total en pixels. Excepto width and height las propiedades son relativas a la esquina superior izquierda (top-left) de la ventana.

+ +

Explicación de los valores DOMRect

+ +

Las border-boxes vacías son ignoradas. Si todas las border-boxes del elemento estan vacías, entonces se devuelve un rectángulo con width and height iguales a cero donde el top y el left son el top-left de la border-box de la primera CSS box (en onden de contenido) para el elemento.

+ +

La cantidad de scrolling realizado en la ventana (o cualquier otro elemento scrollable) se tiene en cuenta cuando se calcula el rectángulo. Esto implica que los bordes del rectángulo (top, left, bottom, and right) cambián sus valores cada vez que la posición de scrolling cambia (ya que sus valores no son absolutos sino relativos a la ventana). Si se necesita el bounding rectangle relativo a la esquina top-left del documento, hay que añadir la posición de scrolling actual a las propiedades top and left  (dicha posición de scrolling puede obtenerse usando {{domxref("window.scrollX")}} y {{domxref("window.scrollY")}}) para obtener el bounding rectangle independiente de la posición de scrolling.

+ +

Fallback para todos los navegadores

+ +

Los scripts que requieran una alta compatibilidad cross-browser pueden usar {{domxref("window.pageXOffset")}} y {{domxref("window.pageYOffset")}} en lugar de window.scrollX y window.scrollY. Si no se tiene acceso a esas propiedades puede usarse el siguiente código:

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

Ejemplo

+ +
// rect es un objeto DOMRect con ocho propiedades: left, top, right, bottom, x, y, width, height
+var rect = obj.getBoundingClientRect();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}Definición inicial
+ +

Notas

+ +

El objeto DOMRect devuelto puede modificarse en navegadores modernos. Esto no era así en versiones anteriores que devolvían DOMRectReadOnly de forma efectiva. Con IE y Edge, el hecho de no poder agregar propiedades faltantes a su objeto ClientRect MSDN: ClientRect, devuelto impide rellenar los valores x e y.

+ +

Debido a problemas de compatibilidad (ver a continuación), es más seguro confiar sólo en las propiedades left, top, right, and bottom. 

+ +

Las propiedades en el objeto DOMRect devuelto no son suyas. Mientras que el operador in y for...in encontrarán las propiedades devueltas, otras API como Object.keys() fallarán. Además, e inesperadamente, ES2015 y nuevas características como Object.assign() y los operadores rest/spread de los objetos, no podrán copiar las propiedades devueltas.

+ +
rect = elt.getBoundingClientRect()
+// El resultado en emptyObj es {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{width, ...emptyObj} = rect
+
+ +

Compatibilidad en navegadores

+ +

{{Compat("api.Element.getBoundingClientRect")}}

+ +

Ver también

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

 {{ ApiRef("DOM") }}

+ +

El método Element.getClientRects() 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.

+ +

Sintaxis

+ +
var rectCollection = object.getClientRects();
+ +

Devuelve

+ +

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: left, top, right y bottom, que describen la caja, en pixeles, con el valor top-left relativo al valor top-left del viewport. 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 <svg> externo, el "viewport" al cual los rectángulos de resultado serán relativos será el "viewport" que establece el <svg> externo (y serán transformados por las trasnformaciones del <svg> externo, si estas existen).

+ +

{{ fx_minversion_note(3.5, "Firefox 3.5 ha agregado las propiedades width y height al objeto TextRectangle.") }}

+ +

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.

+ +

Los rectángulos devueltos no incluyen los márgenes de ningún elemento hijo que se haya podido haber desbordado.

+ +

Para los elementos de AREA en HTML, elementos SVG que no renderizen nada por si mismos, los elementos display:none, y generalmente cualquier elemento que no sea renderizado directamente, se devuelve una lista vacia.

+ +

Aún si la caja CSS tiene bordes vacios, se devuelven las coordenadas. Las coordenadas left, top, right y bottom pueden aún tener significado.

+ +

Es posible que los valores de desplazamiento sean fracciones de pixel.

+ +

Ejemplo

+ +
var rects = obj.getClientRects();
+var numLines = rects.length;
+
+ +

Especificación

+ +

No forma parte de ninguna especificación W3C.

+ +

Notas

+ +

getClientRects() apareció por primera vez en el modelo de objeto de MS IE DHTML.

+ +

Referencias

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

{{APIRef("DOM")}}

+ +

El método Element.getElementsByClassName() 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.

+ +

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.

+ +

Sintaxis

+ +
var elements = element.getElementsByClassName(names);
+ + + +

Ejemplo

+ +

Obtiene todos los elementos que tienen una clase test:

+ +
element.getElementsByClassName('test');
+ +

Obtiene todos los elementos que tienen tanto la clase red como test:

+ +
element.getElementsByClassName('red test');
+ +

Obtiene todos los elementos que tienen la clase of test, dentro de un elemento que tiene el id main:

+ +
document.getElementById('main').getElementsByClassName('test');
+ +

Podemos también usar métodos de  {{jsxref("Array.prototype")}} en cualquier {{ domxref("HTMLCollection") }} pasando el HTMLCollection como el valor this del método. Aquí encontramos todos los elementos {{HTMLElement("div")}} que tienen una clase test:

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'div';
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}{{Spec2('DOM WHATWG')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]9{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [2]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Anteriormente a Firefox 19, este método retornaba una {{domxref("NodeList")}}; se cambió para reflejar el cambio en la especificación.

+ +

[2] Safari en iOS 8 y OS X 10.10 retorna una {{domxref("NodeList")}}.

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

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve una lista de elementos que tienen un tag name determinado. Se explora el árbol por debajo del elemento dado, excluyendo el propio elemento.

+ +

Sintaxis

+ +
elements =element.getElementsByTagName(tagName)
+
+ + + +
+

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).

+ +

Es recomendable usar DOM:document.getElementsByTagNameNS cuando se manejan documentos con "multi-namespace".

+
+ +

Ejemplo

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

Notas

+ +

element.getElementsByTagName es similar a document.getElementsByTagName, excepto por que su búsqueda está restringida a los elementos que descienden del elemento especificado.

+ +

Especificación

+ +

DOM Level 2 Core: Element.getElementsByTagName

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 +--- +
{{APIRef("DOM")}}
+ +

El método Element.getElementsByTagNameNS() 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.

+ +

Sintaxis

+ +
elementos = elemento.getElementsByTagNameNS(espacioNombreURI, nombreLocal)
+ + + +

Ejemplo

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

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagnamens', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM WHATWG')}}Cambió el valor devuelto de {{domxref("NodeList")}} a {{domxref("HTMLCollection")}}.
{{SpecName('DOM3 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM3 Core')}}Sin cambios desde {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM2 Core')}}Definición inicial
+ +

Compatibilidad con los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[2]5.5{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}[1]
getElementsByTagName("*")1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}6.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Inicialmente, este método devolvía una {{domxref("NodeList")}}; luego fue modificado para reflejar el cambio en la especificación.

+ +

[2] El comportamiento de element.getElementsByTagNameNS 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 comentario de Henri Sivonen sobre este cambio. También puede ver 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.

+ +

Previo a Firefox 19, este método devolvía una {{domxref("NodeList")}}; luego fue modificado para reflejar el cambio en la especificación.

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 +--- +
{{APIRef("DOM")}}
+ +

El método Elemento.hasAttribute() devuelve un valor Booleano indicando si el elemento tiene el atributo especificado o no.

+ +

Sintaxis

+ +
var resultado = elemento.hasAttribute(nombre);
+
+ +
+
resultado
+
contendrá el valor devuelto (true o false).
+
nombre
+
consiste en una cadena de caracteres que representa el nombre del atributo a chequear.
+
+ +

Ejemplo

+ +
var foo = document.getElementById("foo");
+if (foo.hasAttribute("bar")) {
+    // hacer algo
+}
+
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasAttribute = prototype.hasAttribute || function(name) {
+        return !!(this.attributes[name] &&
+                  this.attributes[name].specified);
+    }
+})(Element.prototype);
+
+ +

Notas

+ +
{{DOMAttributeMethods}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}{{Spec2('DOM WHATWG')}}From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} to {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM3 Core')}}No change from {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM2 Core')}}Initial definition.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}8.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
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 +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +

La propiedad Element.id representa el identificador del elemento, reflejando el atributo global de id.

+ +

debe ser un único documento, y con frecuencia es utilizado para recuperar el elemento usando {{domxref("document.getElementById", "getElementById")}}. Otros usos comunes de id incluyen la utilización de elementos ID como un selector cuando se está estilando el documento con CSS.

+ +
+

Nota: los identificadores distinguen mayúsculas y minúsculas, pero se debe evitar la creación de IDs que difieran solamente en la capitalization (ver diferenciación de mayúsculas y minúsculas en nombres y destacados ).

+
+ +

Síntasix

+ +
var idStr = elt.id; // Get the id.
+elt.id = idStr; // Set the id
+
+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}{{Spec2('DOM WHATWG')}}No change from {{SpecName('DOM2 HTML')}}.
{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}{{Spec2('DOM1')}}Initial definition.
+ +

Compatibilidad de los navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Ver también

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

{{ 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.

+ +

Varias especificaciones aplicadas a los elementos:

+ + + +

Los artículos listados aquí amplían lo antedicho e incluyen enlaces a la especificación apropiada del DOM de W3C.

+ +

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 elemento tabla de HTML y elemento formulario de HTML.

+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NombreDescripciónTipoDisponibilidad
attributesTodos los atributos asociados a un elemento.NamedNodeMappara todos
childNodesTodos los nodos hijos de un elemento.Listado de nudopara todos
classNameLa clase del elemento.Secuenciapara HTML, XUL
clientHeightEl alto interior del elemento.Númeropara HTML
clientWidthEl ancho interior del elemento.Númeropara HTML
dirLa direccionalidad del elemento.Secuenciapara HTML, XUL
firstChildEl primer hijo directo del elemento, null si no hay.Nudopara todos
idLa identificación del elemento.Secuenciapara HTML, XUL
innerHTMLEl contenido y el código que hay dentro del elemento.Secuenciapara HTML
langEl lenguaje de los atributos, texto y contenidos del elemento.Secuenciapara HTML
lastChildEl último hijo directo del elemento, null si no hay.Nodepara todos
localNameLa parte local del nombre cualificado del elemento.Secuenciapara todos
NombreDescripciónTipoDisponibilidad
nameEl nombre del elemento.Secuenciapara HTML
namespaceURIEl URI del espacio de nombre de ese nodo, null si no está especificado.Secuenciapara todos
nextSiblingEl nodo inmediatamente posterior al primero dado en el árbol, null si no hay.Nudopara todos
nodeNameEl nombre del nodo de ese elemento.Secuenciapara todos
nodeTypeUn número que representa el tipo del nodo. Lo mismo que 1 para los elementos DOM.Númeropara todos
nodeValueEl valor del nodo. Lo mismo que null para los elementos DOM.Secuenciapara todos
offsetHeightEl alto de un elemento, tal cual está escrito en la composición.Númeropara HTML
offsetLeftLa distancia que hay desde el borde izquierdo del elemento al de su offsetParent.Númeropara HTML
offsetParentEl elemento del cual todos los cálculos de distancia son actualmente computados.Elementopara HTML
offsetTopLa distancia desde el borde superior del elemento hasta el de su offsetParent.Númeropara HTML
offsetWidthEl ancho de un elemento, tal cual está escrito en la composición.Númeropara HTML
ownerDocumentEl documento en el cual está ese nodo, null si no hay.Documentopara todos
NombreDescripciónTipoDisponibilidad
parentNodeEl elemento original(padre) de ese nodo, null si no hay dentro del documento de DOM.Nudopara todos
prefixEl prefijo del espacio de nombre del nodo, null si no está especificado.Secuenciapara todos
previousSiblingEl nodo inmediatamente anterior al primero dado en el árbol , null si no hay.Nudopara todos
scrollHeightMuestra la altura de deslizamiento del elemento.Númeropara HTML
scrollLeftObtiene/establece el offset de scroll izquierdo de un elemento.Númeropara HTML
scrollTopObtiene/establece el offset de scroll superior de un elemento.Númeropara HTML
scrollWidthMuestra el ancho de deslizamiento de un elemento.Númeropara HTML
styleUn objeto representando las declaraciones de los atributos de estilo del elemento.Estilo CSSpara HTML, XUL
tabIndexObtiene/establece la posición del elemento en el órden de tabulación.Númeropara HTML
tagNameEl nombre de la etiqueta para el elemento dado.Secuenciapara todos
textContentObtiene/establece los contenidos textuales de un elemento y todos sus descendentes.Secuenciapara todos
+ +

Métodos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nombre y DescripciónDevuelveDisponible
addEventListener( type, handler, bubble)
+ Registra un controlador de evento para un tipo de evento específico en un elemento.		-Todos
appendChild( appendedNode )
+ Inserta un nodo así como el último nodo hijo de este elemento.		NodeTodos
blur()
+ Quita el foco del teclado del elemento actual.		-para HTML, XUL
click()
+ Simula un clic sobre el elemento actual.		-para HTML, XUL
cloneNode( deep)
+ Hace copia de un nudo, y opcionalmente, de todo sus contenidos		Nodepara Todos
dispatchEvent( event )
+ Envía un evento a este nodo en el DOM.		BooleanTodos
getAttribute( name )
+ Devuelve el valor de un atributo nombrado desde el nodo actual.		ObjectTodos
getAttributeNS( namespace, name )
+ Devuelve el valor del atributo con el nombre especificado, desde el nodo actual.		ObjectTodos
getAttributeNode( name )
+ Devuelve la representación del nodo del atributo nombrado desde el nodo actual.		AttrTodos
getAttributeNodeNS( namespace, name )
+ Devuelve la representación del nodo del atributo con el nombre especificado, desde el nodo actual.		AttrTodos
Nombre y DescripciónDevuelveDisponibilidad
getElementsByTagName( name )
+ Devuelve un conjunto de todos los elementos descendentes, de un nombre de etiqueta particular, desde el elemento actual.		NodeSetTodos
getElementsByTagNameNS( namespace, name )
+ Devuelve un conjunto de todos los elementos descendentes, de un nombre de etiqueta y espacio particular, desde el elemento actual.		NodeSetTodos
hasAttribute( name )
+ Verifica si el elemento tiene el atributo especificado o no.		BooleanTodos
hasAttributeNS( namespace, name )
+ Verifica si el elemento tiene el atributo especificado, en el nombre de espacio especificado o no.		BooleanTodos
hasAttributes()
+ Verifica si el elemento tiene o no algún atributo.		BooleanTodos
hasChildNodes()
+ Verifica si el elemento tiene nodos hijos o no.		BooleanTodos
insertBefore( insertedNode, adjacentNode )
+ Inserta el primer nodo antes que el segundo, Nodo hijo en el DOM.		NodeTodos
normalize()
+ Limpia todos los nodos de texto debajo de este elemento (une lo adyacente, quita lo vacío).		-Todos
removeAttribute( name )
+ Quita el atributo nombrado desde el nodo actual.		-All
removeAttributeNS( namespace, name )
+ Quita el atributo con el nombre y nombre de espacio especificado desde el nodo actual.		-Todos
Nombre y DescripciónDevuelveDisponibilidad
removeAttributeNode( name )
+ Quita la representación del nodo del atributo nombrado desde el nodo actual.		-Todos
removeChild( removedNode )
+ Quita el nodo hijo desde el elemento actual.		NodeTodos
removeEventListener( type, handler )
+ Quita un oyente de evento desde el elemento.		-Todos
replaceChild( insertedNode, replacedNode )
+ Reemplaza un nodo hijo en el elemento actual con otro.		NodeTodos
scrollIntoView( alignWithTop )
+ Recorre la página hasta que el elemento se obtiene en la vista.		-HTML
setAttribute( name, value )
+ Establece el valor de un atributo nombrado desde el nodo actual.		-Todos
setAttributeNS( namespace, name, value )
+ Establece el valor del atributo con el nombre y nombre de espacio especificado desde el nodo actual.		-Todos
setAttributeNode( name, attrNode )
+ Establece la representación del nodo del atributo nombrado desde el nodo actual.		-Todos
setAttributeNodeNS( namespace, name, attrNode )
+ Establece la representación del nodo del atributo con el nombre y nombre de espacio especificado desde el nodo actual.		-Todos
+ +

Eventos

+ +

Son propiedades correspondientes a los atributos del evento "on" en HTML.

+ +

A diferencia de los atributos correspondientes, los valores de esas propiedades son funciones (o cualquier otro objeto trabajando con la interfaz EventListener) 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:

+ +
<div onclick="foo();">clic aquí!</div>
+
+ +

Si element es una referencia a esta div, el valor de element.onclick será:

+ +
function onclick(event) {
+   foo();
+}
+
+ +

El objeto event es pasado al parámetro event de esta función envolvente.

+ +
+
onblur - (al quitar el foco)
+
Devuelve el código de manejo de evento para el evento blur.
+
+ +
+
onchange - (al modificar)
+
Devuelve el código de manejo de evento para el evento change.
+
+ +
+
onclick - (al hacer clic)
+
Devuelve el código de manejo de evento para el evento onclick.
+
+ +
+
ondblclick - (al hacer doble clic)
+
Devuelve el código de manejo de evento para el evento ondblclick.
+
+ +
+
onfocus - (al poner el foco)
+
Devuelve el código de manejo de evento para el evento onfocus.
+
+ +
+
onkeydown - (al tener una tecla apretada)
+
Devuelve el código de manejo de evento para el evento onkeydown.
+
+ +
+
onkeypress - (al apretar una tecla)
+
Devuelve el código de manejo de evento para el evento onkeypress.
+
+ +
+
onkeyup - (al soltar una tecla)
+
Devuelve el código de manejo de evento para el evento onkeyup.
+
+ +
+
onmousedown - (al tener el botón del ratón apretado)
+
Devuelve el código de manejo de evento para el evento onmousedown.
+
+ +
+
onmousemove - (al mover el ratón)
+
Devuelve el código de manejo de evento para el evento onmousemove.
+
+ +
+
onmouseout - (al quitar el puntero del ratón)
+
Devuelve el código de manejo de evento para el evento onmouseout.
+
+ +
+
onmouseover - (al pasar el ratón encima)
+
Devuelve el código de manejo de evento para el evento onmouseover.
+
+ +
+
onmouseup - (al soltar el botón del ratón)
+
Devuelve el código de manejo de evento para el evento onmouseup.
+
+ +
+
onresize - (al re-dimensionar la pantalla)
+
Devuelve el código de manejo de evento para el evento onresize.
+
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 +--- +

{{APIRef("DOM")}}

+ +

Resumen

+ +

La propiedad Element.innerHTML devuelve o establece la sintaxis HTML describiendo los descendientes del elemento.

+ +

Al establecerse se reemplaza la sintaxis HTML del elemento por la nueva.

+ +
Nota: Si un nodo tiene un texto secundario que incluye los caracteres (&), (<), o (>), innerHTML 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.
+ +

Para insertar el código HTML en el documento en lugar de cambiar el contenido de un elemento, use el método insertAdjacentHTML().

+ +

Sintaxis

+ +
const content = element.innerHTML;
+
+element.innerHTML = htmlString;
+ +

Valor

+ +

La variable constante content contiene un DOMString que contiene el código HTML serializado describiendo todos los descendientes de element. Cuando se establece el valor de innerHTML, se eliminan todos los descendientes de element, analiza la cadena htmString y asigna los nodos resultantes como descendientes de element.

+ +

Excepciones

+ +
+
SyntaxError
+
Se intentó establecer el valor de innerHTML utilizando una cadena que no está formada correctamente en HTML
+
NoModificationAllowedError
+
Se intentó insertar el código HTML en un nodo cuyo elemento primario es document.
+
+ +

Notas de uso

+ +

La propiedad innerHTML 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:

+ +

Devolver la sintaxis HTML de un elemento

+ +

Devolver el valor de innerHTMLhace que el agente de usuario serialice el fragmento HTML compuesto por los descendientes del elemento. La cadena resultante es devuelta.

+ +
const content = element.innerHTML;
+
+ +

Esto le permite ver la sintaxis HTML de los nodos contenidos en el elemento.

+ +

Reemplazar el contenido de un elemento

+ +

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í:

+ +
document.body.innerHTML = "";  // Reemplaza el contenido de <body> con una cadena vacía
+
+ +

El siguiente ejemplo recupera la sintaxis HTML actual del documento y reemplaza los caracteres "<" con la entidad HTML "&lt;", convirtiendo esencialmente el HTML en texto plano. Esto luego se envuelve en un elemento <pre>. 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.

+ +
document.documentElement.innerHTML = "<pre>" +
+         document.documentElement.innerHTML.replace(/</g,"&lt;") +
+            "</pre>";
+
+ +
+

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 texto multilinea (elemento textarea), Internet Explorer cambiará el valor de la propiedad innerHTML del elemento textarea, mientras que los navegadores Gecko no lo hacen.

+
+ +

Consideración de seguridad

+ +

No es extraño que innerHTML sea usado para  introducir texto en una página web. Esto añade un riesgo de seguridad.

+ +
//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 el texto es molesto y no es realmente lo que se esperaba.
+
+ +

Aunque esto, el ejemplo 2, puede parecer un ataque cross-site scripting, el resultado es inofensivo, ya que HTML5 especifica que un tag <script> insertado a través innerHTML no debe ejecutarse.

+ +

Sin embargo, hay maneras de ejecutar JavaScript sin necesidad de utilizar el elemento <script>, por lo que todavía hay un riesgo de seguridad cada vez que se utiliza innerHTML para establecer cadenas de texto sobre las que no tiene control. Por ejemplo:

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // con peligro, la alerta ahora si es mostrada
+ +

Por esa razón, cuando solo tratamos con texto, es recomendable no usar innerHTML, sino Node.textContent, que no interpretará la cadena pasada como HTML, sino como texto plano.

+ +

Ejemplo

+ +
<!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>
+ +
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>
+*/
+ +

Especificaciones

+ + + +

Ver también

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

{{APIRef("DOM")}}

+ +

El método insertAdjacentElement() inserta un elemento nodo dado en una posición dada con respecto al elemento sobre el que se invoca.

+ +

Sintaxis

+ +
elementoObjetivo.insertAdjacentElement(posición, elemento);
+ +

Parameters

+ +
+
posición
+
Un {{domxref("DOMString")}} representando la posición relativa al elementoObjetivo; debe ser una de las siguientes cadenas: +
    +
  • 'beforebegin': Antes del elementoObjetivo.
    • +
  • 'afterbegin': Dentro del elementoObjetivo, antes de su primer hijo.
    • +
  • 'beforeend': Dentro del elementoObjetivo, después de su último hijo.
    • +
  • 'afterend': Después del elementoObjetivo.
    • +
+
+
elemento
+
El elemento HTML a ser insertado.
+
+ +

Valor devuelto

+ +

El elemento insertado  o null, si la inserción falla.

+ +

Excepciones

+ + + + + + + + + + + + + + + + + + +
ExcepciónExplicación
SyntaxErrorLa posición especificada no tiene un valor reconocido.
TypeErrorEl elemento especificado no es un elemento válido.
+ +

Visualización de los nombres de posición

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Nota: Las posiciones beforebegin y afterend sólo funcionan si el nodo está en un árbol y tiene un padre.
+ +

Ejemplo

+ +
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);
+});
+ +

Mira nuestro insertAdjacentElement.html demo en Github (mira el código fuente 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 Insert before e Insert after para insertar nuevos divs antes o despues del elemento seleccionado usando insertAdjacentElement().

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}{{ Spec2('DOM WHATWG') }}
+ +

Compatibilidad con Navegadores

+ +

{{Compat("api.Element.insertAdjacentElement")}}

+ +

Mira también

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

EL método insertAdjacentHTML() 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")}}.

+ +

Sintaxis

+ +
element.insertAdjacentHTML(posición, texto);
+ +

Parámetros

+ +
+
posición
+
Un {{domxref("DOMString")}} que representa la posición relativa al elemento, y deberá ser una de las siguientes cadenas: +
    +
  • 'beforebegin': Antes que el propio elemento.
    • +
  • 'afterbegin': Justo dentro del elemento, antes de su primer elemento hijo.
    • +
  • 'beforeend': Justo dentro del elemento, después de su último elemento hijo.
    • +
  • 'afterend': Después del propio elemento.
    • +
+
+
texto
+
Es la cadena a ser analizada como HTML o XML e insertada en el árbol.
+
+ +

Visualizacion de las posiciones

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Nota: Las posiciones beforebegin y afterend funcionan únicamente si el nodo se encuentra en el árbol DOM y tiene un elemento padre.
+ +

Ejemplo

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

Notas

+ +

Consideraciones de seguridad

+ +

Cuando se inserte texto HTML en una página usando insertAdjacentHTML() debe tener cuidado de no usar cadenas de texto que no contengan las secuencias de escape pertinentes según sea el caso.

+ +

Se recomienda no usar insertAdjacentHTML() 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.

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }}
+ +

Compatibilidad con navegadores

+ +

{{Compat("api.Element.insertAdjacentHTML")}}

+ +

Ver también

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

La propiedad únicamente de lectura Element.localName devuelve la parte local del nombre calificado de un objeto.

+ +
+

Antes de DOM4 esta API fué definida dentro de la interfaz{{domxref("Node")}}.

+
+ +

Sintasix

+ +
name = element.localName
+
+ +

Valor de Retorno

+ +

 {{domxref("DOMString")}} que representa la parte local del nombre cualificado del elemento.

+ +

Ejemplo

+ +

(debe ser servido con contenido tipo XML , como text/xml o application/xhtml+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>
+
+ +

Notas

+ +

El nombre local de un nodo es la parte del nombre completo del nodo que va situado después de los dos puntos. Nombres calificados se utilizan normalmente en XML como parte del espacio de los nombres (s) de los documentos particulares XML . Por ejemplo, en el nombre calificado ecomm : socios,  socios es el nombre local y ecomm es el prefijo:

+ +
1  <ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm">
+2   <ecomm:partners>
+3    <ecomm:partner id="1001">Tony's Syrup Warehouse
+4     </ecomm:partner>
+5    </ecomm:partner>
+6  </ecomm:business>
+ +
+

Nota: 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,la propiedad devuelve en el caso de almacenamiento interno DOM ,  minúscula para ambos elementos HTML en HTML DOM y elementos XHTML en DOM XML. La propiedad {{domxref("element.tagName","tagName")}} continua devolviéndolo en mayúsculas para elementos HTML en HTML DOMs.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM4', '#interface-element', 'Element.localName')}}{{Spec2('DOM4')}}definición inicial
+ +

Compatibilidad de los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico46.0[1]{{CompatGeckoDesktop("48.0")}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatGeckoMobile("48.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Esta API estaba disponible previamente en la  {{domxref("Node")}} API.

+ +

Ver también

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

El método matches() comprueba si el {{domxref("Element")}} sería seleccionable por el selector CSS especificado en la cadena; en caso contrario, retorna false.

+ +

Sintaxis

+ +
var result = element.matches(selectorString);
+
+ +

Parámetros

+ +

selectorString es una cadena de texto que representa el selector a probar.

+ +

Valor devuelto

+ +

result es un {{domxref("Boolean")}}.

+ +

Excepciones

+ +
+
SYNTAX_ERR
+
La cadena especificada como selector no es válida.
+
+ +

Ejemplo

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

Esto mostrará "El Águila Filipina está amenazada de extinción!" en el log de la consola, dado que el elemento tiene un atributo class con valor amenazada.

+ +

Polyfill

+ +

Para navegadores que no soportan Element.matches() o Element.matchesSelector(), pero aun incorporan soporte para document.querySelectorAll(), existe un polyfill:

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

However, given the practicality of supporting older browsers, the following should suffice for most (if not all) practical cases (ej. soporte IE9+).

+ +
if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}{{Spec2('DOM WHATWG')}}Definición Inicial
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.Element.matches")}}

+ +

Ver también

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

El evento mousedown se activa cuando el botón de un dispositivo apuntador (usualmente el botón de un ratón) es presionado en un elemento.

+ +

General info

+ +
+
Especificación
+
DOM L3
+
Interface
+
{{domxref("MouseEvent")}}
+
Bubbles
+
Sí
+
Cancelable
+
Sí
+
Target
+
Elemento
+
Default Action
+
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)
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)A count of consecutive clicks that happened in a short amount of time, incremented by one.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe 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.
buttons {{readonlyInline}}unsigned shortThe 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). More info.
mozPressure {{readonlyInline}}floatThe 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).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On disabled form elements{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On disabled form elements{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Sólo funciona para elementos {{HTMLElement("textarea")}} y algunos elementos tipo {{HTMLElement("input")}}.

+ +

Ver también

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

{{ APIRef("DOM") }}

+ +

Sumario

+ +

name obtiene o establece la propiedad del nombre de un objeto DOM; sólo se aplica a los siguientes elementos: {{ 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") }}.

+ +
+

Nota: La propiedad name no esixte para otros elementos; a diferencia de tagName y nodeName, no es una propiedad de los modos de comunicación (interfaces) {{domxref("Node")}}, {{domxref("Element")}} or {{domxref("HTMLElement")}}.

+
+ +

name puede ser utilizado en el método{{ domxref("document.getElementsByName()") }} , en una configuración y con la colección de elementos de la configuración. cuando utilizamos una configuración o  elementos de una colección, puede devolver un solo elemento o una colección.

+ +

Síntasix

+ +
HTMLElement.name = string;
+var elName = HTMLElement.name;
+
+var fControl = HTMLFormElement.elementName;
+var controlCollection = HTMLFormElement.elements.elementName;
+
+ +

Ejemplo

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

Notas

+ +

En Internet Explorer (IE), la propiedad name de los objetos DOM , creada utilizando{{ domxref("document.createElement()") }} no puede ser establecida o modificada

+ +

Especificaciones

+ +

W3C DOM 2 HTML Specification:

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

La propiedad Element.namespaceURI unicamente de lectura devuelve la URI namespace de el elemento, o la anula si el elemento no está en un namespace.

+ +
+

Antes de DOM4 esta API fué definida dentro de la interfaz {{domxref("Node")}}.

+
+ +

Síntasix

+ +
namespace = element.namespaceURI
+ +

Ejemplo

+ +

En este snippet, un elemento está siendo examinado por su {{domxref("localName")}} y  su namespaceURI. Si el namespaceURI devuelve el  XUL namespace y el localName devuelve "browser", entonces  se entiende  que el nodo es  XUL <browser/>.

+ +
if (element.localName == "browser" &&
+    element.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // this is a XUL browser
+}
+ +

Notas

+ +

Esto no es un valor calculado resultante de una búsqueda de un namespace, basado en un examen de las declaraciones del namespace en el campo de aplicación. La URI del namespace de un nodo se congela en el momento de creación del nodo.

+ +
+
En Firefox 3.5 y versiones anteriores, la  URI del namespace  para elementos HTML en documentos HTML es nula. En versiones posteriores, de conformidad con HTML5, es http://www.w3.org/1999/xhtml como en XHTML. {{gecko_minversion_inline("1.9.2")}}
+ +
 
+
+ +

Se puede crear un elemento con el namespaceURI especificado utilizando el método  DOM Level 2  document.createElementNS.

+ +

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.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}{{Spec2("DOM4")}}definición inicial
+ +

Compatibilidad en los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico46.0[1]{{CompatGeckoDesktop("48.0")}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatGeckoMobile("48.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Esta API estaba disponible previamente en  {{domxref("Node")}} API.

+ +

Ver también

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

{{ ApiRef("DOM") }}

+ +

ongotpointercapture es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}}  que devuelve el controlador de eventos (función) para el evento tipo {{event("gotpointercapture")}}.

+ +

Síntasix

+ +
var gotCaptureHandler = target.ongotpointercpature;
+
+ +

Valor de Retorno

+ +
+
gotCaptureHandler
+
El controlador de eventos  gotpointercapture para el elemento target.
+
+ +

Ejemplo

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

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Pointer Events 2','#widl-Element-ongotpointercapture', 'ongotpointercapture')}}{{Spec2('Pointer Events 2')}}Versión no estable.
{{SpecName('Pointer Events', '#widl-Element-ongotpointercapture', 'ongotpointercapture')}}{{Spec2('Pointer Events')}}Definición inicial.
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatNo}}{{CompatVersionUnknown}} [1]{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementación retirada. Ver {{Bug("1166347")}}.

+ +

Ver también

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

{{ ApiRef("DOM") }}

+ +

onlostpointercapture es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}}  que devuelve el controlador de eventos (función) para el evento tipo {{event("lostpointercapture")}} .

+ +

Síntasix

+ +
var lostCaptureHandler = target.onlostpointercpature;
+
+ +

Valor de Retorno

+ +
+
lostCaptureHandler
+
El controlador de eventos  lostpointercapture para el elemento target.
+
+ +

Ejemplo

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

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Pointer Events 2','#widl-Element-onlostpointercapture', 'onlostpointercapture')}}{{Spec2('Pointer Events 2')}}Versión no estable.
{{SpecName('Pointer Events', '#widl-Element-onlostpointercapture', 'onlostpointercapture')}}{{Spec2('Pointer Events')}}Definición inicial.
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatNo}}{{CompatVersionUnknown}} [1]{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementación retirada. Ver {{Bug("1166347")}}.

+ +

Ver también

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

{{ ApiRef("DOM") }}

+ +

{{ non-standard_header() }}

+ +

Sumario

+ +

La propiedad  onwheel devuelve el código del controlador de eventos onwheel en el elemento actual.

+ +

Syntax

+ +
element.onwheel = event handling code
+
+ +

Notas

+ +

El evento wheel se genera cuando el usuario desplaza el contenido de un elemento.

+ +

Ver también

+ +

Bug 18542 – el atributo onmousewheel  debe ser reemplazado con onwheel

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

{{APIRef("DOM")}}

+ +

Resumen

+ +

El atributo outerHTML 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.

+ +

Sintaxis

+ +
var content = element.outerHTML;
+
+ +

Al retorno, content contendrá el fragmento de HTML serializado que describe al elemento element y a sus descendientes.

+ +
element.outerHTML = content;
+
+ +

Reemplaza el elemento por los nodos generados del análisis de la cadena content con el padre de element como el nodo de contexto para el algoritmo de procesado del fragmento.

+ +

Ejemplos

+ +

Ontener el valor de la propiedas outerHTML de un elemento:

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

Reemplazar un nodo mediante la asignación de la propiedad outerHTML:

+ +
// 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á.
+
+ +

Notas

+ +

Si el elemento no tiene elemento padre, esto es, si es el elemento raíz del documento, la asignación de su propiedad outerHTML lanzará una DOMException con el código de error NO_MODIFICATION_ALLOWED_ERR. Por ejemplo:

+ +
document.documentElement.outerHTML = "test";  // lanza una DOMException
+
+ +

Además, aunque el elemento es reemplazado en el documento, la variable cuya propiedad outerHTML fue asignada continuará conteniendo una referencia al elemento original:

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

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}{{ Spec2('DOM Parsing') }} 
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{ CompatGeckoDesktop("11") }}0.24.071.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestiaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("11") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Ver también

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

La propiedad Element.prefix unicamente de lectura devuelve el namespace prefix de el elemento especificado, o null si no hay especificado prefix .

+ +
+

Antes de DOM4 esta API fué definida dentro de la interfaz {{domxref("Node")}}.

+
+ +

Síntasix

+ +
string = element.prefix
+
+ +

Ejemplos

+ +

Los siguientes registros "x" en la consola.

+ +
<x:div onclick="console.log(this.prefix)"/>
+
+ +

Notas

+ +

 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.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM4", "#dom-element-prefix", "Element.prefix")}}{{Spec2("DOM4")}}Definición inicial
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico46.0[1]{{CompatGeckoDesktop("48.0")}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatGeckoMobile("48.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Esta API estaba previamente disponible en {{domxref("Node")}} API.

+ +

Ver también

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

El método querySelector() de la intrefaz  {{domxref("Element")}} devuelve el primer descendiente del elemento sobre el cual es invocado que coincida con el o los selectores especificados.

+ +

Sintáxis

+ +
elemento = elementoBase.querySelector(selectores);
+
+ +

Parametros

+ +
+
selectores
+
Es el grupo de selectores que servirán para filtrar los elementos descendientes del  {{domxref("Element")}} elementoBase; debe tener una sintáxis CSS válida o se producirá una excepción SyntaxError. Devuelve el primer elemento que encuentre que coincida con el grupo de selectores.
+
+ +

Valor devuelto

+ +

Devolverá el primer descendiente del elemento elementoBase que coincida con el grupo de selectores especificado. Para la comparación se recorrerá la jerarquía completa de elementos, incluyendo a aquellos que no son descendientes del elementoBase; en otras palabras, los selectores se aplican primero al documento completo, no sólo al elementoBase, creando una lista inicial de elementos potencialmente seleccionables. Después se examina dicha lista para comprobar qué elementos son descendientes del elementoBase. El método querySelector() devolverá el primero de dichos elementos descendientes.

+ +

Si no hubiera coincidencias, devolverá el valor null.

+ +

Excepciones

+ +
+
SyntaxError
+
Los selectores especificados no son válidos.
+
+ +

Ejemplos

+ +

Vamos a ver unos cuantos ejemplos.

+ +

Encontrar un elemento a traves del valor de sus atributos

+ +

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":

+ +
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+
+ +

Toda la jerarquía cuenta

+ +

El ejemplo que mostramos a continuación, demuestra que la jerarquía de todo el documento se tiene en cuenta cuando se aplican los selectores, de modo que se tienen en cuenta todos los niveles que se encuentran fuera de la jerarquía del elementoBase para localizar coincidencias.

+ +

HTML

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

JavaScript

+ +
var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML =
+         (baseElement.querySelector("div span").innerHTML);
+ +

Resultado

+ +

El resultado es el siguiente:

+ +

{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}

+ +

Podemos ver que el selector "div span" coincide con el elemento {{HTMLElement("span")}}, aunque baseElement excluye el elemento {{domxref("div")}} al no ser parte de su selector.

+ +

Más ejemplos

+ +

Puedes ver más ejemplos sobre el formato apropiado para los selectores aquí {{domxref("Document.querySelector()")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll()')}}{{Spec2('DOM4')}}
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 2')}}
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 1')}}
+ +

Compatibilidad en los Navegadores

+ +

{{ CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatChrome(1) }}
+  		 +

{{ CompatGeckoDesktop(1.9.1) }}

+ 		+

9 [1]

+ 		+

{{CompatVersionUnknown}}

+ 		{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] querySelector() funciona en IE8, pero solo para selectores CSS 2.1.

+ +

También puedes consultar:

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

{{ APIRef("DOM") }}

+ +

removeAttribute elimina un atributo del elemento especificado.

+ +

Sintaxis

+ +
element.removeAttribute(attrName);
+
+ + + +

Ejemplo

+ +
// <div id="div1" align="left" width="200px">
+document.getElementById("div1").removeAttribute("align");
+// ahora: <div id="div1" width="200px">
+
+ +

Notas

+ +

Debe usarse preferiblemente removeAttribute en lugar de establecer el valor del atributo a null usando setAttribute.

+ +

Intentar eliminar un atributo que no existe en el elemento no disparará una excepción.

+ +

{{ DOMAttributeMethods() }}

+ +

Especificación

+ +

DOM Level 2 Core: removeAttribute (introducido en DOM Level 1 Core)

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 +--- +
{{APIRef("DOM")}}{{seeCompatTable}}
+ +

Asynchronously requests that the element be made full-screen.

+ +

Syntax

+ +
element.mozRequestFullScreen();
+
+ +

Notas

+ +

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".

+ +

Ve a Using full-screen mode para mas detalles y ejemplos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}{{Spec2("Fullscreen")}}Initial definition
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefoxEdge
+ Internet Explorer		OperaSafari
Basic support{{CompatVersionUnknown}}{{property_prefix("webkit")}} (also as webkitRequestFullScreen){{CompatGeckoDesktop("9.0")}} (as mozRequestFullScreen)11 {{property_prefix("ms")}}¹
+ 20¹²		{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Mira también

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

{{ Non-standard_header() }}

+ +

Sumario

+ +

Element.runtimeStyle es una propiedad exclusiva similar a {{domxref ("HTMLElement.style")}}, excepto sus estilos, que tienen mayor precedencia y modificaciön.It no modifica el contenido del atributo  style . Está disponible en las versiones anteriores de Microsoft Internet Explorer.

+ +

especificación

+ +

No forma parte de ninguna especificación.

+ +

Microsoft tiene una descripción en MSDN.

+ +

Compatibilidad de los Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}6{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}
+
+ +

Ver también

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

{{APIRef("DOM")}}

+ +

El elemento  Element.scrollHeight atributo unicamente de lectura es una medida de la altura del contenido de un elemento, incluyendo el contenido que no es visible en la pantalla debido al desbordamiento. El valor scrollHeight es igual a la altura mínima (donde la altura incluye el relleno , pero no incluye bordes y márgenes) El elemento lo necesita con el fin de adaptarse a todos los contenidos en el punto de vista sin necesidad de utilizar una barra de desplazamiento vertical. Incluye el  elemento relleno pero no su margen.

+ +
+

Esta propiedad redondea el valor a un número entero. Si se necesita un valor fraccionario, utilizar {{domxref("Element.getBoundingClientRect()")}}.

+
+ +

Sintaxis

+ +
var intElemScrollHeight = element.scrollHeight;
+ +

intElemScrollHeight es una variable que almacena un número entero correspondiente al valor  scrollHeight en pixels del elemento. scrollHeight es una propiedad unicamente de lectura.

+ +

Ejemplo

+ +
+
+

padding-top

+ +

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.

+ +

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.

+ +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Image:scrollHeight.png

+ +

Problemas y Soluciones

+ +

Determina si un elemento ha sido totalmente desplazado

+ +

La siguiente equivalencia devuelve true si un elemento está al final de su desplazamiento, false si no es así.

+ +
element.scrollHeight - element.scrollTop === element.clientHeight
+ +

scrollHeight Demo

+ +

Asociada al evento onscroll , esta equivalencia puede ser útil para determinar si un usuario ha leido un texto o no (ver también las propiedades de  element.scrollTop y  element.clientHeight ). Por ejemplo:

+ +

HTML

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

CSS

+ +
#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;
+}
+ +

JavaScript

+ +
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);
+}
+ +

{{EmbedLiveSample('scrollHeight_Demo', '640', '400')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}{{Spec2("CSSOM View")}}Inicial definición
+ +

Compatibilidad de los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico4.03.0[1]8.0{{CompatVersionUnknown}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Soporte Básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] En versiones anteriores a Firefox 21, cuando el contenido de un elemento no genera una barra de desplazamiento vertical,su propiedad scrollHeight es igual a su propiedad clientHeight . 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  overflow que desborda el contenido visible (no desplazable).

+ +

Ver También

+ + 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 +--- +
{{ APIRef("DOM")}}
+ +

El método  scrollIntoView() de la interfaz  {{domxref("Element")}} desplaza el contenedor principal del elemento de forma que el elemento sobre el cual se invoca scrollIntoView() sea visible al usuario.

+ +

Sintaxis

+ +
element.scrollIntoView(); // Equivalente a element.scrollIntoView(true)
+element.scrollIntoView(alignToTop); // Argumentos booleanos
+element.scrollIntoView(scrollIntoViewOptions); // Argumento objeto
+
+ +

Parámetros

+ +
+
alignToTop
+
Es un valor {{jsxref("Boolean")}}: +
    +
  • Si es true, la parte superior del elemento se alineará con la parte superior del área visible del elemento desplazable antecesor.
    • +
  • Si es false, la parte inferior del elemento se alineará con la parte inferior del área visible del elemento desplazable antecesor.
    • +
+
+
scrollIntoViewOptions {{optional_inline}} {{experimental_inline}}
+
Un booleano o un objeto con las siguientes opciones:
+
behavior {{optional_inline}}
+
Establece la transición de la animación.
+ Puede ser auto o smooth. Por defecto es auto.
+
block {{optional_inline}}
+
Establece el alineamiento vertical.
+ Puede ser start, center, end, o nearest. Por defecto es start.
+
inline {{optional_inline}}
+
Establece el alineamiento horizontal
+ Puede ser start, center, end, o nearest. Por defecto es nearest.
+
+ +

Ejemplo

+ +
var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({block: "end", behavior: "smooth"});
+
+ +

Notas

+ +

Puede que el desplazamiento no sea llevado completamente a la parte superior o inferior dependiente de la disposición de otros elementos. 

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}{{Spec2("CSSOM View")}}Definición inicial
+ + + +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Implementación básica1.0{{ CompatGeckoDesktop(1.0) }}610.0 and possibly older versions4 and possibly older versions
+

Implementan
+ scrollIntoViewOptions

+ 		{{CompatNo}}{{ CompatGeckoDesktop(36) }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Implementación básica?{{ CompatGeckoMobile(1.0) }}???
+

Implementan
+ scrollIntoViewOptions

+ 		{{CompatNo}}{{ CompatGeckoMobile(36) }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
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 +--- +

{{ APIRef("DOM") }}

+ +

La propiedad Element.scrollLeft obtiene o establece el número de píxeles que desplaza el contenido de un elemento hacia la izquierda.

+ +

Tenga en cuenta que si el elemento {{cssxref ( "dirección")}} del elemento es rtl (derecha-a-izquierda), entonces scrollLeft 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 Negativo mientras se desplaza hacia el final del contenido.

+ +

Síntasix

+ +
// Obtener el número de píxeles desplazados
+var sLeft = element.scrollLeft;
+
+ +

SLeft es un número entero que representa el número de píxeles que el elemento ha desplazado hacia la izquierda.

+ +
// Establecer el número de píxeles desplazados
+element.scrollLeft = 10;
+
+ +

ScrollLeft se puede establecer en cualquier valor entero, sin embargo:

+ + + +

Ejemplo

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

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}{{Spec2("CSSOM View")}} 
+ +

Compatibilidad en los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Soporte Básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
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 +--- +

{{ APIRef("DOM") }}

+ +

La propiedad Element.scrollTop obtiene o establece el número de pixels que el contenido de un elemento ha sido desplazado (enrollado) hacia arriba. El scrollTop 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 scrollTop es establecido por defecto a 0.

+ +

Sintaxis

+ +
// Obtiene el número de pixels desplazados
+var  intElemScrollTop = someElement.scrollTop;
+
+ +

Después de ejecutar este código, intElemScrollTop es un entero que corresponde al número de pixesl que el contenido del {{domxref("element")}} ha sido desplazado hacia arriba.

+ +
// Establece el número de pixels desplazados
+element.scrollTop = intValue;
+
+ +

scrollTop puede ser establecido a cualquier valor entero, con ciertas salvedades:

+ + + +

Ejemplo

+ +
+
+

padding-top

+ +

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.

+ +

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.

+ +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Image:scrollTop.png

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}} 
+ +

Referencias

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

{{APIRef("DOM")}}{{Non-standard_header}}

+ +

La propiedad de solo lectura(read-only)  Element.scrollTopMax retorna un {{jsxref("Number")}} que representa el máximo offset posible para el elemento.

+ +

Sintaxis

+ +
var pxl = elt.scrollTopMax;
+ +

Especificaciones

+ +

Esta propiedad no es parte de ninguna especificación.

+ +

Compatibilidad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatNo() }}{{ CompatGeckoDesktop(16) }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatGeckoMobile(16) }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

Ver además

+ + 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 +--- +
{{ APIRef("DOM") }}
+ +

La propiedad de sólo lectura Element.scrollWidth 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),  scrollWidth es mayor que  clientWidth.

+ +
+

El valor de esta propiedad será red redondedo a un entero. Si necesita un valor fraccional, use {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Sintaxis

+ +
var xScrollWidth = element.scrollWidth;
+ +

xScrollWidth es el ancho del contenido de element en pixels.

+ +

Ejemplo

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

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName("CSSOM View", "#dom-element-scrollwidth", "Element.scrollWidth")}}{{Spec2("CSSOM View")}}Definición inicial
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.scrollWidth")}}

+ +

Ver también

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

{{APIRef("DOM")}}

+ +

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.

+ +

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()")}}.

+ +

Sintaxis

+ +
Element.setAttribute(name, value);
+
+ +

Parámetros

+ +
+
name
+
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 setAttribute() se llama sobre un elemento HTML en un documento HTML.
+
value
+
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.
+
+ +

Los atributos booleanos se consideran true si al menos están presentes en el elemento, independientemente de su value actual; como regla, se debería especificar una cadena de texto vacía ("") en value (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.

+ +

Dado que value se convierte en una cadena de texto, indicando null 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 "null". Si se desea eliminar un atributo, se debe llamar a {{domxref("Element.removeAttribute", "removeAttribute()")}}.

+ +

Valor devuelto

+ +

{{jsxref("undefined")}}.

+ +

Excepciones

+ +
+
InvalidCharacterError
+
El atributo especificado name contiene uno o más caracteres que no son válidos en el nombre del atributo.
+
+ +

Ejemplo

+ +

En el siguiente ejemplo, setAttribute() se utiliza para establecer atributos en un {{HTMLElement("button")}}.

+ +

HTML

+ +
<button>Hola Mundo</button>
+ +

JavaScript

+ +
var b = document.querySelector("button");
+
+b.setAttribute("name", "helloButton");
+b.setAttribute("disabled", "");
+
+ +

Esto demuestra dos cosas:

+ + + +

{{ EmbedLiveSample('Example', '300', '50') }}

+ +

{{DOMAttributeMethods}}

+ +

Especificación

+ + + + + +

Notas Gecko

+ +

Utilizando setAttribute() para modificar ciertos atributos, el más notable es value 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 Element.value en lugar de Element.setAttribute().

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

{{ APIRef("DOM") }}

+ +

setAttributeNS añade un nuevo atributo o cambia el valor de un atributo con el namespace dado y el nombre.

+ +

Sintaxis

+ +
elemento.setAttributeNS(namespace,nombre,valor)
+
+ + + +

Ejemplo

+ +
var d = document.getElementById("d1");
+d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
+
+ +

Notas

+ +

{{ DOMAttributeMethods() }}

+ +

Especificación

+ +

DOM Level 2 Core: setAttributeNS

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

{{ APIRef("DOM") }}{{ gecko_minversion_header("2.0") }}

+ +

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 ()")}}.

+ +

Sintasix

+ +
element.setCapture(retargetToElement);
+
+ +
+
retargetToElement
+
     Si es verdadero, todos los eventos se dirigen directamente a este elemento; Si es falso, los eventos también pueden descargar a los descendientes de este elemento.
+
+ +

Ejemplo

+ +

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.

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

Ver ejemplo en vivo

+ +

Notas

+ +

El elemento no puede desplazarse completamente hacia arriba o hacia abajo dependiendo del diseño de otros elementos.

+ +

Especificación

+ +

Ninguna.

+ +

Ver también

+ + 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 +--- +
{{APIRef("Shadow DOM")}}
+ + + +

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.

+ +

Syntax

+ +
var shadowroot = element.shadowRoot;
+
+ +

Value

+ +

A {{DOMxRef("ShadowRoot")}} object instance, or null if the associated shadow root was attached with its {{DOMxRef("ShadowRoot.mode", "mode")}} set to closed. (See {{DOMxRef("Element.attachShadow()")}} for further details).

+ +

Examples

+ +

The following snippets are taken from our life-cycle-callbacks example (see it live also), which creates an element that displays a square of a size and color specified in the element's attributes.

+ +

Inside the <custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, updateStyle(), which actually applies the size and color to the element. You'll see that we are passing it this (the custom element itself) as a parameter.

+ +
connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}
+
+attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Custom square element attributes changed.');
+  updateStyle(this);
+}
+ +

In the updateStyle() 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:

+ +
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')};
+        }
+      `;
+    }
+  });
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-shadowroot', 'shadowRoot')}}{{Spec2('DOM WHATWG')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.shadowRoot")}}

+ +

See also

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

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve el nombre del elemento.

+ +

Sintaxis

+ +
elementName = element.tagName
+
+ + + +

Notas

+ +

En XML (y los lenguajes basados en XML tales como XHTML) el código tagName es sensible a las mayúsculas. En HTML, tagName devuelve el nombre del elemento en forma canonica, es decir con todas sus letras en mayúscula. El valor del código of tagName es el mismo que el de la instrucción nodeName.

+ +

Ejemplo

+ +

Si tenemos la siguiente línea de código:

+ +
<span id="born">Cuando yo nací...</span>
+
+ +

y el siguiente script

+ +
var span = document.getElementById("born");
+alert(span.tagName);
+
+ +

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".

+ +

Especificación

+ +

DOM Level 2 Core: tagName

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

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")}}.

+ +

Información general

+ +
+
Interfaz
+
{{domxref("WheelEvent")}}
+
Sincronía
+
asíncrono
+
Bubble
+
Si
+
Cancelable
+
Si
+
Target
+
defaultView, Document, Element
+
Acción predet.
+
Scroll, atras/adelante (historial), o zoom.
+
+ +

Propiedades

+ +

Este evento implementa las propiedades de:  {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.

+ +

Propiedades de WheelEvent

+ +

{{page("/en-US/docs/Web/API/WheelEvent", "Properties")}}

+ +

Propiedades de MouseEvent

+ +

{{page("/en-US/docs/Web/API/MouseEvent", "Properties")}}

+ +

Propiedades UIEvent

+ +

{{page("/en-US/docs/Web/API/UIEvent", "Properties")}}

+ +

Propiedades Event

+ +

{{page("/en-US/docs/Web/API/Event", "Properties")}}

+ +

Métodos

+ +

Este evento implementa los métodos de:  {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.

+ +

Métodos de WheelEvent

+ +

{{page("/en-US/docs/Web/API/WheelEvent", "Methods")}}

+ +

Métodos de MouseEvent

+ +

{{page("/en-US/docs/Web/API/MouseEvent", "Methods")}}

+ +

Métodos de UIEvent

+ +

{{page("/en-US/docs/Web/API/UIEvent", "Methods")}}

+ +

Métodos de Event

+ +

{{page("/en-US/docs/Web/API/Event", "Methods")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM3 Events','DOM3-Events.html#event-type-wheel','wheel')}}{{Spec2('DOM3 Events')}}Definición inicial.
+ +

Compatibilidad

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico31{{CompatVersionUnknown}}{{CompatGeckoDesktop("17.0")}}{{CompatIE("9.0")}}[1]187.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("17.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer solo toma el evento "wheel" mediante addEventListener, no se permite el atributo onwheel en objetos del DOM. Bug report.
+  

+ +

Escuchar al evento en distintos navegadores

+ +

En el siguiente script se crea el método multi-navegador addWheelListener que permite escuchar el evento wheel en diferentes navegadores a la vez que se previene el funcionamiento por defecto.

+ +
// 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);
+ +

Notas para Gecko

+ +

Orden de los eventos en eventos antiguos

+ +

Si el evento wheel no ha sido implementado, los eventos DOMMouseScroll y MozMousePixelScroll 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 {{ domxref("event.preventDefault()") }}, no ocurrirá nada.

+ +

El orden de ejecución del evento es:

+ +
    +
  1. Eventos wheel en grupo de eventos por defecto (aplicaciones web y add-ons pueden manejar los eventos de este grupo)
    2. +
  2. Un evento DOMMouseScroll vertical en caso de que el deltaY, en consecutivas llamadas del evento se vuelva mayor que 1.0 o menor que -1.0
    3. +
  3. Un evento MozMousePixelScroll vertical en caso de que el deltaY del último evento wheel no sea igual a cero
    4. +
  4. Un evento DOMMouseScroll horizontal en caso de que el deltaX acumule un valor mayor que 1.0 o menor que -1.0
    5. +
  5. Un evento MozMousePixelScroll horizontal en caso de que el deltaX del último evento no sea igual que cero
    6. +
  6. Un evento wheel en el grupo de sistema (Solamente add-ons pueden gestionar este grupo de eventos)
    7. +
+ +


+ ¿Qué ocurre si preventDefault() es llamado?

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
wheel (grupo por defecto de evetos)Se llama preventDefault()    
DOMMouseScroll (Vertical)No se llamaSe llama preventDefault()   
MozMousePixelScroll (Vertical)No se llamadefaultPrevented devuelve trueSe llama preventDefault()  
DOMMouseScroll (Horizontal)No se llamaNo se ve afectadoNo se ve afectadoSe llama preventDefault() 
MozMousePixelScroll (Horizontal)No se llamaNo se ve afectadoNo se ve afectadodefaultPrevented devuelve trueSe llama preventDefault()
wheel (grupo de eventos de sistema)defaultPrevented devuelve truedefaultPrevented devuelve truedefaultPrevented devuelve truedefaultPrevented devuelve truedefaultPrevented devuelve true
+ +

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 nsIEventListenerService para mayor detalle acerca del grupo de eventos de sistema.

+ +

Los valores delta y las acciones por defecto de eventos predefinidos pueden ser personalizados en las preferencias de usuario (details). Por lo tanto, no se debe presuponer que alguna acción en concreto va a ocurrir tras recibir este evento.

+ +

Valores delta

+ +

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.
+ El objetivo del evento wheel solo está definido por la posición del cursor en el momento que se dispara este.

+ +

El valor de deltaMode

+ +

En Windows, los siguientes 3 eventos nativos del DOM causan eventos wheel.

+ +
+
WM_MOUSEWHEEL (Evento wheel vertical del ratón)
+
El deltaMode puede ser DOM_DELTA_LINE o DOM_DELTA_PAGE. Depende de las preferencias de usuario en Windows (Para configuraciones por defecto, debería ser DOM_DELTA_LINE).
+
WM_MOUSEHWHEEL (Evento wheel horizontal del ratón)
+
EldeltaMode puede ser DOM_DELTA_LINE o DOM_DELTA_PAGE. 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 DOM_DELTA_LINE.
+
WM_GESTURE (Solo utilizado en navegación gestual)
+
El deltaMode es siempre DOM_DELTA_PIXEL. 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.
+
+ +

En Mac, el valor de deltaMode depende del dispositivo. Si el dispositivo permite alta resolución, el scroll se hará en pixels, de manera que el valor del deltaMode será DOM_DELTA_PIXEL. De todos modos, el usuario puede cambiarlo a DOM_DELTA_LINE con la preferencia "mousewheel.enable_pixel_scrolling".  Si el dispositivo no soporta alta resolución, es siembre DOM_DELTA_LINE.

+ +

En otras plataformas, el valor de deltaMode es siempre DOM_DELTA_LINE.

+ +

Eventos no confiables

+ +

Los eventos wheel no nativos nunca causarán acción por defecto.

+ +

Ver también

+ + -- cgit v1.2.3-54-g00ecf