recursal/MDN huggingface dataset:
Range.setStart()
================

El método **`Range.setStart()`** establece la posición de inicio de un `Range`.

Si `startNode` es un `Node` de tipo `Text`, `Comment`, o `CDATASection`, entonces `startOffset` es el número de caracteres de partida de `startNode`. Para otros tiposde nodos, `startOffset` es el número de nodos hijos entre el inicio de los `startNode`.

Setting the start point below (lower in the document) the end point will result in a collapsed range with the start and end points both set to the specified start position.

Definiendo el punto de partida abajo (más abajo en el documento) el punto final resultará en un rango colapsado con el punto tanto de inicio como de entrada establecidos a la posición de partida especificada.

Sintaxis
--------
```

range.setStart(startNode, startOffset);
```

### Parámetros

*startNode*

El `Node` donde `Range` debe empezar.

*startOffset*

Un entero mayor o igual a cero representando el offset o desplazamiento de caracteres para el inicio del `Range` desde el comienzo de `startNode`.

Ejemplo
-------


```js
var range = document.createRange();
var startNode = document.getElementsByTagName("p").item(2);
var startOffset = 0;
range.setStart(startNode, startOffset);
```

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

| Specification |
| --- |
| DOM Standard # dom-range-setstart |

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

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

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

* The DOM interfaces index (en-US)
range.collapsed
===============

### Resumen

Devuelve un valor booleano verdadero indicando si los puntos de inicio y fin de un rango están en la misma posición.

### Sintaxis
```

isCollapsed = range.collapsed;
```

### Ejemplo
```

range = document.createRange();
range.setStart(startNode,startOffset);
range.setEnd(endNode,endOffset);
isCollapsed = range.collapsed;
```

### Notas

Devuelve un valor boleano verdadero si los puntos límite inicial y final del rango están en el mismo punto en el DOM, y devuelve un valor falso si no lo están.

Un rango plegado está vacío, sin tener algún contenido, especificando un simple punto en el árbol del DOM. La propiedad plegada es de sólo lectura. Para plegar un rango, vea el método collapse.

### Especificación

collapsed
Range.getClientRects()
======================

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

El método **`Range.getClientRects()`** regresa una lista de objetos `DOMRect` (en-US) los cuales representan el área de la pantalla ocupada por el rango. El resultado es generado al agregar los resultados de las llamadas a `Element.getClientRects()` para cada uno de los elementos dentro del rango.

Sintaxis
--------
```

rectList = range.getClientRects()
```

Ejemplo
-------


```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
rectList = range.getClientRects();
```

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

| Specification |
| --- |
| CSSOM View Module # dom-range-getclientrects |

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

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

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

* `Range`
Window.requestAnimationFrame()
==============================

El método **`window.requestAnimationFrame`** informa al navegador que quieres realizar una animación y solicita que el navegador programe el repintado de la ventana para el próximo ciclo de animación. El método acepta como argumento una función a la que llamar antes de efectuar el repintado.

**Nota:** Si no quieres que tu animación se detenga, debes asegurarte de llamar a su vez a `requestAnimationFrame()` desde tu callback.

Debes llamar a este método cuando estés preparado para actualizar tu animación en la pantalla para pedir que se programe el repintado. Ésto puede suceder hasta 60 veces por segundo en pestañas en primer plano, pero se puede ver reducido a velocidades inferiores en pestañas en segundo plano.

El método indicado como callback recibe un único argumento que indica el tiempo en el que está programado que se ejecute el ciclo de animación.

Sintaxis
--------


```js
requestID = window.mozRequestAnimationFrame(callback);   // Firefox
window.msRequestAnimationFrame(callback);                // IE 10 PP2+
window.webkitRequestAnimationFrame(callback[, element]); // Chrome/Webkit
```

### Parámetros

`callback`

Parámetro que especifica la función a la cual llamar llegado el momento de actualizar tu animación para el próximo repintado.

### Valor devuelto

Un valor entero `long`, es un entero de tipo long que identifica de manera exclusiva la entrada en la lista de callbacks. Es siempre un distinto de cero, pero no debes realizar ninguna otra suposición acerca de su valor. Puedes pasar este valor a `window.cancelAnimationFrame()` para cancelar la petición de actualización del callback.

