Document

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La interfaz Document representa cualquier página web cargada en el navegador y sirve como punto de entrada al contenido de la página web, que es el árbol DOM (Document Object Model).

El árbol DOM incluye elementos como <body> y <table>, entre muchos otros. Proporciona funcionalidad globalmente al documento, como obtener la URL de la página y crear nuevos elementos en el documento.

La interfaz Document describe las propiedades y métodos comunes para cualquier tipo de documento. Según el tipo de documento (p. ej., HTML, XML, SVG, etc.), hay disponible una API más grande: los documentos HTML, servidos con el tipo de contenido "text/html", también implementan la interfaz HTMLDocument , mientras que los documentos XML y SVG implementan la interfaz XMLDocument.

Constructor

Document(): Crea un nuevo objeto Document.

Propiedades

Esta interfaz también hereda de las interfaces Node y EventTarget.

Document.activeElement Read only: Devuelve el Element actualmente activo.
Document.body: Devuelve el nodo <body> o <frameset> del documento actual.
Document.characterSetRead only: Devuelve el conjunto de caracteres que utiliza el documento.
Document.childElementCount Read only: Devuelve el número de elementos hijos del documento actual.
Document.children Read only: Devuelve los elementos hijos del documento actual.
Document.compatMode Experimental Read only: Indica si el documento se representa en modo quirks o strict.
Document.contentType Experimental Read only: Devuelve el tipo de contenido del encabezado MIME del documento actual.
Document.currentScriptRead only: Devuelve el elemento <script> cuyo script se está procesando actualmente y no es un módulo de JavaScript.
Document.doctypeRead only: Devuelve la Definición de Tipo de Documento (DTD) del documento actual.
Document.documentElementRead only: Devuelve el Element que es un hijo directo del documento. Para documentos HTML, normalmente es el objeto HTMLHtmlElement que representa el elemento <html> del documento.
Document.documentURIRead only: Devuelve la ubicación del documento como una cadena.
Document.embedsRead only: Devuelve un HTMLCollection de los elementos <embed> incrustados en el documento.
Document.firstElementChild Read only: Devuelve el primer elemento hijo del documento actual.
Document.fonts: Devuelve la interfaz FontFaceSet del documento actual.
Document.formsRead only: Devuelve un HTMLCollection de los elementos <form> del documento.
Document.fullscreenElement Read only: El elemento que está actualmente en modo de pantalla completa para este documento.
Document.headRead only: Devuelve el elemento <head> del documento actual.
Document.hiddenRead only: Devuelve un valor booleano que indica si la página se considera oculta o no.
Document.imagesRead only: Devuelve un HTMLCollection de las imágenes del documento.
Document.implementationRead only: Devuelve la implementación DOM asociada con el documento actual.
Document.lastElementChild Read only: Devuelve el último elemento hijo del documento actual.
Document.linksRead only: Devuelve un HTMLCollection de los hipervínculos del documento.
Document.mozSyntheticDocument No estándar: Devuelve true solo si este documento es sintético, como una imagen independiente, video, archivo de audio o similar.
Document.pictureInPictureElement Read only: Devuelve el Element que se presenta actualmente en modo picture-in-picture en este documento.
Document.pictureInPictureEnabled Read only: Devuelve true si la función picture-in-picture está habilitada.
Document.pluginsRead only: Devuelve un HTMLCollection de los complementos disponibles.
Document.pointerLockElement Read only: Devuelve el conjunto de elementos como destino para los eventos del mouse mientras el puntero está bloqueado. null si el bloqueo está pendiente, el puntero está desbloqueado o si el objetivo está en otro documento.
Document.featurePolicy Experimental Read only: Devuelve la interfaz FeaturePolicy que proporciona una API simple para analizar las políticas de funciones aplicadas a un documento específico.
Document.scriptsRead only: Devuelve un HTMLCollection de los elementos <script> del documento.
Document.scrollingElementRead only: Devuelve una referencia al Element que desplaza el documento.
Document.styleSheets Read only: Devuelve un objeto StyleSheetList de CSSStyleSheet para hojas de estilo explícitamente vinculadas o incrustadas en un documento.
Document.timeline Experimental Read only: Devuelve la línea de tiempo como una instancia especial de DocumentTimeline que se crea automáticamente al cargar la página.
Document.visibilityStateRead only: Devuelve un string que indica el estado de visibilidad del documento. Los valores posibles son visible, hidden, prerender y unloaded.

Extensiones para HTMLDocument

La interfaz Document para documentos HTML hereda de la interfaz HTMLDocument o, desde HTML5, se amplía para dichos documentos.

