recursal/MDN huggingface dataset:
Element: wheel event
====================

El evento `wheel` se activa cuando el usuario gira un botón de rueda en un dispositivo señalador (normalmente un ratón).

Este evento reemplaza el evento obsoleto no estándar `mousewheel` (en-US).

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

| Burbujas | Sí |
| --- | --- |
| Cancelable | Sí |
| Interfaz | `WheelEvent` |
| Propiedades del manejador de eventos | `onwheel` |

**Nota:** No confundir el evento `wheel` con el evento `scroll`. La acción predeterminada de un evento `wheel` es específica de la implementación y no necesariamente envía un evento `scroll`. Incluso cuando lo hace, los valores `delta*` en el evento `wheel` no reflejan necesariamente la dirección de desplazamiento del contenido. Por lo tanto, no confíe en las propiedades `delta*` del evento `wheel` para obtener la dirección de desplazamiento. En su lugar, detecte los cambios de valor de `scrollLeft` y `scrollTop` del objetivo en el evento `scroll`.

Ejemplos
--------

### Escalar un elemento a través de la rueda

Este ejemplo muestra cómo escalar un elemento usando la rueda del mouse (u otro dispositivo señalador).


```html
<div>Escálame con la rueda de tu ratón.</div>
```



```css
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 105px;
  height: 105px;
  background: #cdf;
  padding: 5px;
}
```



```js
function zoom(event) {
  event.preventDefault();

  scale += event.deltaY \* -0.01;

  // Restricción de escala
  scale = Math.min(Math.max(0.125, scale), 4);

  // Aplicar transformación de escala
  el.style.transform = `scale(${scale})`;
}

let scale = 1;
const el = document.querySelector("div");
el.onwheel = zoom;
```

### Equivalente en addEventListener

El manejador de eventos también se puede configurar mediante el método `addEventListener()`:


```js
el.addEventListener("wheel", zoom);
```

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

| Specification |
| --- |
| UI Events # event-type-wheel |
| HTML Standard # handler-onwheel |

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

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

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

* `WheelEvent`
* Document: `wheel` event (en-US)
Element.insertAdjacentElement()
===============================

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

Sintaxis
--------


```js
elementoObjetivo.insertAdjacentElement(posición, elemento);
```

### Parameters

`posición`

Un `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ón | Explicación |
| --- | --- |
| `SyntaxError` | La `posición` especificada no tiene un valor reconocido. |
| `TypeError` | El `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
-------


```js
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 elcódigo fuente también.) Aquí tenemos una secuencia de elementos `<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
----------------

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

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

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

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

* `Element.insertAdjacentHTML()`
* `Element.insertAdjacentText()` (en-US)
* `Node.insertBefore()` (similar to `beforebegin`, with different arguments)
* `Node.appendChild()` (mismo efecto que `beforeend`)
Element.getAttributeNodeNS()
============================

Sumario
-------

Dados namespace y nodeName del element, devuelve su `Attr` .

Sintaxis
--------


```js
attributeNode = element.getAttributeNodeNS(namespace, nodeName);
```


* `attributeNode` es el nodo para el atributo especificado.
* `namespace` es la cadena que define el namespace del atributo.
* `nodeName` es la cadena que define el name del atributo.
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.

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 # dom-element-getattributenodens |

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

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

`onlostpointercapture` es una propiedad `event handler` de la interfaz `Element` que devuelve el controlador de eventos (función) para el evento tipo `lostpointercapture` .

Síntaxis
--------


```js
var lostCaptureHandler = target.onlostpointercpature;
```

### Valor de Retorno

`lostCaptureHandler`

El controlador de eventos *lostpointercapture* para el elemento `target`.

Ejemplo
-------


```js
<html>
<script>
function overHandler(ev) {
 // Determine the target event's lostpointercapture handler
 var lostCaptureHandler = ev.target.onlostpointercapture;
}
function init() {
 var el=document.getElementById("target");
 el.onpointerover = overHandler;
}
</script>
<body onload="init();">
<div id="target"> Touch me ... </div>
</body>
</html>
```

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

