recursal/MDN huggingface dataset:
CSSStyleSheet.insertRule()
==========================

El método **`CSSStyleSheet.insertRule()`** inserta una nueva regla de estilo en la actual hoja de estilos.

Para conjuntos de reglas ésta contiene tanto al selector como la declaración de estilo. Para reglas-arroba, ésta especifica tanto al identificador-arroba como como al contenido de la regla. Si se asignan varias reglas en el `DOMString` como parámetro se dispara una `DOMException` con el código SYNTAX\_ERR.

Syntax
------
```

stylesheet.insertRule(regla, índice)
```

### Parameters

* `regla` es un `DOMString` que contiene la regla que se va a insertar (selector y declaración).
* índice es un `unsigned int` que representa la posicion en la que se va a insertar.
Ejemplos
--------

### Ejemplo 1


```js
// Insertar una nueva regla al principio de mi hoja de estilos
myStyle.insertRule("#blanc { color: white }", 0);
```

### Example 2


```js
/\*\*
 \* Agregar una regla de hoja de estilos al documento(sin embargo, una mejor práctica puede ser
 \* cambiar las clases dinamicamente, así se mantiene la información de estilo en
 \* hojas de estilo genuinas (evitando agregar elementos extras al DOM))
 \* Note que se necesita una matriz para las declaraciones y reglas ya que ECMAScript
 \* no proporciona un orden de iteración predecible y como CSS
 \* depende del orden(i.e., es cascada); aquellos sin necesidad de
 \* reglas en cascada podrían construir una API basada en objetos de acceso más amigable.
 \* @param {Matriz} reglas. Acepta una matriz de declaraciones JSON-encoded
 \* @example
addStylesheetRules([
 ['h2', // Acepta un segundo argumento como una matriz de matrices
 ['color', 'red'],
 ['background-color', 'green', true] // 'true' para reglas !important
 ],
 ['.myClass', ['background-color', 'yellow']
 ]
]);
 \*/
function addStylesheetRules(decls) {
  var styleEl = document.createElement("style");
  document.head.appendChild(styleEl);
  // Aparentemente ¿alguna versión de Safari necesita la siguiente linea? No lo sé.
  styleEl.appendChild(document.createTextNode(""));
  var s = styleEl.sheet;
  for (var i = 0, rl = rules.length; i < rl; i++) {
    var j = 1,
      rule = rules[i],
      selector = decl[0],
      propStr = "";
    // Si el segundo argumento de una regla es una matriz de matrices, corrijamos nuestras variables.
    if (Object.prototype.toString.call(rule[1][0]) === "[object Array]") {
      rule = rule[1];
      j = 0;
    }
    for (var pl = rule.length; j < pl; j++) {
      var prop = rule[j];
      propStr +=
        prop[0] + ":" + prop[1] + (prop[2] ? " !important" : "") + ";\n";
    }
    s.insertRule(selector + "{" + propStr + "}", s.cssRules.length);
  }
}
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylesheet-insertrule |

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

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

See also
--------

* `deleteRule`
Stylesheet.ownerRule
====================

### Resumen

Si esta hoja de estilos viene de una regla `@import`, la propiedad **ownerRule** contendrá la CSSImportRule.

### Sintaxis
```

rule = stylesheet.ownerRule
```

### Parámetros

* `rule` es una cadena que contiene la regla de importación en el documento HTML o XML.
### Notas

Ten en cuenta que si el valor de la propiedad ownerNode en el elemento STYLE actual es NULL, el valor **ownerRule** devolverá !!TODO!! y viceversa.

### Specification

ownerRule
NodeList.prototype.forEach()
============================

El método **`forEach()`** de la interfase`NodeList` llama a la función callback proporcionada como parámetro una vez para cadapar de valores en la lista, en el orden en que se insertaron.

Syntax
------
```

nodeList.forEach(callback[, thisArg]);
```

### Parámetros

`callback`

Función a ser ejecutada paracada elemento, tomando eventualmente 3 argumentos:

*`currentValue`*

El valor que esta siendo procesado en la lista de nodos.

`currentIndex`

El índice del elemento que esta siendo procesado en la lista de nodos.

*`listObj`*

El objeto NodeList al que se está aplicando el método `forEach()`.


`thisArg` Opcional

Valor a ser usado como `this` al ejecutar `callback`.

### Valor Retornado

`undefined`.

Excepciones
-----------

*Ninguna*.

Ejemplo
-------
```