Document.cookie: Devuelve una lista separada por punto y coma de las cookies para ese documento o establece una sola cookie.
Document.defaultViewRead only: Devuelve una referencia al objeto de la ventana.
Document.designMode: Establece u obtiene la capacidad de editar todo el documento.
Document.dir: Establece u obtiene la direccionalidad (rtl/ltr) del documento.
Document.domain Obsoleto: Establece u obtiene el dominio del documento actual.
Document.lastModifiedRead only: Devuelve la fecha en la que se modificó por última vez el documento.
Document.locationRead only: Devuelve la URI del documento actual.
Document.readyStateRead only: Devuelve el estado de carga del documento.
Document.referrerRead only: Devuelve el URI de la página que se vinculó a esta página.
Document.title: Establece u obtiene el título del documento actual.
Document.URLRead only: Devuelve la ubicación del documento como una cadena.

Manejadores de eventos

La interfaz Document se amplía con manejadores de eventos adicionales definidos en GlobalEventHandlers.

Document.onafterscriptexecute No estándar: Representa el código del manejador de eventos para el evento afterscriptexecute.
Document.onbeforescriptexecute No estándar: Representa el código del manejador de eventos para el evento beforescriptexecute.
Document.onreadystatechange: Representa el código del manejador de eventos para el evento readystatechange.
GlobalEventHandlers.onselectionchange Experimental: Es un manejador de eventos que representa el código que se llamará cuando se genere el evento selectionchange.
Document.onvisibilitychange: Es un manejador de eventos que representa el código que se llamará cuando se genere el evento visibilitychange.

Propiedades obsoletas

Document.alinkColor Obsoleto: Devuelve o establece el color de los enlaces activos en el cuerpo del documento.
Document.all Obsoleto No estándar: Proporciona acceso a todos los elementos del documento; devuelve un HTMLAllCollection arraigado en el nodo del documento. Esta es una propiedad heredada, no estándar y no debe usarse.
Document.anchors Obsoleto Read only: Devuelve una lista de todos los anclajes en el documento.
Document.applets Obsoleto Read only: Devuelve una lista ordenada de los subprogramas dentro de un documento.
Document.bgColor Obsoleto: Establece u obtiene el color de fondo del documento actual.
Document.charset Obsoleto Read only: Alias de Document.characterSet. Utilice esta propiedad en su lugar.
Document.fgColor Obsoleto: Establece u obtiene el color de primer plano o el color del texto del documento actual.
Document.fullscreen Obsoleto: Devuelve true cuando el documento está en modo pantalla completa.
Document.height No estándar Obsoleto: Establece u obtiene la altura del documento actual.
Document.inputEncoding Obsoleto Read only: Alias de Document.characterSet. Utilice esta propiedad en su lugar.
Document.lastStyleSheetSet Obsoleto Read only: Devuelve el nombre del conjunto de hojas de estilo que se habilitó por última vez. Tiene el valor null hasta que se cambia la hoja de estilo estableciendo el valor de selectedStyleSheetSet.
Document.linkColor Obsoleto: Establece u obtiene el color de los hipervínculos en el documento.
Document.preferredStyleSheetSet Obsoleto Read only: Devuelve el conjunto de hojas de estilo preferido según lo especificado por el autor de la página.
Document.rootElement Obsoleto: Como Document.documentElement, pero solo para elementos <svg> raíz. Utilice esta propiedad en su lugar.
Document.selectedStyleSheetSet Obsoleto: Devuelve qué conjunto de hojas de estilo está actualmente en uso.
Document.styleSheetSets Obsoleto Read only: Devuelve una lista de los conjuntos de hojas de estilo disponibles en el documento.
Document.vlinkColor Obsoleto: Establece u obtiene el color de los hipervínculos visitados.
Document.width No estándar Obsoleto: Devuelve el ancho del documento actual.
Document.xmlEncoding Obsoleto: Devuelve la codificación determinada por la declaración XML.
Document.xmlStandalone Obsoleto: Devuelve true si la declaración XML especifica que el documento sea independiente (p. ej., Una parte externa de la DTD afecta el contenido del documento), de lo contrario, false.
Document.xmlVersion Obsoleto: Devuelve el número de versión como se especifica en la declaración XML o "1.0" si la declaración está ausente.

Métodos

Esta interfaz también hereda de las interfaces Node y EventTarget.

