recursal/MDN huggingface dataset:
Document.doctype
================

Devuelve la Declaración de tipo de documento (Document Type Declaration (DTD)), asociada al documento actual. El objeto devuelto implementa la interfaz `DocumentType` (en-US). Utilice `DOMImplementation.createDocumentType()` (en-US) para crear un `DocumentType`.

Sintaxis
--------


```js
doctype = document.doctype;
```


* `doctype` es una propiedad de sólo lectura.
Ejemplo
-------


```js
var doctypeObj = document.doctype;

console.log(
  "doctypeObj.name: " +
    doctypeObj.name +
    "\n" +
    "doctypeObj.internalSubset: " +
    doctypeObj.internalSubset +
    "\n" +
    "doctypeObj.publicId: " +
    doctypeObj.publicId +
    "\n" +
    "doctypeObj.systemId: " +
    doctypeObj.systemId,
);
```

Notas
-----

La propiedad devuelve `null` si no hay DTD asociada al documento actual.

El nivel 2 de DOM no soporta la edición de la declaración de tipo de documento.

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

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

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

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

Crea una copia de un nodo desde un documento externo para ser insertado en el documento actual.

Sintaxis
--------


```js
var node = document.importNode(externalNode, deep);
```


`node`

El nuevo nodo importado al documento actual. El `parentNode` (en-US) del nuevo nodo es `null`, ya que aun no ha sido insertado en el arbol del documento.

`externalNode`

El nodo externo a ser importado

`deep`

Un booleano que indica si los descendientes del nodo deben ser importados también.


**Nota:** En la especificación DOM4 (tal y como se ha implementado en Gecko 13.0 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10)), `deep` es un argumento opcional. En el caso de ser omitido, adopta el valor de **`true`**, por lo que se hace una *deep copy* por defecto. Para realizar una copia superficial (*shallow copy*), *deep* debe ser **`false`**.

Este comportamiento ha cambiado en la ultima especificación, por lo que si se omite el parámetro *deep,* éste adopta el valor **`false`**. Aunque aún es opcional, debería ser siempre provisto por razones de compatibilidad. Con Gecko 28.0 (Firefox 28 / Thunderbird 28 / SeaMonkey 2.25 / Firefox OS 1.3), la consola advertia a los desarrolladores de no omitir el argumento. Empezando con Gecko 29.0 (Firefox 29 / Thunderbird 29 / SeaMonkey 2.26)), se realiza una copia superficial (*shallow copy*) por defecto.

Ejemplo
-------


```js
var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentWindow.document.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
```

Notas
-----

El nodo original no se borra del documento. El nodo importado es un clon del original.

Nodes from external documents should be cloned using `document.importNode()` (or adopted using `document.adoptNode()`) before they can be inserted into the current document. For more on the `Node.ownerDocument` issues, see the W3C DOM FAQ.

Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.

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

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

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

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

See also
--------

* `document.adoptNode()`
Document.contentType
====================

Devuelve el tipo MIME con el que el documento está siendo renderizado. Puede obtenerlo a partir de los encabezados HTTP (Headers) o de otras fuentes de información MIME, y puede ser afectado por conversiones automáticas inferidas tanto por el navegador como por cualquiera de sus extensiones.

Sintáxis
--------


```js
contentType = document.contentType;
```


`contentType` es una propiedad de sólo lectura.

Notas
-----

Esta propiedad no es afectada por los tags meta.

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

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

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

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

**`Document.adoptNode()`** transfiere un node desde otro document al documento del método. El nodo adoptado y sus subnodos se eliminan del documento original (si lo hubiera), encuentra y su `ownerDocument` se cambia por el documento actual. El nodo puede entoces ser insertado en el documento actual.

Sintaxis
--------


```js
node = document.adoptNode(externalNode);
```


`node`

El nodo adoptado que ahora tiene este documento como su `ownerDocument`. El `parentNode` del nodo es `null`, esto se debe a que aún no a sido insertado en el árbol del documento. Tenga en cuenta que `node` y `externalNode` son el mismo objeto después de esta llamada.

