recursal/MDN huggingface dataset:
pointerlockchange
=================

El evento `pointerlockchange` es disparado cuando el cursor del navegador es bloqueado o desbloqueado.

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

Specification

Pointer Lock

Interface

Event

Bubbles

Yes

Cancelable

No

Target

Document

Default Action

None

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

Ejemplo
-------


```js
//Ten en cuenta que el nombre del evento, en este caso "pointerlockchange" puede variar según el navegador.
document.addEventListener("pointerlockchange", function (event) {
  // El objetivo, parámetro "target", del objeto "event" es siempre el objeto "document".
  // para recuperar el objeto que recibe el bloqueo/desbloqueo es document.pointerlockElement.
  document.pointerLockElement;
});
```

Eventos relacionados
--------------------

* `pointerlockerror` (en-US)
Véase también
-------------

* Using Pointer Lock API (en-US)
Document.open()
===============

El método **`Document.open()`** abre un documento para escritura (writing)

Esto viene con algunos efectos secundarios. Por ejemplo:

* Todos las atenciones de eventos actualmente registrados en el documento, los nodos dentro del documento o la ventana del documento son eliminados.
* Todos los nodos existentes se eliminan del documento.
Sintaxis
--------


```js
document.open();
```

### Parametros

Ninguno.

### Valor devuelto