Document.adoptNode(): Adopta un nodo de un documento externo.
Document.append(): Inserta un conjunto de objetos Node u objetos DOMString después del último elemento hijo del documento.
Document.captureEvents() Obsoleto: Consulte Window.captureEvents.
Document.caretPositionFromPoint(): Devuelve un objeto CaretPosition que contiene el nodo DOM que contiene el signo de intercalación y el desplazamiento del carácter del signo de intercalación dentro de ese nodo.
Document.caretRangeFromPoint() No estándar: Obtiene un objeto Range para el fragmento de documento bajo las coordenadas especificadas.
Document.createAttribute(): Crea un nuevo objeto Attr y lo devuelve.
Document.createAttributeNS(): Crea un nuevo nodo de atributo en un espacio de nombres determinado y lo devuelve.
Document.createCDATASection(): Crea un nuevo nodo CDATA y lo devuelve.
Document.createComment(): Crea un nuevo nodo de comentario y lo devuelve.
Document.createDocumentFragment(): Crea un nuevo fragmento de documento.
Document.createElement(): Crea un nuevo elemento con el nombre de etiqueta dado.
Document.createElementNS(): Crea un nuevo elemento con el nombre de etiqueta y el URI de espacio de nombres dados.
Document.createEntityReference() Obsoleto: Crea un nuevo objeto de referencia de entidad y lo devuelve.
Document.createEvent(): Crea un objeto de evento.
Document.createNodeIterator(): Crea un objeto NodeIterator.
Document.createProcessingInstruction(): Crea un nuevo objeto ProcessingInstruction.
Document.createRange(): Crea un objeto Range.
Document.createTextNode(): Crea un nodo de texto.
Document.createTouch() Obsoleto: Crea un objeto Touch.
Document.createTouchList() Obsoleto: Crea un objeto TouchList.
Document.createTreeWalker(): Crea un objeto TreeWalker.
Document.elementFromPoint(): Devuelve el elemento superior en las coordenadas especificadas.
Document.elementsFromPoint(): Devuelve una matriz de todos los elementos en las coordenadas especificadas.
Document.enableStyleSheetsForSet() Obsoleto: Habilita las hojas de estilo para el conjunto de hojas de estilo especificado.
Document.exitPictureInPicture(): Retira el video de la ventana flotante de picture-in-picture y vuelve a su contenedor original.
Document.exitPointerLock() Experimental: Libera el bloqueo del puntero.
Document.getAnimations(): Devuelve una matriz de todos los objetos Animation actualmente en uso, cuyos elementos de destino son descendientes de document.
Document.getBoxQuads() Experimental: Devuelve una lista de objetos DOMQuad que representan los fragmentos CSS del nodo.
Document.getElementById(): Devuelve una referencia de objeto al elemento identificado.
Document.getElementsByClassName(): Devuelve una lista de elementos con el nombre de clase dado.
Document.getElementsByTagName(): Devuelve una lista de elementos con el nombre de etiqueta dado.
Document.getElementsByTagNameNS(): Devuelve una lista de elementos con el nombre de etiqueta y el espacio de nombres dados.
Document.getSelection(): Devuelve un objeto Selection que representa el rango de texto seleccionado por el usuario o la posición actual del signo de intercalación.
Document.hasStorageAccess() Experimental: Devuelve un Promise que se resuelve con un valor booleano que indica si el documento tiene acceso a su almacenamiento propio.
Document.importNode(): Devuelve un clon de un nodo de un documento externo.
Document.normalizeDocument() Obsoleto: Reemplaza entidades, normaliza nodos de texto, etc.
Document.prepend(): Inserta un conjunto de objetos Node u objetos DOMString antes del primer elemento hijo del documento.
Document.querySelector(): Devuelve el primer nodo Element dentro del documento, en el orden del documento, que coincide con los selectores especificados.
Document.querySelectorAll(): Devuelve una lista de todos los nodos Element dentro del documento que coinciden con los selectores especificados.
Document.releaseCapture() No estándar: Libera la captura actual del mouse si está en un elemento de este documento.
Document.releaseEvents() No estándar Obsoleto: Consulte Window.releaseEvents().
Document.replaceChildren(): Reemplaza los elementos hijos existentes de un documento con un nuevo conjunto específico de elementos hijos.
Document.requestStorageAccess(): Devuelve un Promise que resuelve si se otorgó el acceso al almacenamiento propio y lo rechaza si se denegó el acceso.
Document.mozSetImageElement() No estándar: Le permite cambiar el elemento que se utiliza como imagen de fondo para un ID de elemento específico.

La interfaz Document se amplía con la interfaz XPathEvaluator:

Document.createExpression(): Compila una XPathExpression que luego se puede usar para (repetidas) evaluaciones.
Document.createNSResolver(): Crea un objeto XPathNSResolver.
Document.evaluate(): Evalúa una expresión XPath.