`externalNode`

El nodo a ser adoptado desde otro documento.

Ejemplo
-------


```js
var iframe = document.querySelector("iframe");
var iframeImages = iframe.contentDocument.querySelectorAll("img");
var newParent = document.getElementById("images");

iframeImages.forEach(function (imgEl) {
  newParent.appendChild(document.adoptNode(imgEl));
});
```

Notas
-----

Los nodos de documentos externos deberían ser clonados utilizando `document.importNode()` (o adoptado utilizando `document.adoptNode()`) antes de que puedan ser insertados en el documento actual. Para más incidencias sobre `Node.ownerDocument`, vea el W3C DOM FAQ.

Firefox actualmente no obliga a cumplir esta regla (lo hizo un tiempo durante el desarrollo de Firefox 3, pero muchos sitios se rompían cuando esta regla era obligatoria). Animamos a los desarrolladores web a que corrijan su código para seguir esta regla con el fin de mejorar la compatibilidad futura.

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

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

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

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

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

* `document.importNode`
Document.dir
============

La propiedad **`Document.dir`** es una `DOMString` que representa la dirección del texto del documento, ya sea de izquierda a derecha o de derecha a izquierda, siendo la primera el valor por defecto. Sus valores posibles son *rtl* (Right To Left) o *ltr* (Left To Right).

Sintáxis
--------


```js
dirStr = document.dir;
document.dir = dirStr;
```

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

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

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

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

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

* http://msdn.microsoft.com/en-us/library/ms533731.aspx
Document.createTextNode()
=========================

Crea un nuevo nodo de texto. Este método puede ser usado para escapar caracteres HTML.

Sintaxis
--------


```js
var text = document.createTextNode(data);
```


* *text* es un nodo Text.
* *data* es una cadena de texto string que contiene los datos a poner en el nodo de texto.
Ejemplo
-------


```html
<!doctype html>
<html lang="en">
  <head>
    <title>createTextNode example</title>
    <script>
 function addTextNode(text) {
 var newtext = document.createTextNode(text),
 p1 = document.getElementById("p1");

 p1.appendChild(newtext);
 }
 </script>
  </head>

  <body>
    <button onclick="addTextNode('YES! ');">YES!</button>
    <button onclick="addTextNode('NO! ');">NO!</button>
    <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>

    <hr />

    <p id="p1">First line of paragraph.</p>
  </body>
</html>
```

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

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

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

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

### Resumen

El atributo `hasFocus` devuelve `true` si el foco está en en algún sitio del documento activo. Este atributo es parte de la especificación HTML 5 actualmente en desarrollo.

### Sintaxis


```js
focused = element.hasFocus;
```

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

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

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

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

Crea un nuevo `DocumentFragment` (en-US) vacio, dentro del cual un nodo del DOM puede ser adicionado para construir un nuevo arbol DOM fuera de pantalla.

Sintaxis
--------


```js
var fragment = document.createDocumentFragment();
```


Se crea un objeto DocumentFragment (en-US) vacio, el cual queda listo para que pueda insertarseles nodos en el.

Notas de uso
------------

`DocumentFragment` (en-US) son Nodos del DOM que nunca forman parte del arbol DOM. El caso de uso mas comun es crear un *document fragment*, agregar elementos al *document fragment* y luego agregar dicho *document fragment* al arbol del DOM. En el arbol del DOM, el *document fragment* es remplazado por todos sus hijos.

Dado que el *document fragment* es generado en memoria y no como parte del arbol del DOM, agregar elementos al mismo no causan reflow (computo de la posicion y geometria de los elementos) en la pagina. Como consecuencia, usar *document fragments* usualmente resultan en mejor performance.

Tambien puede utilizarse el constructor `documentFragment` para crear un nuevo fragmento:


```js
let fragment = new DocumentFragment();
```

Ejemplo
-------