Ejemplo
-------


```js
(function () {
  var requestAnimationFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

var start = null;
var element = document.getElementById("SomeElementYouWantToAnimate");

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.transform =
    "translateX(" + Math.min(progress / 10, 200) + "px)";
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);
```

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

| Specification |
| --- |
| HTML Standard # dom-animationframeprovider-requestanimationframe |

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

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

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

* `window.mozAnimationStartTime` (en-US)
* `window.cancelAnimationFrame()`
* mozRequestAnimationFrame - Blog post
* requestAnimationFrame for smart animating - Blog post
* Animating with javascript: from setInterval to requestAnimationFrame - Blog post
* Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1 - Blog post
Localizando elementos DOM usando selectores
===========================================

Los selectores api proveen metodos que hacen mas facil y rapido devolver elementos del nodo `Element` del DOM mediante emparejamiento de un conjunto de selectores. Esto es mucho mas rapido que las tecnicas anteriores, donde fuera necesario, por ejemplo usar un loop en un codigo JavaScript para localizar el item especifico que quisieras encontrar.

Interfaz de NodeSelector
------------------------

Esta especificación añade dos nuevos metodos a cualquier objeto implementando el `Document`, `DocumentFragment`, o `Element` interfaces:

`querySelector()`

Devuelve la primera coincidencia del (elemento) `Element` nodo dentro de las subramas del nodo. Sino se encuentra un nodo coincidente, se devuelve `null` .

`querySelectorAll()` (en-US)

devuelve un listado de nodos `NodeList` conteniendo todos los elementos del nodo coincidentes( `Element`) dentro de las subramas del nodo, o Devuelve un Listado de Nodos vacio `NodeList` sino se encuentran coincidencias.


**Nota:** El `NodeList` devuelto por `querySelectorAll()` (en-US) no es dinamico, Es decir que cualquier cambio realizado en el DOM no se vera reflejado en la coleccion. Esto es diferente de otros metodos de querying del dom que si devuelven listados de nodos dinamicos.

Encontraras ejemplos y detalles leyendo el documento de metodos `Element.querySelector()` y `Element.querySelectorAll()` (en-US), Tambien en el articulo Code snippets for querySelector.

Selectors
---------

El metodo de selectores acepta uno o mas selectores seperados por comas entre cada selector para determinar que elemento o elementos deben ser devueltos. por ejemplo para seleccionar todos los elementos (p) del parrafo en un documento donde la clase CSS sea tanto `warning` or `note`, podes hacer lo siguiente:
```

var special = document.querySelectorAll( "p.warning, p.note" );
```


tambien por usar query para etiquetas id. Por ejemplo:
```

var el = document.querySelector( "#main, #basic, #exclamation" );
```


luego de ejecutar el codigo de arriba, la variable `el` contiene el primer elemento del documento, su ID puede ser uno de los siguentes `main`, `basic`, or `exclamation`.

Podes usar cualquier selector CSS con los metodos `querySelector()` y `querySelectorAll()`*.*

Ver tambien
-----------

* Selectors API
* `Element.querySelector()`
* `Element.querySelectorAll()` (en-US)
* `Document.querySelector()`
* `Document.querySelectorAll()`
* Code snippets for querySelector
Example
=======
```

 <html>
 <head>
   <title>Mi Documento</title>
   <script type="text/javascript">
   function cambio() {
     // document.getElementsByTagName("H1") retorna un NodeList de elementos
     // h1 en el documento, y el primero es numero 0:
     var header = document.getElementsByTagName("H1").item(0);
     // El firstChild del encabezado es un nodo Text:
     header.firstChild.data = "Un documento dinamico";
     // Ahora el encabezado es "Un documento dinamico".
     var para = document.getElementsByTagName("P").item(0);
     para.firstChild.data = "Este es el primer parrafo.";
     // Crea un nuevo nodo Text para el segundo parrafo
     var newText = document.createTextNode("Este es el segundo parrafo.");
     // Crea un nuevo Element para que sea el segundo parrafo
     var newElement = document.createElement("P");
     // Agrega el texto en el parrafo
     newElement.appendChild(newText);
     // Y agrega el parrafo al final del documento dentro del
     // BODY (el cuál es el padre de "para")
     para.parentNode.appendChild(newElement);
   }
   </script>
 </head>
 <body>
   <input type="button" value="Cambia este documento." onclick="cambio()">
   <h1>Encabezado</h1>
   <p>Parrafo</p>
 </body>
 </head>
```
Image()
=======