var nodo = document.createElement("div");
var infante1 = document.createElement("p");
var infante2 = document.createTextNode("hey");
var infante3 = document.createElement("span");

nodo.appendChild(infante1);
nodo.appendChild(infante2);
nodo.appendChild(infante3);

var list = nodo.childNodes;

list.forEach(
  function(currentValue, currentIndex, listObj) {
    console.log(currentValue + ', ' + currentIndex + ', ' + this);
  },
  'miEsteArg'
);
```


resulta en:
```

[object HTMLParagraphElement], 0, miEsteArg
[object Text], 1, miEsteArg
[object HTMLSpanElement], 2, miEsteArg
```

Polyfill
--------

Este polyfill le da compatibilidad a todos los navegadores que soportan ES5:


```js
if (window.NodeList && !NodeList.prototype.forEach) {
  NodeList.prototype.forEach = function (callback, thisArg) {
    thisArg = thisArg || window;
    for (var i = 0; i < this.length; i++) {
      callback.call(thisArg, this[i], i, this);
    }
  };
}
```


ó


```js
if (window.NodeList && !NodeList.prototype.forEach) {
  NodeList.prototype.forEach = Array.prototype.forEach;
}
```


El comportamiento ateriror esta implementado en muchos navegadores. NodeList.prototype.forEach (Chrome, Firefox for example).

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

| Specification |
| --- |
| DOM Standard # interface-nodelist |

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

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

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

* `Node`
* `NodeList`
Window.history
==============

La propiedad de solo lectura **`Window.history`** regresa una referencia al objeto `History`, quien provee una interfaz para manipular el historial de *sesión del navegador* (páginas visitadas en el tab o marco de la pagina actual cargada).

Ver Manipulando el historial del navegador para ejemplos y detalles. En particular, este articulo explica características seguras de los métodos `pushState()` y `replaceState()` que debe tener en cuenta antes de usarlos.

Sintaxis
--------


```js
var historyObj = window.history;
```

Ejemplo
-------


```js
history.back(); // equivalente a hacer clic en el botón de regresar
history.go(-1); // equivalente a history.back();
```

Notas
-----

Para las páginas de nivel superior se puede ver la lista de páginas en el historial de la sesión, accesible a través del objeto de la `History`, en los desplegables de tu navegador junto a los botones de avance y retroceso.

Por razones de seguridad el objeto `History` no permite que el código sin privilegio acceda a las URLs de otras páginas en el historial de la sesión, pero permite navegar por el historial de la sesión.

No hay manera de limpiar el historial de la sesión o desactivar la parte de atrás/adelante desde la navegación de código sin privilegios. La solución más cercana disponible es el método `location.replace()`, que sustituye al elemento actual de la historia sesión con la URL proporcionada.

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

| Specification |
| --- |
| HTML Standard # the-history-interface |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Window: Método confirm()
========================

`window.confirm()` le indica al navegador que muestre una ventana de diálogo con un mensaje opcional, y que espere hasta que el usuario acepte o cancele la ventana de confirmación.

Bajo algunas condiciones por ejemplo, cuando el usuario cambia de pestaña es posible que el navegador no muestre un cuadro de diálogo, ó que no espere a que el usuario confirme o cancele el cuadro de diálogo.

Sintaxis
--------


```js
confirm(message);
```

### Parámetros

`message`

Una cadena de texto que se va a mostrar en la ventana de diálogo de confirmación.

### Valor devuelto

Un valor booleano que indica si seleccionó OK (`true`) o Cancel (`false`). Si un navegador esta ignorando cuadros de diálogo, entonces el valor devuelto siempre será `false`.

Ejemplos
--------


```js
if (window.confirm("Do you really want to leave?")) {
  window.open("exit.html", "Thanks for Visiting!");
}
```


Produce:

![Firefox confirm](/es/docs/Web/API/Window/confirm/firefox_confirm_dialog.png)

Notas
-----

Los cuadros de diálogo son ventanas modales, ellos impiden al usuario acceder al resto de la interfaz del programa hasta que no se cierre. Por esta razón, no debería abusar de ninguna función que cree un cuadro de diálogo (o ventana modal). No obstante, hay buenas razones para evitar el uso de cuadros de diálogo para confirmaciones.

Como alternativa, puede usar el elemento `<dialog>`.

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

| Specification |
| --- |
| HTML Standard # dom-confirm-dev |

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

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

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

* Elemento `<dialog>`
* `window.alert()`
* `window.prompt()`
Window: Propiedad navigation
============================

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

La propiedad de solo lectura `navigation` de la interfaz `Window` devuelve el objeto `Navigation` (en-US) asociada a la ventana actual.

El punto de entrada para el `Navigation API` (en-US).

Valor
-----

Una instancia del objeto `Navigation` (en-US).

Ejemplos
--------


```js
let currentNavEntries = window.navigation.entries();
```

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

| Specification |
| --- |
| HTML Standard # dom-navigation |

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

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

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

* Enrutamiento moderno del lado del cliente: la API de navegación
* Explicación de la API de navegación
* Domenic Denicola's Ejemplo en vivo de la API de navegación
Window.sessionStorage
=====================

La propiedad `sessionStorage` permite acceder a un objeto `Storage` asociado a la sesión actual. La propiedad sessionStorage es similar a `localStorage` (en-US), la única diferencia es que la información almacenada en localStorage no posee tiempo de expiración, por el contrario la información almacenada en sessionStorage es eliminada al finalizar la sesion de la página. La sesión de la página perdura mientras el navegador se encuentra abierto, y se mantiene por sobre las recargas y reaperturas de la página. **Abrir una página en una nueva pestaña o ventana iniciará una nueva sesión**, lo que difiere en la forma en que trabajan las cookies de sesión.

Sintaxis
--------


```js
// Almacena la información en sessionStorage
sessionStorage.setItem("key", "value");

