recursal/MDN huggingface dataset:
Element.animate()
=================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
El método `animate()` de la interfaz `Element` es un método abreviado el cual crea un nuevo `Animation`, aplicado al elemento, luego reproduce la animación. Devuelve la instancia creada de un objeto `Animation`.

**Nota:** Los elementos pueden tener multiples animaciones aplicadas a ellos. Puedes obtener una
 lista de las animaciones que afectan a un elemento llamando a `Element.getAnimations()` (en-US).


Síntaxis
--------


```js
animate(keyframes, options);
```

### Parámetros

`keyframes`

 Puede ser un arreglo de objetos de fotogramas clave **o** un objeto de fotogramas clave
 cuyas propiedades son arreglos de valores a iterar. Ver Keyframe Formats (en-US)
 para más detalles.


`options`

 Puede ser un **entero representando la duración de la animación** (en milisegundos), **o** un
 objeto que contiene una o más propiedades acerca del tiempo descritas en los
 los parametros de opciones del `KeyframeEffect()` (en-US) y/o las
 siguientes opciones:


`id Opcional`

Una propiedad única `animate()` para animar: una `DOMString` la cual hace referencia a la animación.


### Valor de retorno

Regresa una `Animation`.

Ejemplos
--------

 En la demostración Down the Rabbit Hole (con la API de Animaciones Web),
 utilizamos el método conveniente, `animate()` para inmediatamente crear y reproducir una animación en el elemento `#tunnel`
 para hacerlo fluir hacia arriba, indefinidamente. Observa el arreglo de los objetos enviados como fotogramas clave y también el bloque de opciones de sincronización.


```js
document.getElementById("tunnel").animate(
  [
    // fotogramas clave
    { transform: "translateY(0px)" },
    { transform: "translateY(-300px)" },
  ],
  {
    // opciones de sincronización
    duration: 1000,
    iterations: Infinity,
  },
);
```

### Implicito a/desde fotogramas clave

En versiones más recientes de navegadores, se te permite declarar el estado de inicio o fin únicamente para una animación (por ejemplo: un simple fotograma clave), y el navegador inferirá la otra parte de la animación si está habilitado. Por ejemplo, considera esta simple animación — el objeto de fotograma clave se ve así:


```js
let rotate360 = [{ transform: "rotate(360deg)" }];
```


Solamente hemos especificado el fin del estado de la animación, y el estado inicial está implícito.

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animatable-animate |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* API de Animaciones Web (en-US)
* `Element.getAnimations()` (en-US)
* `Animation`
Element.removeAttribute()
=========================

`removeAttribute` elimina un atributo del elemento especificado.

Sintaxis
--------


```js
element.removeAttribute(attrName);
```


* `attrName` es una cadena que nombra el atributo a ser eliminado de *element*.
Ejemplo
-------


```js
// <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.

Métodos DOM que tratan con atributos de elementos:

| Not namespace-aware, most commonly used methods | Namespace-aware variants (DOM Level 2) | DOM Level 1 methods for dealing with `Attr` nodes directly (seldom used) | DOM Level 2 namespace-aware methods for dealing with `Attr` nodes directly (seldom used) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` (en-US) | `setAttributeNodeNS` (en-US) |
| `getAttribute` (DOM 1) | `getAttributeNS` (en-US) | `getAttributeNode` (en-US) | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` (en-US) | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` (en-US) | `removeAttributeNode` (en-US) | - |

Especificaciones
----------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-removeattribute① |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element.matches()
=================

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

Sintaxis
--------


```js
var result = element.matches(selectorString);
```

### Parámetros

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

### Valor devuelto

`result` es un `Boolean` (en-US).

### Excepciones

`SYNTAX_ERR`

La cadena especificada como selector no es válida.

Ejemplo
-------


```html
<ul id="aves">
  <li>Loro de alas naranja</li>
  <li class="amenazada">Ágila Filipina</li>
  <li>Gran Pelícano Blanco</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:


```js
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+).


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

Especificaciones
----------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-matches① |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* The syntax of Selectors (en-US)
* Otros métodos que usan selectores: `element.querySelector()` and `element.closest()`.
Evento input
============

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
El evento **`input`** se dispara cuando el valor (`value`) de un elemento `<input>`, `<select>`, o `<textarea>` ha sido cambiado.

|  |  |
| --- | --- |
| Burbujas | Yes |
| Cancelable | No |
| Interfaz | `InputEvent` (en-US) |
| Objectivo | `Element` |
| Acción por defecto | None |
| Propiedad del manejador del evento | `GlobalEventHandlers.oninput` |

El evento también aplica a los elementos con la propiedad `contenteditable` habilidado, y para cualquier otro elemento cuando la propiedad `designMode` esta encendida. En el caso de un `contenteditable` y `designMode`, el objetivo del evento es el the event target is the *editing host*. Si estas propiedades aplian a múltiples elementos, el host de edición es el elemento ancestro más cercano cuyo padre no es editable.