### Constructor del elemento de Imagen

Acepta dos parametros opcionales: Image([unsigned long ***width***, unsigned long ***height***])

Devuelve un HTMLImageElement instanciado justo como `document.createElement('img')` would.

Ejemplo:


```js
var myImage = new Image(100, 200);
myImage.src = "picture.jpg";
console.log(myImage);
```


Resultado:


```html
<img width="100" height="200" src="picture.jpg" />
```


| Specification | Status | Comment |
| --- | --- | --- |
| HTML5 La definición del constructor de imagen, en esta especificación. | Recommendación | Un constructor (con 2 parametros opcionales) han sido agregados. Las siguientes propiedades ahora son obsoletas: `name`, `border`, `align`, `hspace`, `vspace`, and `longdesc`. The following properties are now `unsigned long`, instead of `long`: `height`, and `width`. Las siguientes propiedadeas ahora han sido agrgados: `crossorigin`, |
event.bubbles
=============

Indica si el evento determinado *se propaga* (burbujea) a través del DOM o no. Esta propagación se refiere a si el evento viaja desde el elemento donde se originó hasta los elementos padres en orden de anidamiento.

Sintaxis
--------
```

event.bubbles
```


Retorna un valor Booleano que es `true` si el evento se propaga en el DOM.

Ejemplo
-------
```

var bool = event.bubbles;
```


`bool` tiene el valor `true` o `false`, dependiendo de si el evento puede ser burbuja o no.

Notas
-----

Sólo ciertos eventos pueden ser burbuja. Los eventos que pueden ser burbuja tienen esta propiedad con el valor `true`. Podemos usar esta propiedad para comprobar si un elemento puede ser burbuja o no.

### Ejemplo
```

 function goInput(e) {
  // comprueba si es burbuja y
  if (!e.bubbles) {
     // entrega el evento si no lo es
     passItOn(e);
  }
  // está siendo propagado
  doOutput(e)
}
```
event.cancelable
================

### Resumen

Indica si el elemento puede ser cancelado o no.

### Sintaxis
```

bool =
event.cancelable;
```


`bool` tiene valor `true` o `false`, dependiendo de si el evento puede ser desactivado.

### Notas

Si un evento puede ser cancelado o no, es algo que se determina en el momento en que el evento es inicializado.

Para cancelar un evento, llama al método preventDefault en el evento. Esto evita que la tarea de implementación ejecute la acción por defecto asociada con el evento.

### Especificación

DOM Level 2 Events: cancelable
event.initEvent
===============

**Obsoleto:** Esta característica ya no se recomienda. Aunque es posible que algunos navegadores aún lo admitan, probablemente ya se ha eliminado de los estándares web relevantes, está en proceso de eliminación o solo se conserva por motivos de compatibilidad. Evite usarlo y actualice el código existente si es posible; consulte la tabla de compatibilidad en la parte inferior de esta página para orientar su decisión. Tenga en cuenta que esta característica puede dejar de funcionar en cualquier momento.

### Resumen

El método `initEvent` se usa para dar valor inicial a un evento creado mediante document.createEvent.

### Sintaxis
```

event.initEvent(type,bubbles,cancelable)
```


`type`

El tipo de evento.

`bubbles`

Un valor binario indicando si el evento debe ser recurrente en la cadena de eventos, o no (ver bubbles).

`cancelable`

Un valor binario indicando si el evento puede ser cancelado o no (ver cancelable).

Nota: Un valor binario puede tener sólo valores 1 y 0. En lógica de Boole, cierto (*true* ) y falso (*false* ).

### Ejemplo
```

// crea un evento "click" que puede ser recurrente y
// NO puede ser cancelado.
event.initEvent("click", true, false);
```

### Notas

Los eventos inicializados de esta forma, deben haber sido creados por el método document.createEvent. Debemos llamar a `initEvent` para inicializar el evento antes de que pueda ser lanzado con dispatched.