Una instancia del objeto Document (`Document)`.

Ejemplos
--------

El código simple a continuación abre el documento y reemplaza su contenido con un número de diferentes fragmentos HTML antes de cerrarlo nuevamente.


```js
document.open();
document.write("<p>Hola mundo!</p>");
document.write("<p>Soy un pez</p>");
document.write("<p>El numero es 42</p>");
document.close();
```

Notas
-----

**Nota:** Traducción pendiente para el texto que sigue

An automatic `document.open()` call happens when `document.write()` is called after the page has loaded.

For years Firefox and Internet Explorer additionally erased all JavaScript variables, etc., in addition to removing all nodes. This is no longer the case.document non-spec'ed parameters to document.open

### Gecko-specific notes

Starting with Gecko 1.9, this method is subject to the same same-origin policy as other properties, and does not work if doing so would change the document's origin.

Starting with Gecko 1.9.2, `document.open()` uses the principal of the document whose URI it uses, instead of fetching the principal off the stack. As a result, you can no longer call `document.write()` into an untrusted document from chrome, even using `wrappedJSObject`. See Security check basics for more about principals.

Three-argument document.open()
------------------------------

There is a lesser-known and little-used three-argument version of `document.open()` , which is an alias of `Window.open()` (see its page for full details).

This call, for example opens github.com in a new window, with its opener set to `null`:


```js
document.open("https://www.github.com", "", "noopener=true");
```

Two-argument document.open()
----------------------------

Browsers used to support a two-argument `document.open()`, with the following signature:


```js
document.open(type, replace);
```


Where `type` specified the MIME type of the data you are writing (e.g. `text/html`) and replace if set (i.e. a string of `"replace"`) specified that the history entry for the new document would replace the current history entry of the document being written to.

This form is now obsolete; it won't throw an error, but instead just forwards to `document.open()` (i.e. is the equivalent of just running it with no arguments). The history-replacement behavior now always happens.

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

| Specification |
| --- |
| HTML Standard # dom-document-open-dev |

Compatibilidad del Navegador
----------------------------

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

See also
--------

* `Document`
* `Window.open()`
document.getElementsByTagName
=============================

### Resumen

Devuelve una lista de elementos con un nombre determinado. Se busca en todo el documento, incluyendo el nodo raíz.

### Sintaxis


```js
elements = document.getElementsByTagName(name);
```


* `elements` es una lista 'viva' (`NodeList`) de los elementos encontrados en el orden en que han aparecido en el árbol.
* `name` es una cadena que representa el nombre de los elementos. La cadena especial "\*" representa a todos los elementos.
### Ejemplo

En el siguiente ejemplo, `getElementsByTagName` empieza por el elemento padre y busca hacia abajo recurrentemente a lo largo de todo el DOM por ese elemento padre, buscando por hijos que cumplan con el criterio: nombre = `name`.

Ten en cuenta que cuando el nodo en el que se invoca `getElementsByTagName`, no es el nodo `document`, en realidad se está usando el método element.getElementsByTagName.


```html
<html>
  <head>
    <title>ejemplo de getElementsByTagName</title>

    <script type="text/javascript">
 function getAllParaElems() {
 var allParas = document.getElementsByTagName("p");

 var num = allParas.length;

 alert("Hay " + num + " <p> elementos en este documento");
 }

 function div1ParaElems() {
 var div1 = document.getElementById("div1");
 var div1Paras = div1.getElementsByTagName("p");

 var num = div1Paras.length;

 alert("Hay " + num + " <p> elementos en el elemento div1");
 }

 function div2ParaElems() {
 var div2 = document.getElementById("div2");
 var div2Paras = div2.getElementsByTagName("p");

 var num = div2Paras.length;

 alert("Hay " + num + " <p> elementos en el elemento div2");
 }
 </script>
  </head>

  <body style="border: solid green 3px">
    <p>Algo de texto</p>
    <p>Algo de texto</p>

    <div id="div1" style="border: solid blue 3px">
      <p>Algo de texto en div1</p>
      <p>Algo de texto en div1</p>
      <p>Algo de texto en div1</p>

      <div id="div2" style="border: solid red 3px">
        <p>Algo de texto en div2</p>
        <p>Algo de texto en div2</p>
      </div>
    </div>

    <p>Algo de texto</p>
    <p>Algo de texto</p>

    <button onclick="getAllParaElems();">
      muestra todos los elementos p en el documento</button
 ><br />

    <button onclick="div1ParaElems();">
      muestra todos los elementos p en div1</button
 ><br />

    <button onclick="div2ParaElems();">
      muestra todos los elementos p en div2
    </button>
  </body>
</html>
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-getelementsbytagname① |

Compatibilidad del Navegador
----------------------------

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

Devuelve el primer elemento del documento (utilizando un recorrido primero en profundidad pre ordenado de los nodos del documento) que coincida con el grupo especificado de selectores.Sintaxis
--------


```js
element = document.querySelector(selectores);
```


Donde:

* `element` es un objeto de tipo element.
* `selectores` es una cadena de caracteres que contiene uno o más selectores CSS (en-US) separados por coma.
Ejemplo
-------

En este ejemplo, obtendremos el primer elemento del documento con la clase "miClase":


```js
var el = document.querySelector(".miClase");
```

Ejemplo más útil
----------------

Los *Selectores* pueden ser muy útiles como se demostrará en el siguiente ejemplo. Aquí, será retornado el primer elemento `<input name="login" />` dentro de `<div class="user-panel main">`.


```js
var el = document.querySelector("div.user-panel.main input[name='login']");
```

Notas
-----

* Devuelve `null` si no se encuentran coincidencias, de lo contrario, retorna el primer elemento encontrado.
* Si el selector coincide con un ID y este ID es usado erróneamente varias veces en el documento, devuelve el primer elemento encontrado.
* Lanza una excepción de tipo SYNTAX\_ERR si el grupo de selectores especificado no es válido.
* querySelector() se introdujo en la API Selectors.
* La cadena de caracteres que se pasa como argumento a `querySelector debe seguir la sintaxis CSS.`
* Las Pseudo-clases CSS nunca devolverán elementos, tal y como está especificado en la `API Selectors`.
* Para que coincidan ID's o selectores que no siguen la sintáxis CSS (usando inapropiadamente dos puntos o un espacio por ejemplo), se debe 'escapar' el carácter con una barra invertida (\). Como la barra invertida es un carácter de 'escape' en JavaScript, si estás indicando una cadena de caracteres literal, debes 'escaparla' dos veces (una para la cadena de caracteres JavaScript y otra para el querySelector):


```html
<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
 console.log("#foo\bar"); // "#fooar"
 document.querySelector("#foo\bar"); // No coincide con nada

 console.log("#foo\\bar"); // "#foo\bar"
 console.log("#foo\\\\bar"); // "#foo\\bar"
 document.querySelector("#foo\\\\bar"); // Coincide con el primer div

 document.querySelector("#foo:bar"); // No coincide con nada
 document.querySelector("#foo\\:bar"); // Coincide con el segundo div
</script>
```

Compatibilidad en los navegadores
---------------------------------

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

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

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

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

* `document.querySelectorAll()`
* `element.querySelector()`
* `element.querySelectorAll()` (en-US)
* Snippets para querySelector
Document.getElementsByClassName()
=================================

Retorna un objecto similar a un array de los elementos hijos que tengan todos los nombres de clase indicados. Cuando es llamado sobre el objeto document , la busqueda se realiza en todo el document, incluido el nodo raíz. También puedes llamar `getElementsByClassName()` sobre cualquier elemento; en ese caso retornara sólo los elementos hijos del elemento raíz indicado que contengan los nombres de clase indicados.

Sintaxis
--------


```js
var elementos = document.getElementsByClassName(nombres); // ó :
var elementos = elementoRaiz.getElementsByClassName(nombres);
```


* *elementos es una* `HTMLCollection` de los elementos encontrados.
* *nombres es un string que representa la lista de nombres de clase a buscar; los nombres de clase se separan con un espacio.*
* getElementsByClassName se puede llamar sobre cualquier elemento, no solo sobre document. El elemento sobre el que se llama será usado como la raíz de la busqueda.
Ejemplos
--------

Obtener todos los elementos de la clase 'prueba'


```js
document.getElementsByClassName("prueba");
```


Obtener todos los elementos que tengan al mismo tiempo las clases 'rojo' y 'prueba'


```js
document.getElementsByClassName("rojo prueba");
```


Obtener todos los elementos que tengan la clase 'prueba' y que estén dentro de un elemento de ID 'principal'


```js
document.getElementById("principal").getElementsByClassName("prueba");
```


También podemos usar los metodos de Array.prototype en cualquier `HTMLCollection` pasando el *HTMLCollection* como el valor *this* del método. Aquí buscaremos todos los elementos div de la clase 'test':


```js
var testElements = document.getElementsByClassName("test");
var testDivs = Array.prototype.filter.call(
  testElements,
  function (testElement) {
    return testElement.nodeName === "DIV";
  },
);
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-getelementsbyclassname① |

Compatibilidad del Navegador
----------------------------

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

Crea un nuevo evento, que debe ser inicializado llamando a su método `init()`.

### Sintaxis


```js
document.createEvent(tipo);
```


`tipo`

Una string indicando el tipo de evento a crear.

Este método devuelve un nuevo objeto `Event` del DOM del tipo indicado, que debe ser inicializado antes de su uso.

### Ejemplo


```js
var nuevoEvento = document.createEvent("UIEvents");
```

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

| Specification |
| --- |
| DOM Standard # dom-document-createevent |

Compatibilidad del Navegador
----------------------------

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

El **`Document.hidden`** Es una propiedad solo de lectura, retorna un valor Booleano que indica si la pagina esta conciderada oculta o no.

Sintaxis
--------


```js
var boolean = document.hidden;
```

Ejemplo
-------


```js
document.addEventListener("visibilitychange", function () {
  console.log(document.hidden);
  // Modify behavior...
});
```

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

| Specification |
| --- |
| HTML Standard # dom-document-hidden |

Compatibilidad del Navegador
----------------------------

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

Resumen
-------

La propiedad **Document.readyState** de un `document` describe el estado de carga del documento.

### Valores

El readyState de un documento puede tener uno de los siguientes valores:

loading

El `document` todavía esta cargando.

interactive

El documento ha terminado de cargar y ha sido analizado pero los sub-recursos como imágenes, estilos y frames aún siguen cargando. El estado indica que el evento `DOMContentLoaded` (en-US) ha sido disparado.

complete

El documento y todos los sub-recursos han cargado completamente. El estado indica que el evento `load` ha sido disparado.

Cuando el valor de esta propiedad cambia, un evento `readystatechange` (en-US) se dispara en el objecto `document`.

Sintaxis
--------


```js
var string = document.readyState;
```

Ejemplos
--------

### Diferentes estados del readyState


```js
switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log(
      "The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText,
    );
    break;
}
```

### readystatechange como alternativa al evento DOMContentLoaded


```js
// alternative to DOMContentLoaded event
document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
};
```

### readystatechange como alternativa al evento load


```js
// alternative to load event
document.onreadystatechange = function () {
  if (document.readyState == "complete") {
    initApplication();
  }
};
```

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

| Specification |
| --- |
| HTML Standard # current-document-readiness |

Compatibilidad del Navegador
----------------------------

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

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

* Evento `readystatechange` (en-US)
* Evento `DOMContentLoaded` (en-US)
* Evento `load`
document.URL
============

La propiedad de sólo lectura **`URL`** de la interfaz `Document` devuelve la ubicación del documento como una cadena de texto.

Sintaxis
--------


```js
var string = document.URL;
```

Ejemplo
-------

### JavaScript


```js
document.getElementById("url").textContent = document.URL;
```

### HTML


```html
<p id="urlText">
  URL:<br />
  <span id="url">La URL va aquí</span>
</p>
```

### Resultado

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-url① |

Compatibilidad del Navegador
----------------------------

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

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

* `HTMLDocument` (en-US)
document.anchors
================

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

La propiedad de solo lectura **`anchors`** de la interfaz `Document` devuelve una lista de todas las anclas (anchors) del documento.Sintaxis
--------


```js
nodeList = document.anchors;
```

### Valor

Una `HTMLCollection`.

Ejemplo
-------


```js
if (document.anchors.length >= 5) {
  dump("dump found too many anchors");
  window.location = "http://www.google.com";
}
```


Lo siguiente es un ejemplo que puebla una Tabla de Contenido con cada ancla en la página:


```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <script>
 function init() {
 var toc = document.getElementById("toc");
 var i, li, newAnchor;
 for (i = 0; i < document.anchors.length; i++) {
 li = document.createElement("li");
 newAnchor = document.createElement("a");
 newAnchor.href = "#" + document.anchors[i].name;
 newAnchor.innerHTML = document.anchors[i].text;
 li.appendChild(newAnchor);
 toc.appendChild(li);
 }
 }
 </script>
  </head>
  <body onload="init()">
    <h1>Title</h1>
    <h2><a name="contents">Contents</a></h2>
    <ul id="toc"></ul>

    <h2><a name="plants">Plants</a></h2>
    <ol>
      <li>Apples</li>
      <li>Oranges</li>
      <li>Pears</li>
    </ol>

    <h2><a name="veggies">Veggies</a></h2>
    <ol>
      <li>Carrots</li>
      <li>Celery</li>
      <li>Beats</li>
    </ol>
  </body>
</html>
```


Ver en JSFiddle

Notas
-----

Por razones de retrocompatibilidad, el conjunto de anclas devuelto sólo contiene aquellas anclas creadas con el atribuo `name`, y no aquellas creadas con el atributo `id`.

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

| Specification |
| --- |
| HTML Standard # dom-document-anchors |

Compatibilidad del Navegador
----------------------------

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

El método `document.close()` finaliza la escritura de un documento abierta con document.open().

Sintaxis
--------


```js
document.close();
```

Ejemplo
-------


```js
// Abrir un documento.
// Escribir contenido en el documento.
// Cerrar el documento.
document.open();
document.write("<p>El único contenido.</p>");
document.close();
```

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

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

Compatibilidad del Navegador
----------------------------

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

### Resumen

Devuelve el `Element` que es el elemento raíz de document (por ejemplo, devuelve el elemento `<html>` en los documentos HTML).

### Sintaxis


```js
varelement = document.documentElement;
```

### Ejemplo


```js
var rootElement = document.documentElement;
var firstTier = rootElement.childNodes;
// firstTier el la NodeList de los hijos directos del elemento raízof the direct children of the root element
for (var i = 0; i < firstTier.length; i++) {
  // hacer algo con cada uno de los hijos directos del elemento raíz
  // como firstTier[i]
}
```

### Notas

Esta propiedad es de sólo-lectura, facilitada para obtener el elemento raíz de cualquier documento.

Los documentos HTML contienen normalmente un único hijo directo, `<html>`, quizá con una declaración DOCTYPE antes que él. Los documento XML contienen a menudo, múltiples hijos: el elemento raíz, la declaración DOCTYPE y processing instructions.

Por tanto, deberías usar `document.documentElement` en lugar de `document.firstChild` para obtener el elemento raíz.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-documentelement① |

Compatibilidad del Navegador
----------------------------

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

### Resumen

Devuelve el nodo del `<body>` o el nodo del `<frameset>` del documento.

### Sintaxis


```js
objRef = document.body;
document.body = objRef;
```

### Ejemplo


```js
// en HTML: <body id="oldBodyElement"></body>
alert(document.body.id); // "oldBodyElement"
var aNewBodyElement = document.createElement("body");
aNewBodyElement.id = "newBodyElement";
document.body = aNewBodyElement;
alert(document.body.id); // "newBodyElement"
```

### Notas

`document.body` es el elemento que contiene el contenido para el documento. En documentos con contenidos `<body>`, devuelven el elemento `<body>`, y en documentos de marco de sistema, esto devuelve el elemento extremo `<frameset>`.

Aunque `body` es programable, colocando un nuevo cuerpo en un documento efectivamente quitará a todos los hijos actuales del elemento existente `<body>`.

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

| Specification |
| --- |
| HTML Standard # dom-document-body-dev |

Compatibilidad del Navegador
----------------------------

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

El método **`exitFullscreen()`** de `Document` solicita que el elemento de este documento que se presenta actualmente en modo de pantalla completa se retire del modo de pantalla completa, restaurando el estado anterior de la pantalla. Esto generalmente revierte los efectos de una llamada previa a `Element.requestFullscreen()`.

La excepción es si otro elemento ya estaba en modo de pantalla completa cuando el elemento actual se colocó en modo de pantalla completa usando `requestFullscreen()`. En ese caso, el elemento de pantalla completa anterior se restaura al estado de pantalla completa. En esencia, se mantiene un stack de elementos de pantalla completa.

Sintaxis
--------


```js
exitPromise = document.exitFullscreen();
```

### Parámetros

Ninguno.

### Valor de retorno

Un `Promise` que se resuelve una vez que el user agent (en-US) a terminado de salir del modo de pantalla completa. Si se produce un error al intentar salir del modo de pantalla completa, se llama al controlador `catch()` para la promesa.

Ejemplo
-------

Este ejemplo hace que el documento actual entre y salga de una presentación a pantalla completa cada vez que se hace clic dentro del botón del mouse.


```js
document.onclick = function (event) {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    document.documentElement.requestFullscreen();
  }
};
```


**Nota:** Para un ejemplo más completo, vea Example.

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

| Specification |
| --- |
| Fullscreen API Standard # ref-for-dom-document-exitfullscreen① |

Compatibilidad del Navegador
----------------------------

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

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

* Fullscreen API
* Guide to the Fullscreen API (en-US)
* `Element.requestFullscreen()`
* `Document.fullscreenElement` (en-US)
* `:fullscreen` and `::backdrop`
* The `<iframe>` `allowfullscreen` attribute