Para elementos `<input>` con `type=checkbox` o `type=radio`, el evento `input` debería disparar cuando el usuario alterna el control, por la especificación HTML5. Sin embargo, históricamente no siempre es el caso. Revise la compatibilidad o use el evento `change` (en-US) en su lugar para estos tipos.

**Nota:** A diferencia de `input`, el evento `change` (en-US) no es disparado necesariamente por cada alteración al valor (`value`) de un elemento.

Ejemplos
--------

Este ejemplo registra el valor siempre que se cambia el valor del elemento `<input>`.

### HTML


```html
<input placeholder="Ingrese algún texto" name="nombre" />
<p id="valores"></p>
```

### JavaScript


```js
const input = document.querySelector("input");
const log = document.getElementById("valores");

input.addEventListener("input", updateValue);

function updateValue(e) {
  log.textContent = e.srcElement.value;
}
```

### Resultado

(Funciona en la versión en inglés)

Especificaciones
----------------

| Specification |
| --- |
| UI Events # event-type-input |
| HTML Standard # handler-oninput |

Compatibilidad de los navegadores
---------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* InputEvent (en-US)
* `GlobalEventHandlers.oninput`
* Eventos relacionados
    + `beforeinput`
    + `change` (en-US)
    + `invalid`
Element.localName
=================

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

**Nota:** Antes de DOM4 esta API fué definida dentro de la interfaz`Node`.

Sintasix
--------
```

name = element.localName
```

### Valor de Retorno

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


```xml
<html xmlns="https://www.w3.org/1999/xhtml"
 xmlns:svg="https://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:


```xml
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 `tagName` continua devolviéndolo en mayúsculas para elementos HTML en HTML DOMs.

Especificaciones
----------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-localname① |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* `Element.namespaceURI`
* `Element.prefix`
* `Attr.localName` (en-US)
* `Node.localName` (en-US)
Element.attributes
==================

La propiedad `Element.attributes` retorna una colección "viva" cuyos nodos son todos los atributos registrados en el nodo especificado. Es un `NamedNodeMap` (en-US), no un `Array`, así que no tiene los métodos de `Array` y los índices de nodo `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
--------


```js
var attr = element.attributes;
```

Ejemplo
-------

### Ejemplos básicos


```js
// 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.


```html
<!doctype html>

<html>
  <head>
    <title>Attributes example</title>
    <script type="text/javascript">
 function listAttributes() {
 var paragraph = document.getElementById("paragraph");
 var result = document.getElementById("result");

 // Primero, verifiquenmos que el párrafo tiene algún atributo
 if (paragraph.hasAttributes()) {
 var attrs = paragraph.attributes;
 var output = "";
 for (var i = attrs.length - 1; i >= 0; i--) {
 output += attrs[i].name + "->" + attrs[i].value;
 }
 result.value = output;
 } else {
 result.value = "No hay atributos que mostrar";
 }
 }
 </script>
  </head>

  <body>
    <p id="paragraph" style="color: green;">Párrafo de ejemplo</p>
    <form action="">
      <p>
        <input
 type="button"
 value="Muestra el nombre cada atributo y su valor"
 onclick="listAttributes();" />
        <input id="result" type="text" value="" />
      </p>
    </form>
  </body>
</html>
```

Especificaciones
----------------

| Specification |
| --- |
| DOM Standard # dom-element-attributes |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* `NamedNodeMap` (en-US), la interfaz del objeto retornado.
* Consideracións sobre compatibilidad cruzada entre navegadores: en quirksmode
Element.append()
================

 El método **`Element.append()`**
 inserta un conjunto de objetos `Node` u objetos de tipo cadena
 después del último hijo de `Element`. Los objetos de tipo cadena se insertan
 como nodos `Text` (en-US) equivalentes.

Diferencias respecto a `Node.appendChild()`:

* `Element.append()` permite añadir también objetos de tipo cadena, mientras que
 `Node.appendChild()` sólo acepta objetos de tipo `Node`.
* `Element.append()` no tiene valor de retorno, mientras que
 `Node.appendChild()` devuelve el objeto `Node` añadido.
* `Element.append()` puede añadir varios nodos y cadenas de texto, mientras que
 `Node.appendChild()` sólo puede añadir un nodo.
Sintaxis
--------


```js
append(param1)
append(param1, param2)
append(param1, param2, /\* … ,\*/ paramN)
```

### Parámetros

`param1`, …, `paramN`

Un conjunto de objetos de tipo `Node` o cadena para insertar.

### Valor de retorno

Ninguno (`undefined`).

### Excepciones

`HierarchyRequestError` `DOMException`

 Se lanza cuando el nodo no puede insertarse en el punto especificado
 de la jerarquía.


Ejemplos
--------

### Añadir un elemento


```js
let div = document.createElement("div");
let p = document.createElement("p");
div.append(p);

console.log(div.childNodes); // NodeList [ <p> ]
```

### Añadir texto


```js
let div = document.createElement("div");
div.append("Algo de texto");

console.log(div.textContent); // "Algo de texto"
```

### Añadir un elemento y texto


