La API DOM HTML
This feature is well established and works across many devices and browser versions. Its been available across browsers since julio de 2015.
* Some parts of this feature may have varying levels of support.
La API DOM HTML est compuesta por las interfaces que definen la funcionalidad de cada uno de los elementos en HTML, as como cualquier tipo e interfaz de apoyo en las que se basa.
Las reas funcionales incluidas en la API DOM HTML son las siguientes:
- Acceso y control de elementos HTML a travs del DOM.
- Acceso y manipulacin de los datos de un formulario.
- Interactuar con el contenido de imgenes 2D y el contexto de un
<canvas>HTML, por ejemplo, para dibujar sobre l. - Gestin de los medios conectados a los elementos HTML multimedia (
<audio>y<video>). - Arrastrar y soltar contenido en pginas web.
- Acceso al historial de navegacin del navegador.
- Interfaces de apoyo y conexin para otras API como Web Components, Web Storage, Web Workers, WebSocket, y Server-sent events.
In this article
- Conceptos y uso de DOM HTML
- Pblico objetivo de DOM HTML
- Interfaces API DOM HTML
- Ejemplos
- Especificaciones
- Compatibilidad con navegadores
- Vase tambin
Conceptos y uso de DOM HTML
En este articulo, nos centraremos en las partes del DOM HTML que implican la interaccin con elementos HTML. El anlisis de otras reas, como Drag and Drop, WebSockets, Web Storage, etc., se puede encontrar en la documentacin de esas API.
Estructura de un elemento HTML
El Modelo de Objetos del Documento o Modelo en Objetos para la Representacin de Documentos (DOM) es una arquitectura que describe la estructura de una document; Cada documento est representado por una instancia de la interfaz Document. A su vez, un documento consiste en un rbol jerrquico de nodos, en el que un nodo es un registro fundamental que representa un nico objeto dentro del documento (como un elemento o un nodo de texto).
Los nodos pueden ser estrictamente organizativos, proporcionando un medio para agrupar otros nodos o para proporcionar un punto en el que se pueda construir una jerarqua. Otros nodos, pueden representar componentes visibles de un documento. Cada nodo se basa en la interfaz Node , que proporciona propiedades para obtener informacin sobre el nodo, as como mtodos para crear, eliminar y organizar nodos dentro del DOM.
Los nodos no tienen ningn concepto de incluir el contenido que realmente se muestra en el documento. Son recipientes vacos. La nocin fundamental de un nodo que puede representar contenido visual se introduce mediante la interfaz Element. Una instancia de objeto Element representa un nico elemento en un documento creado utilizando HTML o un vocabulario XML como SVG.
Por ejemplo, consideremos un documento con dos elementos, uno de los cuales tiene dos elementos ms anidados en su interior:
[Structure of a document with elements inside a document in a window]
![[Structure of a document with elements inside a document in a window]](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/dom-structure.svg){kind=link}
Si bien la interfaz del Document se define como parte de la especificacin DOM, la especificacin HTML la mejora significativamente para aadir informacin especfica sobre el uso de DOM en el contexto de un navegador web, As como para utilizarlo para representar documentos HTML especficamente.
Entre las cosas aadidas al Document por el estndar HTML se encuentran:
- Compatibilidad con el acceso a diversa informacin proporcionada por los encabezados HTTP al cargar la pgina, como la location desde la que se cargo el documento, cookies, modification date, referring site, etc.
- Acceso a las listas de elementos del bloque
<head>y del body, as como a las listas de images, links, scripts, etc., contenidos en el documento. - Soporte para interactuar con el usuario mediante el examen de focus y la ejecucin de comandos sobre editable content.
- Manejadores de eventos para eventos del documento definidos por el estndar HTML que permiten acceder a eventos del mouse y del keyboard, drag and drop, media control, y mucho ms.
- Manejadores de eventos para eventos que pueden enviarse tanto a elementos como a documentos; Actualmente, estos solo incluyen acciones de
copy,cutypaste.
Interfaces de elementos HTML
La interfazElement se ha adaptado aun ms para representar elementos HTML especificamente mediante la introduccin de la interfaz HTMLElement, de la que heredan todas las clases de elementos HTML ms especficas. Esto ampla la clase Element para aadir caractersticas generales especficas de HTML a los nodos de un elemento. Las propiedades aadidas por HTMLElement incluyen, por ejemplo hidden y innerText.
Un documento HTML es un rbol DOM en el que cada uno de los nodos es un elemento HTML, representado por la interfaz HTMLElement. La clase HTMLElement , a su vez, implementa Node, por lo que cada elemento es tambin un nodo (pero no al revs). De esta manera, las caractersticas estructurales implementadas por la interfaz Node, tambin estn disponibles para los elementos HTML, lo que permite anidarlos entre s, crearlos y eliminarlos, moverlos, etc.
Sin embargo, la interfaz HTMLElement es genrica y solo proporciona la funcionalidad comn a todos los elementos HTML, como el ID del elemento, sus coordenadas, el HTML que lo compone, informacin sobre la posicin de desplazamiento, etc.
Para ampliar la funcionalidad de la interfaz principal HTMLElement y proporcionar las caractersticas que necesita un elemento especfico, la clase HTMLElement se divide en subconjuntos para aadir las propiedades y mtodos necesarios. Por ejemplo, el elemento <canvas> est representado por un objeto de tipo HTMLCanvasElement. HTMLCanvasElement aumenta el tipo HTMLElement aadiendo propiedades como height y mtodos como getContext() para proporcionar caractersticas especificas del elemento canvas.
La herencia general para las clases de elementos HTML tiene el siguiente aspecto:
[Hierarchy of interfaces for HTML elements]
![[Hierarchy of interfaces for HTML elements]](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/html-dom-hierarchy.svg){kind=link}
Como tal, un elemento hereda las propiedades y mtodos de todos sus antecesores. Por ejemplo, consideremos un elemento <a>, que se representa en el DOM mediante un objeto de tipo HTMLAnchorElement. El elemento por lo tanto, incluye las propiedades y mtodos especficos del ancla descritos en la documentacin de esa clase, pero tambin los definidos por HTMLElement y Element, as como los de Node y, por ltimo, EventTarget.
Cada nivel define un aspecto clave de la utilidad del elemento. Desde Node, el elemento hereda conceptos relacionados con la capacidad del elemento para ser contenido por otro elemento y para contener otros elementos a su vez. Es especialmente importante lo que se gana al heredar de EventTarget: la capacidad de recibir y manejar eventos como clics del ratn, eventos de reproduccin y pausa, etc.
Hay elementos que comparten caractersticas comunes y, por lo tanto, tienen un tipo intermedio adicional. Por ejemplo, los elementos <audio> y <video> presentan medios audiovisuales. Los tipos correspondientes, HTMLAudioElement y HTMLVideoElement, se basan ambos en el tipo comn HTMLMediaElement, que a su vez se basa en HTMLElement y as sucesivamente. HTMLMediaElement define los mtodos y propiedades comunes a los elementos de audio y vdeo.
Estas interfaces de elementos constituyen la mayor parte de la API DOM HTML y son el tema central de este articulo. El artculo DOM ofrece una introduccin general al DOM y sus conceptos.
Pblico objetivo de DOM HTML
Las caractersticas expuestas por el DOM HTML se encuentran entre las API mas utilizadas en el conjunto de herramientas de un desarrollador web. Todas las aplicaciones web, excepto las ms simples, utilizan algunas caractersticas del DOM HTML.
Interfaces API DOM HTML
La mayora de las interfaces que componen la API DOM HTML se corresponden casi uno a uno con elementos HTML individuales o con un pequeo grupo de elementos con funcionalidades similares. Adems, la API DOM HTML incluye algunas interfaces y tipos para dar soporte a las interfaces de elementos HTML.
Interfaces de elementos HTML
Estas interfaces representan elementos HTML especficos (o conjunto de elementos relacionados que tienen las mismas propiedades y mtodos asociados).
HTMLAnchorElementHTMLAreaElementHTMLAudioElementHTMLBaseElementHTMLBodyElementHTMLBRElementHTMLButtonElementHTMLCanvasElementHTMLDataElementHTMLDataListElementHTMLDetailsElementHTMLDialogElementHTMLDirectoryElementHTMLDivElementHTMLDListElementHTMLElementHTMLEmbedElementHTMLFieldSetElementHTMLFormElementHTMLHRElementHTMLHeadElementHTMLHeadingElementHTMLHtmlElementHTMLIFrameElementHTMLImageElementHTMLInputElementHTMLLabelElementHTMLLegendElementHTMLLIElementHTMLLinkElementHTMLMapElementHTMLMediaElementHTMLMenuElementHTMLMetaElementHTMLMeterElementHTMLModElementHTMLObjectElementHTMLOListElementHTMLOptGroupElementHTMLOptionElementHTMLOutputElementHTMLParagraphElementHTMLPictureElementHTMLPreElementHTMLProgressElementHTMLQuoteElementHTMLScriptElementHTMLSelectElementHTMLSlotElementHTMLSourceElementHTMLSpanElementHTMLStyleElementHTMLTableCaptionElementHTMLTableCellElementHTMLTableColElementHTMLTableElementHTMLTableRowElementHTMLTableSectionElementHTMLTemplateElementHTMLTextAreaElementHTMLTimeElementHTMLTitleElementHTMLTrackElementHTMLUListElementHTMLUnknownElementHTMLVideoElement
Interfaces de elementos en desuso
Interfaces de elementos HTML obsoletas
Interfaces de integracin de aplicaciones web y navegadores
Estas interfaces ofrecen acceso a la ventana del navegador y al documento que contiene el HTML, as como al estado del navegador, los complementos disponibles (si los hay) y diversas opciones de configuracin.
Interfaces de integracin de aplicaciones web y navegadores en desuso
Interfaces de integracin de aplicaciones web y navegadores obsoletas
Interfaces de soporte de formularios
Estas interfaces proporcionan la estructura y la funcionalidad necesarias para los elementos utilizados para crear y manejar formularios, incluidos los elementos <form> y <input>.
Interfaces de canvas e imagen
Estas interfaces representan objetos utilizados por la API Canvas, as como por los elementos <img> y <picture>.
CanvasGradientCanvasPatternCanvasRenderingContext2DImageBitmapImageBitmapRenderingContextImageDataOffscreenCanvasOffscreenCanvasRenderingContext2DPath2DTextMetrics
Interfaces multimedia
Las interfaces multimedia proporcionan acceso HTML al contenido de los elementos multimedia: <audio> y <video>.
AudioTrackAudioTrackListMediaErrorTextTrackTextTrackCueTextTrackCueListTextTrackListTimeRangesTrackEventVideoTrackVideoTrackList
Interfaces Drag and drop (arrastrar y soltar)
Estas interfaces son utilizadas por la API HTML Drag and Drop API para representar elementos individuales que pueden ser (o han sido) arrastrados, grupos de elementos que pueden ser (o han sido) arrastrados, y para manejar el proceso de arrastrar y soltar.
Interfaces del historial de pgina
Las interfaces de la API de historial te permiten acceder a informacin sobre el historial del navegador, as como avanzar y retroceder en la pestaa actual del navegador a travs de ese historial.
BeforeUnloadEventHashChangeEventHistoryLocationPageRevealEventPageSwapEventPageTransitionEventPopStateEvent
Interfaces de Componentes Web
Estas interfaces son utilizadas por la Web Components API Para crear y gestionar los custom elements disponibles.
Interfaces diversas y de apoyo
Estos tipos de objetos auxiliares se utilizan de diversas formas en la API DOM HTML. Adems, PromiseRejectionEvent representa el evento que se enva cuando se rechaza una JavaScript Promise.
DOMStringListDOMStringMapErrorEventHTMLAllCollectionMimeTypeMimeTypeArrayPromiseRejectionEvent
Interfaces pertenecientes a otras API
Varias interfaces estn definidas tcnicamente en la especificacin HTML, aunque en realidad forman parte de otras API.
Interfaces de almacenamiento Web (Web storage)
La API Web Storage API permite a los sitios web almacenar datos de forma temporal o permanente en el dispositivo del usuario para su posterior reutilizacin.
Interfaces de Web Workers
Estas interfaces son utilizadas por la API Web Workers API tanto para establecer la capacidad de los "workers" para interactuar con una aplicacin y su contenido, como para admitir la mensajera entre ventanas o aplicaciones.
BroadcastChannelDedicatedWorkerGlobalScopeMessageChannelMessageEventMessagePortSharedWorkerSharedWorkerGlobalScopeWorkerWorkerGlobalScopeWorkerLocationWorkerNavigator
Interfaces WebSocket
Estas interfaces, definidas por la especificacin HTML, son utilizadas por la API WebSockets API.
Interfaces de eventos enviados por el servidor
La interfaz EventSource representa la fuente que envi o esta enviando server-sent events.
Ejemplos
En este ejemplo, se supervisa el evento input de un elemento <input> con el fin de actualizar el estado del botn "submit" de un formulario en funcin de si un campo determinado tiene o no un valor en ese momento.
JavaScript
const nameField = document.getElementById("userName");
const sendButton = document.getElementById("sendButton");
sendButton.disabled = true;
// [nota: Esto est desabilitado, ya que hace que este articulo se cargue siempre con este ejemplo destacado y desplazado a la vista]
// nameField.focus();
nameField.addEventListener("input", (event) => {
const elem = event.target;
const valid = elem.value.length !== 0;
if (valid && sendButton.disabled) {
sendButton.disabled = false;
} else if (!valid && !sendButton.disabled) {
sendButton.disabled = true;
}
});
Este cdigo utiliza el mtodo getElementById() de la interfaz Document para obtener el objeto DOM que representa los elementos <input> que tienen ID userName y sendButton. Con ellos, podemos acceder a las propiedades y mtodos que proporcionan informacin sobre estos elementos y permiten controlarlos.
El objeto HTMLInputElement Para la propiedad disabled del botn "Enviar" se establece en true (verdadero), lo que inhabilita el botn "Enviar" para que no se pueda hacer clic en el. Adems, el campo de entrada del nombre de usuario se convierte en el foco activo, al llamar al mtodo focus() que hereda de HTMLElement.
A continuacin, se llama a addEventListener() para aadir un manejador para el evento input al campo de entrada del nombre de usuario. Este cdigo comprueba la longitud del valor actual del campo de entrada; si es cero, el botn "Enviar" se desactiva, si an no lo est. De lo contrario, el cdigo se asegura de que el botn est activado.
Con esto, el botn "Enviar" siempre estar habilitado cuando el campo de entrada del nombre de usuario tenga un valor, e inhabilitado cuando est vaco.
HTML
El cdigo HTML del formulario tiene el siguiente aspecto:
<p>Please provide the information below. Items marked with "*" are required.</p>
<form action="" method="get">
<p>
<label for="userName" required>Your name:</label>
<input type="text" id="userName" /> (*)
</p>
<p>
<label for="userEmail">Email:</label>
<input type="email" id="userEmail" />
</p>
<input type="submit" value="Enviar" id="sendButton" />
</form>
Resultado
Especificaciones
| Specification |
|---|
| HTML # htmlelement |