### Especificación

DOM Level 2 Events: Event.initEvent
Event.currentTarget
===================

Identifica el target (objetivo) actual del evento, ya que el evento atraviesa el DOM. Siempre hace referencia al elmento al cual el controlador del evento fue asociado, a diferencia de `event.target`, que identifica el elemento el el que se produjo el evento.

Ejemplo
-------

Es interesante utilizar `event.currentTarget` cuando se asocia un mismo controlador de eventos a varios elementos.


```js
function hide(e) {
  e.currentTarget.style.visibility = "hidden";
  console.log(e.currentTarget);
  // Cuando esta función es usada como un controlador de evento: this === e.currentTarget
}

var ps = document.getElementsByTagName("p");

for (var i = 0; i < ps.length; i++) {
  // console: imprime el elemento pulsado <p>
  ps[i].addEventListener("click", hide, false);
}
// console: imprime <body>
document.body.addEventListener("click", hide, false);

// hace desaparecer párrafos al hacer click alrededor
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-currenttarget② |

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

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

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

Comparativa de Event Targets (en-US)
Event()
=======

El constructor **`Event()`** crea un nuevo objeto `Event`. Un evento creado de esta manera se denomina *evento sintético*, a diferencia de un evento activado por el navegador, y se puede enviar (en-US) mediante una secuencia de comandos.

Sintaxis
--------


```js
new Event(type)
new Event(type, options)
```

### Valores

`type`

Un texto con el nombre del evento.

`options` Opcional

Un objeto con las siguientes propiedades:

`bubbles` Opcional

Un valor booleano que indica si el evento se propaga. Por defecto es `false`.

`cancelable` Opcional

Un valor booleano que indica si el evento puede ser cancelado. Por defecto es `false`.

`composed` Opcional

 Un valor booleano que indica si el evento disparará `listeners` fuera de un `shadow root` (Para mas detalles ver `Event.composed` (en-US)).
 Por defecto es `false`.



### Valor de retorno

Una instancia del objeto `Event`.

Ejemplo
-------


```js
// crea un evento look que se propaga y no puede cancelarse

var evento = new Event("look", { bubbles: true, cancelable: false });
document.dispatchEvent(evento);

// El evento puede ser despachado desde cualquier elemento, no solo desde el `document`.
myDiv.dispatchEvent(evento);
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-event |

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

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

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

* `Event`
* `EventTarget.dispatchEvent()`
* Creando y lanzando eventos (en-US)
event.preventDefault
====================

### Resumen

Cancela el evento si este es cancelable, sin detener el resto del funcionamiento del evento, es decir, puede ser llamado de nuevo.

### Sintaxis
```

event.preventDefault()
```

### Ejemplo

Cambiar el estado de una caja de selección es la función por defecto de la acción de hacer clic sobre la caja. Este ejemplo ilustra como hacer que esto no ocurra:
```

<html>
<head>
<title>ejemplo de preventDefault</title>

<script type="text/javascript">

function stopDefAction(evt) {
  evt.preventDefault();
}
</script>
</head>

<body>

<p>Por favor, haz clic sobre la caja de selección.</p>

<form>
<input type="checkbox" onclick="stopDefAction(event);"/>
<label for="checkbox">Selección</label>
</form>

</body>
</html>
```


Puedes ver `preventDefault` en acción aquí.

El siguiente ejemplo demuestra cómo puede evitarse que un texto invalido entre en un campo de formulario mediante preventDefault().
```

<html>
<head>
<title>preventDefault example</title>

<script type="text/javascript">

function checkName(evt) {
var charCode = evt.charCode;

  if (charCode != 0) {
    if (charCode < 97 || charCode > 122) {
      evt.preventDefault();
      alert("Por favor usa sólo letras minúsculas." + "\n"
            + "charCode: " + charCode + "\n"
      );
    }
  }
}

</script>
</head>

<body>

<p>Por favor entra tu nombre en letras minúsculas solamente.</p>
<form>
<input type="text" onkeypress="checkName(event);"/>
</form>

</body>
</html>
```

### Notas

Llamar a `preventDefault` en cualquier momento durante la ejecución, cancela el evento, lo que significa que cualquier acción por defecto que deba producirse como resultado de este evento, no ocurrirá.