Extensión para documentos HTML

La interfaz Document para documentos HTML se hereda de la interfaz HTMLDocument o, desde HTML5, se amplía para dichos documentos:

Document.clear() No estándar Obsoleto: En la mayoría de los navegadores modernos, incluidas las versiones recientes de Firefox e Internet Explorer, este método no hace nada.
Document.close(): Cierra el flujo de escritura en el documento.
Document.execCommand() Obsoleto: En un documento editable, ejecuta un comando de formato.
Document.getElementsByName(): Devuelve una lista de elementos con el nombre dado.
Document.hasFocus(): Devuelve true si el foco se encuentra actualmente en cualquier lugar dentro del documento especificado.
Document.open(): Abre un flujo de escritura para el documento.
Document.queryCommandEnabled() Obsoleto: Devuelve true si el comando de formato se puede ejecutar en el rango actual.
Document.queryCommandIndeterm() Obsoleto: Devuelve true si el comando de formato está en un estado indeterminado en el rango actual.
Document.queryCommandState() Obsoleto: Devuelve true si el comando de formato se ha ejecutado en el rango actual.
Document.queryCommandSupported() Obsoleto: Devuelve true si el comando de formato es compatible con el rango actual.
Document.queryCommandValue() Obsoleto: Devuelve el valor actual del rango actual para un comando de formato.
Document.write(): Escribe texto en un documento.
Document.writeln(): Escribe una línea de texto en un documento.

Eventos

Puede detectar estos eventos usando addEventListener() o asignando un detector de eventos a la propiedad oneventname de esta interfaz.

scroll: Se activa cuando se ha desplazado la vista del documento o un elemento. También disponible a través de la propiedad onscroll.
visibilitychange: Se activa cuando el contenido de una pestaña se vuelve visible o se oculta. También disponible a través de la propiedad onvisibilitychange.
wheel: Se activa cuando el usuario gira un botón de rueda en un dispositivo señalador (generalmente un mouse). También disponible a través de la propiedad onwheel.

Eventos de animación

animationcancel: Se activa cuando una animación aborta inesperadamente. También disponible a través de la propiedad onanimationcancel.
animationend: Se activa cuando una animación se ha completado normalmente. También disponible a través de la propiedad onanimationend.
animationiteration: Se activa cuando se completa una iteración de animación. También disponible a través de la propiedad onanimationiteration.
animationstart: Se activa cuando comienza una animación. También disponible a través de la propiedad onanimationstart.

Eventos del portapapeles

copy: Se activa cuando el usuario inicia una acción de copiar a través de la interfaz de usuario del navegador.
cut: Se activa cuando el usuario inicia una acción de cortar a través de la interfaz de usuario del navegador.
paste: Se activa cuando el usuario inicia una acción de pegar a través de la interfaz de usuario del navegador.

Eventos de arrastrar y soltar

drag: Se activa cada pocos cientos de milisegundos cuando el usuario arrastra un elemento o una selección de texto. También disponible a través de la propiedad ondrag.
dragend: Se activa cuando finaliza una operación de arrastre (soltando un botón del mouse o presionando la tecla Escape). También disponible a través de la propiedad ondragend.
dragenter: Se activa cuando un elemento arrastrado o una selección de texto ingresa en un destino de colocación válido. También disponible a través de la propiedad ondragenter.
dragleave: Se activa cuando un elemento arrastrado o una selección de texto deja un destino de colocación válido. También disponible a través de la propiedad ondragleave.
dragover: Se activa cuando se arrastra un elemento o una selección de texto sobre un destino de colocación válido (cada pocos cientos de milisegundos). También disponible a través de la propiedad ondragover.
dragstart: Se activa cuando el usuario comienza a arrastrar un elemento o una selección de texto. También disponible a través de la propiedad ondragstart.
drop: Se activa cuando un elemento o una selección de texto se coloca en un destino de colocación válido. También disponible a través de la propiedad ondrop.

Eventos de pantalla completa

fullscreenchange: Se activa cuando Document pasa al modo de pantalla completa o sale del mismo.
fullscreenerror: Se activa si se produce un error al intentar activar o desactivar el modo de pantalla completa.

Eventos de teclado

keydown: Se activa cuando se presiona una tecla. También disponible a través de la propiedad onkeydown.
keypress: Se activa cuando se presiona una tecla que produce un valor de carácter. También disponible a través de la propiedad onkeypress.
keyup: Se activa cuando se suelta una tecla. También disponible a través de la propiedad onkeyup.

Eventos de carga y descarga