```js
let div = document.createElement("div");
let p = document.createElement("p");
div.append("Algo de texto", p);

console.log(div.childNodes); // NodeList [ #text "Algo de texto", <p> ]
```

### El método append no se puede recorrer

 El método `append()` no está incluido en la sentencia `with`. Véase
 `Symbol.unscopables` para más información.


```js
let div = document.createElement("div");

with (div) {
  append("foo");
}
// ReferenceError: append is not defined
```

Especificaciones
----------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-append① |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Vea también
-----------

* `Element.prepend()` (en-US)
* `Node.appendChild()`
* `Element.after()` (en-US)
* `Element.insertAdjacentElement()`
* `NodeList`
transitioncancel
================

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

El evento `transitioncancel` es lanzado cuando una transición CSS (en-US) es cancelada.

Véase `GlobalEventHandlers.ontransitioncancel` (en-US) para mas información y ejemplos.

Información general
-------------------

Interfaz
`TransitionEvent` (en-US)
Burbuja

Sí

Cancelable

No

Objetivo
`document`, `element`
Acción por defecto

Ninguna

Propiedades
-----------

| Propiedad | Tipo | Descripción |
| --- | --- | --- |
| `target` Read only  | `EventTarget` | El objetivo del evento (the topmost target in the DOM tree). |
| `type` Read only  | `DOMString` | El tipo de evento. |
| `bubbles` Read only  | `Boolean` (en-US) | Si el evento normalmente se propaga o no |
| `cancelable` Read only  | `Boolean` (en-US) | Si el evento es cancelable o no |
| `propertyName`Read only  | `DOMString` | El nombre de la propiedad CSS asociada con la transición. |
| `elapsedTime`Read only  | `Float` | La cantidad de tiempo que ha durado la transición, en segundos, desde el momento en que el evento fué generado. Este valor no se ve afectado por el valor de `transition-delay`. |
| `pseudoElement`Read only  | `DOMString` | El nombre (empezando con dos "dos puntos") del pseudo-elemento CSS en el que ha ocurrido la transición (en caso de que el objetivo del evento sea dicho pseudo-elemento correspondiente al elemento), o una cadena vacía si la transición ha ocurrido en un elemento (lo que quiere decir que el objetivo del evento es dicho elemento). |

Especificaciones
----------------

| Specification |
| --- |
| CSS Transitions # transitioncancel |
| CSS Transitions # dom-globaleventhandlers-ontransitioncancel |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* El manejador `GlobalEventHandlers.ontransitioncancel` (en-US)
* La interfaz `TransitionEvent` (en-US)
* `transitionstart`, `transitionend`
* Propiedades CSS: `transition`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function` (en-US).
Element.namespaceURI
====================

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.

**Nota:** Antes de DOM4 esta API fué definida dentro de la interfaz `Node`.

Síntaxis
--------


```js
namespace = element.namespaceURI;
```

Ejemplo
-------

En este snippet, un elemento está siendo examinado por su `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/>`.


```js
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 `https://www.w3.org/1999/xhtml` como en XHTML.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-namespaceuri① |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* `Element.localName`
* `Element.prefix`
* `Attr.namespaceURI` (en-US)
* `Node.namespaceURI` (en-US)
Element.closest()
=================

El método **`closest()`** de la interfaz `Element` recorre el elemento y sus padres (dirigiéndose hacia la raiz del documento) hasta encontrar un nodo que coincida con el CSS selector especificado.

Sintaxis
--------


```js
closest(selectors)
```

### Parámetros

`selectors`

Una cadena de selector de CSS válido para comparar `Element` y sus ancestros.

### Valor de retorno

El ancestro más cercano `Element` que coincida con los `selectors` , o él mismo. Si no hay tal elemento devolverá `null` .

### Excepciones

`SyntaxError` `DOMException`

Se lanza si `selectors` no es un selector CSS válido.

Ejemplos
--------

### HTML


```html
<article>
  <div id="div-01">
    Aquí está div-01
    <div id="div-02">
      Aquí está div-02
      <div id="div-03">Aquí está div-03</div>
    </div>
  </div>
</article>
```

### JavaScript


```js
const el = document.getElementById("div-03");

// El ancestro más cercano con el id de "div-02"
console.log(el.closest("#div-02")); // <div id="div-02">

// El ancestro más cercano que es un div dentro de un div
console.log(el.closest("div div")); // <div id="div-03">

// El ancestro más cercano que es un div y tiene un padre article
console.log(el.closest("article > div")); // <div id="div-01">

// El ancestro más cercano que no sea un div
console.log(el.closest(":not(div)")); // <article>
```

Especificaciones
----------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-closest① |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### Notas de compatibilidad

* En Edge 15-18 `document.createElement(tagName).closest(tagName)` devolverá `null` si el elemento no está conectado (directa o indirectamente) al objeto de contexto, por ejemplo el objeto `Document` en el caso del DOM normal.
Véase también
-------------

* Referencia de selectores CSS
* Otros métodos `Element` que toman selectores: `Element.querySelector()`, `Element.querySelectorAll()` (en-US) y `Element.matches()`.