Puedes usar event.cancelable para comprobar si el evento es cancelable o no. Llamar a `preventDefault` para un evento no cancelable, no tiene ningún efecto.

`preventDefault` no detiene las siguientes llamadas al evento producidas en el DOM. En su lugar debería usarse event.stopPropagation para ese propósito.

### Especificación

DOM Level 2 Events: preventDefault
Event.stopPropagation()
=======================

El método `stopPropagation()` de la interfaz `Event` evita la propagación adicional del evento actual en las fases de captura y *bubbling*.

Sintaxis
--------
```

event.stopPropagation();
```

Ejemplo
-------

Ver ejemplo 5: Propagación del evento (en-US) en el capítulo de Ejemplos para un ejemplo mas detallado de este método y la propagación del evento en el DOM.

Notas
-----

Ver las Especificaciones del DOM para la explicación del flujo del eventos. (El Borrador de eventos del DOM nivel 3 tiene una ilustración.)

preventDefault (en-US) es un método complementario que puede ser usado para prevenir la acción default del evento cuando este ocurre.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-stoppropagation① |

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

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

### Resumen

Retorna un boleano indicando si `event.preventDefault()` fue llamado en el evento o no.

**Nota:** Deberías usar este en lugar del que no es estándar, el método obsoleto `getPreventDefault()` (ver Error 691151 en Firefox).

### Sintaxis
```

bool = event.defaultPrevented
```

### Ejemplo
```

 if (e.defaultPrevented) {
   /* El evento por defecto fue prevenido */
 }
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-defaultprevented① |

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

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

La propiedad de sólo-lectura **`Event.type`** devuelve una cadena de texto que contiene el tipo de evento. Se establece cuando se contruye el evento y es el nombre que se utiliza normalmente para referirse al evento en cuestión, como `click`, `load` o `error`.

El argumento `event` de `EventTarget.addEventListener()` y `EventTarget.removeEventListener()` no es sensible a mayúsculas.

Para una lista de tipos de evento displonibles, vea la referencia de eventos

Sintaxis
--------
```

event.type
```

Ejemplos
--------


```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>Event.type Example</title>

    <script>
 var currEvent;
 function getEvtType(evt) {
 console.group();

 currEvent = evt.type;
 console.log(currEvent);

 document.getElementById("Etype").innerHTML = currEvent;

 console.groupEnd();
 }

 // Eventos de teclado
 document.addEventListener("keypress", getEvtType, false); //[second]

 document.addEventListener("keydown", getEvtType, false); //first
 document.addEventListener("keyup", getEvtType, false); //third

 // Eventos de ratón
 document.addEventListener("click", getEvtType, false); // third

 document.addEventListener("mousedown", getEvtType, false); //first
 document.addEventListener("mouseup", getEvtType, false); //second
 </script>
  </head>

  <body>
    <p>Press any key or click the mouse to get the event type.</p>
    <p>Event type: <span id="Etype" style="color:red">-</span></p>
  </body>
</html>
```

### Resultado

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-type④ |

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

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

La propiedad **`target`** de la interfaz del `event.currentTarget` es una referencia al objeto en el cual se lanzo el evento. Es diferente de `event.currentTarget` donde el controlador de eventos (event handler) es llamado durante la fase de bubbling or capturing del evento.

Sintaxis
--------
```

const theTarget = algunEvento.target
```

Ejemplo
-------

La propiedad `event.target` puede ser usada para implementar una **delegación del evento**.


```js
// Crear una lista
const ul = document.createElement("ul");
document.body.appendChild(ul);

const li1 = document.createElement("li");
const li2 = document.createElement("li");
ul.appendChild(li1);
ul.appendChild(li2);

function hide(e) {
  // e.target se refiere elemento clickado <li>
  // Esto es diferente de e.currentTarget, que se referiría al padre <ul> en este contexto
  e.target.style.visibility = "hidden";
}

// Incluir el 'listener' a la lista
// Se ejecutará cuando se haga click en cada <li>
ul.addEventListener("click", hide, false);
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-target③ |

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

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

También ver
-----------

* Comparación de los Eventos (en-US)