Este ejemplo crea una lista de los principales navegadores web en un *DocumentFragment*, y luego adiciona el nuevo subarbol DOM al document para ser mostrado.

HTML


```html
<ul id="ul"></ul>
```


JavaScript


```js
var element = document.getElementById("ul"); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ["Firefox", "Chrome", "Opera", "Safari", "Internet Explorer"];

browsers.forEach(function (browser) {
  var li = document.createElement("li");
  li.textContent = browser;
  fragment.appendChild(li);
});

element.appendChild(fragment);
```


Resultado

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

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

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

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

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

* `document.implementation.createDocument()` (en-US)
* `documentFragment`
document.characterSet
=====================

### Resumen

Devuelve la codificación de caracteres (conjunto de caracteres) usado en el documento.

### Sintaxis


```js
string = document.characterSet;
```

### Ejemplo


```html
<button onclick="alert(document.characterSet);">
  Mostrar conjunto de caracteres
</button>

<!-- devuelve el conjunto de caracteres del documento, por ejemplo "ISO-8859-1 o UTF-8" -->
```

### Notas

La codificación de caracteres es el conjunto de caracteres usados para interpretar el documento, el cual puede ser diferente a la codificación especificada por la página (el usuario puede omitir la codificación).

Para una lista completa de juegos/conjuntos de caracteres, visite: http://www.iana.org/assignments/character-sets.

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

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

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

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

Resumen
-------

En los navegadores devuelve el objeto window asociado con el `document` o `null` si no está disponible.

Sintaxis
--------


```js
var win = document.defaultView;
```


Esta propiedad es de solo lectura.

Notas
-----

De acuerco con quirksmode, `defaultView` no está soportado en IE hasta su version 9.

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

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

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

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

El evento **`scroll`** se produce cuando la vista del documento o un elemento es deslizado.

Información General
-------------------

Interfaz

UIEvent

Bubbles

No en elementos, pero burbujea a la vista default cuando se ejecuta en el documento

Cancelable

No

Objetivo

defaultView, Document, Element

Acción por defecto

Ninguna

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

| Property | Type | Description |
| --- | --- | --- |
| `target` Read only  | `EventTarget` | El objetivo de evento (el objetivo superior en el árbol DOM). |
| `type` Read only  | `DOMString` | El tipo de evento. |
| `bubbles` Read only  | `Boolean` (en-US) | Si el evento burbujea o no. |
| `cancelable` Read only  | `Boolean` (en-US) | Si el evento puede ser cancelado o no. |
| `view` Read only  | `WindowProxy` | `document.defaultView` (`window` de el documento) |
| `detail` Read only  | `long` (`float`) | 0. |

Ejemplo
-------

Dado que los eventos `scroll` pueden ejecutarse a un ritmo elevado, el *event handler* no debería ejecutar operaciones computacionalmente costosas como modificaciones en el DOM. En cambio, se recomienda acelerar el evento utilizando requestAnimationFrame, setTimeout or customEvent, de este modo:

#### Optimización de Scroll con window.requestAnimationFrame


```js
// Referencia: http://www.html5rocks.com/en/tutorials/speed/animations/

var last_known_scroll_position = 0;
var ticking = false;

function doSomething(scroll\_pos) {
  // Hacer algo con la posición del scroll
}

window.addEventListener("scroll", function (e) {
  last_known_scroll_position = window.scrollY;
  if (!ticking) {
    window.requestAnimationFrame(function () {
      doSomething(last_known_scroll_position);
      ticking = false;
    });
  }
  ticking = true;
});
```


Más ejemplos se pueden ver en el evento resize (en-US).

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

| Specification |
| --- |
| CSSOM View Module # eventdef-document-scroll |
| HTML Standard # handler-onscroll |

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

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

### Resumen

Devuelve una lista de objetos de tipo stylesheet para las hojas de estilo que están específicamente enlazadas o contenidas en el documento.

### Propiedades

`styleSheetList.length` - devuelve el número de objetos de tipo stylesheet contenidos en el objeto.

### Sintaxis