DOMContentLoaded: Se activa cuando el documento se ha cargado y analizado por completo, sin esperar a que las hojas de estilo, las imágenes y los submarcos terminen de cargarse.
readystatechange: Se activa cuando el atributo readyState de un documento ha cambiado. También disponible a través de la propiedad onreadystatechange.

Eventos de puntero

gotpointercapture: Se activa cuando un elemento captura un puntero usando setPointerCapture(). También disponible a través de la propiedad ongotpointercapture.
lostpointercapture: Se activa cuando se suelta un puntero capturado. También disponible a través de la propiedad onlostpointercapture.
pointercancel: Se activa cuando se cancela un evento de puntero. También disponible a través de la propiedad onpointercancel.
pointerdown: Se activa cuando un puntero se vuelve activo. También disponible a través de la propiedad onpointerdown.
pointerenter: Se activa cuando se mueve un puntero a los límites de la prueba de acierto de un elemento o uno de sus hijos. También disponible a través de la propiedad onpointerenter.
pointerleave: Se activa cuando un puntero se mueve fuera de los límites de la prueba de acierto de un elemento. También disponible a través de la propiedad onpointerleave.
pointerlockchange: Se activa cuando el puntero está bloqueado o desbloqueado. También disponible a través de la propiedad onpointerlockchange.
pointerlockerror: Se activa cuando falla el bloqueo del puntero. También disponible a través de la propiedad onpointerlockerror.
pointermove: Se activa cuando un puntero cambia de coordenadas. También disponible a través de la propiedad onpointermove.
pointerout: Se activa cuando un puntero se mueve fuera de los límites de la prueba de acierto de un elemento (entre otras razones). También disponible a través de la propiedad onpointerout.
pointerover: Se activa cuando se mueve un puntero a los límites de la prueba de acierto de un elemento. También disponible a través de la propiedad onpointerover.
pointerup: Se activa cuando un puntero ya no está activo. También disponible a través de la propiedad onpointerup.

Eventos de selección

selectionchange: Se activa cuando se cambia la selección de texto actual en un documento. También disponible a través de la propiedad onselectionchange.
selectstart: Se activa cuando el usuario comienza una nueva selección. También disponible a través de la propiedad onselectstart.

Eventos táctiles

touchcancel: Se activa cuando uno o más puntos de contacto se han interrumpido de una manera específica de la implementación (por ejemplo, se crean demasiados puntos de contacto). También disponible a través de la propiedad ontouchcancel.
touchend: Se activa cuando uno o más puntos de contacto se eliminan de la superficie táctil. También disponible a través de la propiedad ontouchend
touchmove: Se activa cuando uno o más puntos de contacto se mueven a lo largo de la superficie táctil. También disponible a través de la propiedad ontouchmove
touchstart: Se activa cuando se colocan uno o más puntos de contacto en la superficie táctil. También disponible a través de la propiedad ontouchstart

Eventos de transición

transitioncancel: Se activa cuando se cancela una transición de CSS. También disponible a través de la propiedad ontransitioncancel.
transitionend: Se activa cuando se completa una transición de CSS. También disponible a través de la propiedad ontransitionend.
transitionrun: Se activa cuando se crea por primera vez una transición de CSS. También disponible a través de la propiedad ontransitionrun.
transitionstart: Se activa cuando realmente ha comenzado una transición de CSS. También disponible a través de la propiedad ontransitionstart.

Extensiones no estándar No estándar

No estándar: Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Notas de firefox

Firefox define algunos métodos no estándar:

Document.execCommandShowHelp() Obsoleto: Este método nunca hizo nada y siempre arrojaba una excepción, por lo que se eliminó en Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11).
Document.getBoxObjectFor() Obsoleto: Utilice el método Element.getBoundingClientRect() en su lugar.
Document.loadOverlay() Obsoleto: Carga una superposición XUL dinámicamente. Esto solo funciona en documentos XUL.
Document.queryCommandText() Obsoleto: Este método nunca hizo nada más que generar una excepción y se eliminó en Gecko 14 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11).

Notas de Internet Explorer

Microsoft define algunos métodos no estándar:

Document.fileSize* No estándar Obsoleto: Devuelve el tamaño en bytes del documento. A partir de Internet Explorer 11, esa propiedad ya no se admite. Consulte MSDN.

Especificaciones

Specification
DOM Standard # interface-document
HTML Standard # the-document-object
CSSOM View Module # extensions-to-the-document-interface
Pointer Lock 2.0 # extensions-to-the-document-interface
Selection API # extensions-to-document-interface

Compatibilidad con navegadores

BCD tables only load in the browser