// Obtiene la información almacenada desde sessionStorage
var data = sessionStorage.getItem("key");
```

### Valor

Un objeto de tipo `Storage`.

Ejemplo
-------

El siguiente código accede al objeto `Storage` del la sesión actual del domino y le añade un elemento utilizando `Storage.setItem()`.


```js
sessionStorage.setItem("myCat", "Tom");
```


El siguiente ejemplo graba de forma automática el contenido de un campo de texto, y si el navegador es actualizado accidentalmente, restaura el contenido del campo de texto para no perder lo escrito.


```js
// Obtiene el campo de texto que vamos a moniterear
var field = document.getElementById("field");

// Verificamos si tenemos algún valor auto guardado
// (esto solo ocurrirá si la página es recargada accidentalmente)
if (sessionStorage.getItem("autosave")) {
  // Restaura el contenido al campo de texto
  field.value = sessionStorage.getItem("autosave");
}

// Espera por cambios en el campo de texto
field.addEventListener("change", function () {
  // Almacena el resultado en el objeto de almacenamiento de sesión
  sessionStorage.setItem("autosave", field.value);
});
```


**Nota:** Por favor diríjase al artículo Usando la API de Web Storage para un ejemplo completo.

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

| Specification |
| --- |
| HTML Standard # dom-sessionstorage-dev |

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

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

Vea También
-----------

* Usando la API de Web Storage
* Window.localStorage (en-US)
onpopstate
==========

La propiedad **`onpopstate`** es el `event handler` para procesar eventos `popstate` de la ventana.

Se envía un evento `popstate` a la ventana cada vez que la entrada activa de la historia cambia entre otra otras dos entradas del mismo documento. Si la entrada de la historia fue creada al llamar a `history.pushState()`, o fue afectada por una llamada a `history.replaceState()`, la propiedad `state` del evento `popstate` contendrá una copia del objeto de estado de la entrada de la hisotria.

**Nota:** Llamar a `history.pushState()` o a `history.replaceState()` no dispararán un evento `popstate`. El evento `popstate` solamente se dispará realizando una acción de navegador, tal como pulsar el botón volver (o llamando a `history.back()` en JavaScript), mientras se navega entre dos entradas de la historia de un mismo documento.

Sintaxis
--------


```js
window.onpopstate = funcRef;
```


* `funcRef` es una función manejadora (handler).
El evento popstate
------------------

Por ejemplo, la página en `http://example.com/example.html` ejecutando el código siguiente, generará alertas como se indica.:


```js
window.onpopstate = function (event) {
  alert(
    `location: ${document.location}, state: ${JSON.stringify(event.state)}`,
  );
};

history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null
history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
```


Tenga en cuenta que, a pesar de que la entrada original (para `http://example.com/example.html`) no tiene un objeto de estado asociado, el evento `popstate` se dispara igualemente cuando se activa la entrada después de la segunda llamada a `history.back()`.

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

| Specification |
| --- |
| HTML Standard # event-popstate |
| HTML Standard # handler-window-onpopstate |

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

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

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

* `window.history`
* Manipulando la historia del navegador (en-US)
* Ejemplo de navegación con Ajax (en-US)
window.innerHeight
==================

Propiedad solo lectura del objeto window.

Representa la altura (en pixeles) del viewport

Sintaxis
--------


```js
var alturaDelViewport = window.innerHeight;
```

### Valor

Como retorno, la propiedad innerHeight del objeto window nos retornara un valor de tipo entero, que representara (en pixeles) la altura del viewport.

La propiedad `window.innerHeight` es solo de lectura; Y no tiene un valor por defecto.

Notas
-----

La propiedad innerHeight es soportada por cualquier objeto de ventana. Pudiendo ejectutarse en un conjunto de marcos (<frameset> </frameset>). O en una ventana secundaria.

Es un algoritmo para obtener la altura del viewport, excluyendo si se representa la barra de desplazamiento horizontal

### Ejemplo

### Asumiendo un frameset


```js
var alturaViewport = window.innerHeight;

var alturaViewport = self.innerHeight;
// self es window
```


**otra forma de obtener la altura (aúnque, no del viewport, síno de la ventana), es usando la propiedad outerHeight, del objeto window.**

### Ejemplo (Grafica)

![innerHeight vs outerHeight illustration](/es/docs/Web/API/Window/innerHeight/firefoxinnervsouterheight2.png)

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

| Specification |
| --- |
| CSSOM View Module # dom-window-innerheight |

Tambien me intersa
------------------

* `window.innerWidth` (en-US)
* `window.outerHeight`
* `window.outerWidth`
Window.locationbar
==================

Devuelve el objeto `locationbar`, del cual se puede comprobar su visibilidad.

Sintaxis
--------


```js
objRef = window.locationbar;
```

Ejemplo
-------

El siguiente ejemplo completo en HTML, muestra la forma en la que se utiliza la propiedad `visible` del objeto `locationbar.`


```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Various DOM Tests</title>

    <script>
 var visible = window.locationbar.visible;
 </script>
  </head>
  <body>
    <p>Various DOM Tests</p>
  </body>
</html>
```

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

| Specification |
| --- |
| HTML Standard # dom-window-locationbar-dev |

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

* `window.locationbar`, `window.menubar`, `window.personalbar` (en-US), `window.scrollbars` (en-US), `window.statusbar`, `window.toolbar` (en-US)
window.cancelAnimationFrame()
=============================

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

Resumen
-------

Cancela la petición de animación previamente programada a través de `window.requestAnimationFrame()`.

Sintaxis
--------


```js
window.cancelAnimationFrame(requestID);
```


**Nota:** Antes de Firefox 23, la función es independiente del proveedor con el prefijo `window.mozCancelAnimationFrame()`. Consulte la tabla de compatibilidad, a continuación, para otras implementaciones de navegador.

### Parámetros

`ID de la petición`

El valor del ID regresado por la llamada a `window.requestAnimationFrame()` que solicitó una llamada de vuelta.

Ejemplos
--------


```js
var requestAnimationFrame =
  window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.msRequestAnimationFrame;

var cancelAnimationFrame =
  window.cancelAnimationFrame || window.mozCancelAnimationFrame;

var start = window.mozAnimationStartTime; // Only supported in FF. Other browsers can use something like Date.now().

var myReq;

function step(timestamp) {
  var progress = timestamp - start;
  d.style.left = Math.min(progress / 10, 200) + "px";
  if (progress < 2000) {
    myReq = requestAnimationFrame(step);
  }
}
myReq = requestAnimationFrame(step);

window.cancelAnimationFrame(myReq);
```

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