```js
styleSheetList = document.styleSheets;
```


El objeto devuelto es del tipo StyleSheetList.

Es una colección ordenada de objetos de tipo stylesheet. `styleSheetList.item(index)` o simplemente `styleSheetList[ index ]` devuelve un único objeto de tipo stylesheet con el índice especificado (el índice es de origen 0).

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-documentorshadowroot-stylesheets |

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

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

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

La propiedad **`supportedContentEncodings`** de solo lectura (read-only) de la interfaz `PushManager` devuelve un array de los codigos de contenido que puede soportar y que pueden ser usados para encriptar los datos (payload) de un push-message.

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

var encodings[] = PushManager.supportedContentEncodings
```

### Valor

Un *array* de *Strings*

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

| Specification |
| --- |
| Push API # dom-pushmanager-supportedcontentencodings |

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

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

La propiedad de **`RTCPeerConnection`** de solo lectura **`canTrickleIceCandidates`** devuelve un valor booleano que indica si el par remoto puede aceptar o no candidatos *Trickled ICE*.

**ICE trickling** (establecimiento de conectividad interactiva) es el proceso de continuar enviando candidatos después de que la oferta inicial o la respuesta ya se hayan enviado al otro par.

 Esta propiedad solo se establece después de haber llamado a `RTCPeerConnection.setRemoteDescription()` (en-US). Idealmente, su protocolo de señalización proporciona una forma de detectar el soporte de interactividad, por lo que no necesitara esta propiedad. Un navegador WebRTC siempre admitirá *ICE trickling*.
 Si no es compatible, o no puede saberlo, puede buscar un valor falso para esta propiedad y luego esperar hasta que cambie el valor de `iceGatheringState` (en-US) a `"completed"` antes de crear y enviar la oferta inicial. De esa forma, la oferta contiene todos los candidatos.

Valor
-----

Un valor booleano que es `true` si el par remoto puede aceptar candidatos *trickled ICE* y `false` si no puede. Si no se ha establecido un par remoto, este valor es `null`.

**Nota:** El valor de esta propiedad se determina una vez que el par local ha llamado a `RTCPeerConnection.setRemoteDescription()` (en-US); el agente ICE utiliza la descripción proporcionada para determinar si el par remoto admite o no candidatos *trickled ICE*.

Ejemplos
--------


```js
const pc = new RTCPeerConnection();

function waitToCompleteIceGathering(pc) {
  return new Promise((resolve) => {
    pc.addEventListener(
      "icegatheringstatechange",
      (e) =>
        e.target.iceGatheringState === "complete" &&
        resolve(pc.localDescription),
    );
  });
}

// El siguiente código podría usarse para manejar una oferta de un par
// cuando no se sabe si es compatible con trickle ICE.
async function newPeer(remoteOffer) {
  await pc.setRemoteDescription(remoteOffer);
  const offer = await pc.createOffer();
  await pc.setLocalDescription(offer);
  if (pc.canTrickleIceCandidates) return pc.localDescription;
  const answer = await waitToCompleteIceGathering(pc);
  sendAnswerToPeer(answer); //Para mirar a través del canal de señalización
}
// Manejar el error con try/catch

pc.addEventListener(
  "icecandidate",
  (e) => pc.canTrickleIceCandidates && sendCandidateToPeer(e.candidate),
);
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-cantrickleicecandidates |

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

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

Véase tambień
-------------

* WebRTC
* `RTCPeerConnection.addIceCandidate()` (en-US)
* Vida útil de una sesión de WebRTC
BaseAudioContext.createBiquadFilter()
=====================================

El metodo `createBiquadFilter()` de la interfaz `BaseAudioContext` crea un `BiquadFilterNode` (en-US), el cual representa un filtro de segundo orden configurable, asi como varios tipos de filtros comunes diferentes.

Sintaxis
--------


```js
var audioCtx = new AudioContext();
var biquadFilter = audioCtx.createBiquadFilter();
```

### Retorna

Un `BiquadFilterNode` (en-US).