| Specification |
| --- |
| Pointer Events # the-lostpointercapture-event |
| Pointer Events # dom-globaleventhandlers-onlostpointercapture |

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

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

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

* `lostpointercapture`
Element.scrollWidth
===================

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

**Nota:** El valor de esta propiedad será red redondedo a un entero. Si necesita un valor fraccional, use `element.getBoundingClientRect()`.

Sintaxis
--------


```js
var xScrollWidth = element.scrollWidth;
```


*xScrollWidth* es el ancho del contenido de *element* en pixels.

Ejemplo
-------


```html
<!doctype html>
<html>
  <head>
    <title>Ejemplo</title>
    <style>
 div {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 }

 #aDiv {
 width: 100px;
 }

 button {
 margin-bottom: 2em;
 }
 </style>
  </head>

  <body>
    <div id="aDiv">FooBar-FooBar-FooBar-FooBar</div>
    <button id="aButton">Check for overflow</button>

    <div id="anotherDiv">FooBar-FooBar-FooBar-FooBar</div>
    <button id="anotherButton">Check for overflow</button>
  </body>
  <script>
 var buttonOne = document.getElementById("aButton"),
 buttonTwo = document.getElementById("anotherButton"),
 divOne = document.getElementById("aDiv"),
 divTwo = document.getElementById("anotherDiv");

 //comprueba si un desbordamiento está ocurriendo
 function isOverflowing(element) {
 return element.scrollWidth > element.offsetWidth;
 }

 function alertOverflow(element) {
 if (isOverflowing(element)) {
 alert("El contenido desborda el contenedor.");
 } else {
 alert("Sin desobordamiento!");
 }
 }

 buttonOne.addEventListener("click", function () {
 alertOverflow(divOne);
 });

 buttonTwo.addEventListener("click", function () {
 alertOverflow(divTwo);
 });
 </script>
</html>
```

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

| Specification |
| --- |
| CSSOM View Module # dom-element-scrollwidth |

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

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

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

* `Element.clientWidth`
* `HTMLElement.offsetWidth`
* Determinando las dimensiones de elementos (en-US)
Element.scrollLeft
==================

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 ``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íntaxis
--------


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


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


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

* Si el elemento no se puede desplazar (por ejemplo, no tiene desbordamiento), `scrollLeft` se establece en 0.
* Si se establece en un valor menor que 0 (mayor que 0 para elementos de derecha a izquierda), `scrollLeft` se establece en 0.
* Si se establece en un valor mayor que el máximo que se puede desplazar el contenido, `scrollLeft` se establece en el valor máximo.
Ejemplo
-------


```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
 #container {
 border: 1px solid #ccc;
 height: 100px;
 overflow: scroll;
 width: 100px;
 }
 #content {
 background-color: #ccc;
 width: 250px;
 }
 </style>
    <script>
 document.addEventListener(
 "DOMContentLoaded",
 function () {
 var button = document.getElementById("slide");
 button.onclick = function () {
 document.getElementById("container").scrollLeft += 20;
 };
 },
 false,
 );
 </script>
  </head>
  <body>
    <div id="container">
      <div id="content">Lorem ipsum dolor sit amet.</div>
    </div>
    <button id="slide" type="button">Slide</button>
  </body>
</html>
```

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

| Specification |
| --- |
| CSSOM View Module # dom-element-scrollleft |

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

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

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


```js
elements = element.getElementsByTagName(tagName);
```


* `elements` es un `NodeList` del elemento encontrado en el orden en que aparece en el árbol.
* `element` es el elemento a partir del cual debe empezar la búsqueda. Recuerda que sólo se buscan los elementos descendentes del elemento dado, sin incluir el propio elemento.
* `tagName` es el nombre que se busca. La cadena especial `"*"` representa todos los elementos.

**Nota:** 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 Error 206053 en Firefox para más detalles).

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

Ejemplo
-------


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

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

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

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

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

Resumen
-------

El atributo `outerHTML` del interfaz DOM `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
--------


```js
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:


```js
// HTML:
// <div id="d"><p>Content</p><p>Further Elaborated</p></div>

d = document.getElementById("d");
dump(d.outerHTML);

// La cadena '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
// es volcada a la ventana de la consola.
```


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


```js
// HTML:
// <div id="container"><div id="d">This is a div.</div></div>

container = document.getElementById("container");
d = document.getElementById("d");
console.log(container.firstChild.nodeName); // logs "DIV"

d.outerHTML = "<p>This paragraph replaced the original div.</p>";
console.log(container.firstChild.nodeName); // logs "P"

// El div #d no será parte del árbol del documento,
// el nuevo párrafo lo reemplazará.
```

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:


```js
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:


```js
var p = document.getElementsByTagName("p")[0];
console.log(p.nodeName); // muestra: "P"
p.outerHTML = "<div>This div replaced a paragraph.</div>";
console.log(p.nodeName); // sigue mostrando: "P";
```

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

| Specification |
| --- |
| DOM Parsing and Serialization # dom-element-outerhtml |

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

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

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

* `HTMLElement.outerText` (en-US)
* MSDN: Propiedad outerHTML
Element.id
==========

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 `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íntaxis
--------


```js
var idStr = elt.id; // Get the id.
elt.id = idStr; // Set the id
```


* `idStr` es el identificador del elemento.
Especificaciones
----------------

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

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

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

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

* La **id** del atributo global DOM.
Element.className
=================

Resumen
-------

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

Sintaxis
--------


```js
var cName = elementNodeReference.className;
elementNodeReference.className = cName;
```


*cName* es una variable de cadena representando la clase o la lista de clases separada por espacios, del elemento en cuestión.

Ejemplo
-------


```js
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 `SVGAnimatedString` (en-US) si `element` es un `SVGElement` (en-US). Es mejor de obtener/establecer la propiedad `className` de un elemento utilizando `Element.getAttribute` y `Element.setAttribute` si estás tratando con elementos SVG.


```js
elm.setAttribute("class", elm.getAttribute("class"));
```

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

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

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

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

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

* `element.classList`
Element.setAttributeNS()
========================

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

Sintaxis
--------


```js
elemento.setAttributeNS(namespace, nombre, valor);
```


* `namespace` es un string especificando el namespace del atributo.
* `name es un string identificando el atributo a ser puesto.`
* `value es el string del valor deseado del nuevo atributo.`
Ejemplo
-------


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

Notas
-----

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

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

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

### Resumen

Devuelve el nombre del elemento.

### Sintaxis


```js
elementName = element.tagName;
```


* `elementName` es una cadena que contiene el nombre del elemento actual.
### 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".

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

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

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

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

El evento `transitionend` es lanzado cuando una transición CSS (en-US) se ha completado. Si la transición es eliminada antes de haberse completado, como cuando `transition-property` es eliminado o `display` se establece a `"none"`, entonces el evento no será generado.

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

Especificación

CSS Transitions

Interfaz
`TransitionEvent` (en-US)
Burbuja

Sí

Cancelable

Sí

Objetivo
`Element`, `Document`, `Window`
Acción

undefined

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

| Property | Type | Description |
| --- | --- | --- |
| `target` Read only  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` Read only  | `DOMString` | The type of event. |
| `bubbles` Read only  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Read only  | `Boolean` | Whether the event is cancellable or not. |
| `propertyName` Read only  | `DOMString` | The name of the CSS property associated with the transition. |
| `elapsedTime` Read only  | Float | The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of `transition-delay`. |
| `pseudoElement` Read only  | `DOMString` | The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element). |

Ejemplo
-------

Este ejemplo establece un manejador de evento para detectar el evento `transitionend`, y así cambiar el texto que se muestra dentro del elemento cuando la transición se completa.


```js
let element = document.getElementById("slidingMenu");
element.addEventListener(
  "transitionend",
  function (event) {
    element.innerHTML = "Done!";
  },
  false,
);
```

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

| Specification |
| --- |
| CSS Transitions # transitionend |

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

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

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

La interfaz `TransitionEvent` (en-US)

* `transitionstart`, `transitioncancel`
* Propiedades CSS: `transition`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function` (en-US).