| Specification |
| --- |
| HTML Standard # animationframeprovider-cancelanimationframe |

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

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

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

* `window.mozAnimationStartTime` (en-US)
* `window.requestAnimationFrame()`
Window.scrollBy()
=================

Resumen
-------

Desplaza el documento el número de pixels proporcionados.

Sintaxis
--------


```js
window.scrollBy(X, Y);
window.scrollBy(opciones);
```

### Parámetros

* `X` es el número de pixels a desplazar horizontalmente.
* `Y` es el número de pixels a desplazar verticalmente.

Si X o Y son positivos, desplazarán la página hacia la derecha o hacia abajo respectivamente. Si son negativos, la desplazarán hacia la izquierda o hacia arriba respectivamente.

- or -

* `opciones` es un objeto con tres posibles propiedades:
    + `top`, que es lo mismo que `Y`
    + `left`, que es lo mismo que `X`
    + `behavior`, que es un string cuyo valor puede ser smooth, instant, or auto. Por defecto el valor es `auto`
Ejemplo
-------


```js
// Desplazarse la longitud de una página
window.scrollBy(0, window.innerHeight);
```


Para hacer scroll hacia arriba:


```js
window.scrollBy(0, -window.innerHeight);
```


Utilizando opciones:


```js
window.scrollBy({
  top: 100,
  left: 100,
  behaviour: "smooth",
});
```

Notas
-----

window.scrollBy (en-US) desplaza el documento una cantidad determinada, mientras que window.scroll (en-US) lo hace hacia una posición absoluta en el documento. Vea también window.scrollByLines (en-US), window.scrollByPages (en-US)

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

| Specification |
| --- |
| CSSOM View Module # dom-window-scrollby |
Window.close()
==============

Resumen
-------

Cierra la ventana actual, o la ventana en la cual fue llamada.

Sintaxis
--------


```js
window.close();
```

Descripción
-----------

Cuando este método es llamado, la ventana referenciada es cerrada.

Este método solo se permite ser llamado por ventanas que fueron abiertas por un script utilizando el método `window.open()`. Si la ventana no fue abierta por un script, el siguiente error aparece en la consola de JavaScript: Scripts may not close windows that were not opened by script.

Ejemplos
--------

### Cerrar una ventana abierta con window.open()

Este es un ejemplo que demuestra como utilizar este método para cerrar una ventana que fue abierta por un script llamando `window.open()`.


```html
<script type="text/javascript">
 //Global var to store a reference to the opened window
 var openedWindow;

 function openWindow() {
 openedWindow = window.open("moreinfo.htm");
 }

 function closeOpenedWindow() {
 openedWindow.close();
 }
</script>
```

### Cerrando la ventana actual

Cuando se llama al método del objeto window close() directamente, en vez de llamar a close() en una instancia de la ventana, el navegador cerrará la ventana que está en primer plano, independientemente si el script fue creado en la ventana o no. (Firefox 35.0.1: los scripts no pueden cerrar ventanas que ellos no han abierto)


```html
<script type="text/javascript">
 function closeCurrentWindow() {
 window.close();
 }
</script>
```

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

| Specification |
| --- |
| HTML Standard # dom-window-close-dev |

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

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

El método **`Window.matchMedia()`** devuelve un nuevo objeto `MediaQueryList` que representa los analizados de la media query indicada.

Sintaxis
--------


```js
mql = window.matchMedia(mediaQueryString);
```


Donde `mediaQueryString` es una cadena de texto que representa la media query de la que devolver un nuevo objeto `MediaQueryList`.

Ejemplo
-------

Este código le permite manejar las cosas de forma diferente cuando la ventana es muy estrecha.


```js
if (window.matchMedia("(min-width: 400px)").matches) {
  /\* La pantalla tiene al menos 400 píxeles de ancho \*/
} else {
  /\* La pantalla tiene menos de 400 píxeles de ancho \*/
}
```


Consulte Probando media queries (en-US) para ver ejemplos adicionales.

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

| Specification |
| --- |
| CSSOM View Module # dom-window-matchmedia |

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

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

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

* Media queries
* Probando media queries
* `MediaQueryList`
* `MediaQueryListListener` (en-US)