Ejemplo
-------

El siguiente ejemplo muestra el uso básico de un AudioContext para crear un nodo de filtro Biquad. Para ver el ejemplo trabanjando completamente, mire nuestra demostración voice-change-o-matic (mirar tambien source code).


```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// Configurar los diferentes nodos de audio que usaremos para la aplicación.
var analyser = audioCtx.createAnalyser();
var distortion = audioCtx.createWaveShaper();
var gainNode = audioCtx.createGain();
var biquadFilter = audioCtx.createBiquadFilter();
var convolver = audioCtx.createConvolver();

// conectar los nodos juntos

source = audioCtx.createMediaStreamSource(stream);
source.connect(analyser);
analyser.connect(distortion);
distortion.connect(biquadFilter);
biquadFilter.connect(convolver);
convolver.connect(gainNode);
gainNode.connect(audioCtx.destination);

// Manipule el filtro Biquad

biquadFilter.type = "lowshelf";
biquadFilter.frequency.value = 1000;
biquadFilter.gain.value = 25;
```

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

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createbiquadfilter |

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

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

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

* Using the Web Audio API (en-US)
Tutorial Canvas
===============

**`<canvas>`** es un elemento HTML el cual puede ser usado para dibujar gráficos usando scripts (normalmente JavaScript). Este puede, por ejemplo, ser usado para dibujar gráficos, realizar composición de fotos o simples (y no tan simples) animaciones.

`<canvas>` fue introducido primero por Apple para el Mac OS X Dashboard y después implementado en Safari y Google Chrome. Navegadores basados en Gecko 1.8, tal como Firefox 1.5, que también soportan este elemento. El `<canvas>` es un elemento parte de las especificaciones de la WhatWG Web applications 1.0 mejor conocida como HTML5.

En este tutorial se describe cómo usar el elemento `<canvas>` para dibujar gráficos en 2D, empezando con lo básico. Los ejemplos le proveerán mayor claridad a las ideas que pueda tener referentes al canvas, así como los códigos que necesita para crear su propio contenido.

Antes de Empezar
----------------

Usar el elemento `<canvas>` no es algo muy díficil pero necesita saber y entender los aspectos básicos del HTML y JavaScript. El elemento `<canvas>` no está soportado en navegadores viejos, pero están soportado en la mayoría de las versiones más recientes de los navegadores. El tamaño por defecto del canvas es 300px \* 150px [ancho (width) \* alto (height)]. Pero se puede personalizar el tamaño usando las propiedades height y width de CSS. Con el fin de dibujar gráficos en el lienzo <canvas> se utiliza un objeto de contexto de JavaScript que crea gráficos sobre la marcha.

En este Tutorial
----------------

* Usos Básicos
* Dibujando Formas (en-US)
* Usando Imágenes (en-US)
* Aplicando estilos y colores (en-US)
* Transformaciones (en-US)
* Composiciones (en-US)
* Animaciones Básicas
* Optimización de Canvas
Vea también
-----------

* Canvas topic page
* Drawing Graphics with Canvas (en-US)
* Canvas examples
* HTML5 Tutorial
* Drawing Text Using a Canvas
* Adding Text to Canvas
* Canvas Demos - Games, applications, tools and tutorials
* Canvas Drawing and Animation Application
* Interactive canvas tutorial
* Canvas Cheat Sheet with all attributes and methods
* Adobe Illustrator to Canvas plug-in
* HTML5CanvasTutorials
* How to draw N grade Bézier curves with the Canvas API
* 31 days of canvas tutorials
* W3C Standard
* HTML5 Canvas tutorials and reference
* JavaScript Canvas Image Conversion
Nota a los contribuyentes
-------------------------

Debido a un desafortunado error técnico que ocurrió el 17 de junio del 2013, perdimos la historia de este tutorial, incluyendo atribuciones a todos los contribuyentes del pasado a su contenido. Pedimos disculpas por esto, y esperamos que perdone este desafortunado percance.

* Siguiente »