La API DOM HTML
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s 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 través del DOM.
- Acceso y manipulación de los datos de un formulario.
- Interactuar con el contenido de imágenes 2D y el contexto de un
<canvas>HTML, por ejemplo, para dibujar sobre él. - Gestión de los medios conectados a los elementos HTML multimedia (
<audio>y<video>). - Arrastrar y soltar contenido en páginas web.
- Acceso al historial de navegación del navegador.
- Interfaces de apoyo y conexión para otras API como Web Components, Web Storage, Web Workers, WebSocket, y Server-sent events.
Conceptos y uso de DOM HTML
En este articulo, nos centraremos en las partes del DOM HTML que implican la interacción con elementos HTML. El análisis de otras áreas, como Drag and Drop, WebSockets, Web Storage, etc., se puede encontrar en la documentación de esas API.
Estructura de un elemento HTML
El Modelo de Objetos del Documento o Modelo en Objetos para la Representación 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 jerárquico 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 jerarquía. Otros nodos, pueden representar componentes visibles de un documento. Cada nodo se basa en la interfaz Node , que proporciona propiedades para obtener información sobre el nodo, así como métodos para crear, eliminar y organizar nodos dentro del DOM.
Los nodos no tienen ningún concepto de incluir el contenido que realmente se muestra en el documento. Son recipientes vacíos. La noción 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 más anidados en su interior:
Si bien la interfaz del Document se define como parte de la especificación DOM, la especificación HTML la mejora significativamente para añadir información específica sobre el uso de DOM en el contexto de un navegador web, Así como para utilizarlo para representar documentos HTML específicamente.
Entre las cosas añadidas al Document por el estándar HTML se encuentran:
- Compatibilidad con el acceso a diversa información proporcionada por los encabezados HTTP al cargar la página, 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 ejecución de comandos sobre editable content.
- Manejadores de eventos para eventos del documento definidos por el estándar HTML que permiten acceder a eventos del mouse y del keyboard, drag and drop, media control, y mucho más.
- 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 más para representar elementos HTML especificamente mediante la introducción de la interfaz HTMLElement, de la que heredan todas las clases de elementos HTML más específicas. Esto amplía la clase Element para añadir características generales específicas de HTML a los nodos de un elemento. Las propiedades añadidas 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 también un nodo (pero no al revés). De esta manera, las características estructurales implementadas por la interfaz Node, también están disponibles para los elementos HTML, lo que permite anidarlos entre sí, crearlos y eliminarlos, moverlos, etc.
Sin embargo, la interfaz HTMLElement es genérica y solo proporciona la funcionalidad común a todos los elementos HTML, como el ID del elemento, sus coordenadas, el HTML que lo compone, información sobre la posición de desplazamiento, etc.
Para ampliar la funcionalidad de la interfaz principal HTMLElement y proporcionar las características que necesita un elemento específico, la clase HTMLElement se divide en subconjuntos para añadir las propiedades y métodos necesarios. Por ejemplo, el elemento <canvas> está representado por un objeto de tipo HTMLCanvasElement. HTMLCanvasElement aumenta el tipo HTMLElement añadiendo propiedades como height y métodos como getContext() para proporcionar características especificas del elemento canvas.
La herencia general para las clases de elementos HTML tiene el siguiente aspecto:
Como tal, un elemento hereda las propiedades y métodos 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 métodos específicos del ancla descritos en la documentación de esa clase, pero también 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 ratón, eventos de reproducción y pausa, etc.
Hay elementos que comparten características 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 común HTMLMediaElement, que a su vez se basa en HTMLElement y así sucesivamente. HTMLMediaElement define los métodos y propiedades comunes a los elementos de audio y vídeo.
Estas interfaces de elementos constituyen la mayor parte de la API DOM HTML y son el tema central de este articulo. El artículo DOM ofrece una introducción general al DOM y sus conceptos.
Público objetivo de DOM HTML
Las características 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 más simples, utilizan algunas características del DOM HTML.
Interfaces API DOM HTML
La mayoría de las interfaces que componen la API DOM HTML se corresponden casi uno a uno con elementos HTML individuales o con un pequeño grupo de elementos con funcionalidades similares. Además, 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 específicos (o conjunto de elementos relacionados que tienen las mismas propiedades y métodos asociados).
HTMLAnchorElementHTMLAreaElementHTMLAudioElementHTMLBaseElementHTMLBodyElementHTMLBRElementHTMLButtonElementHTMLCanvasElementHTMLDataElementHTMLDataListElementHTMLDetailsElementHTMLDialogElementHTMLDirectoryElementHTMLDivElementHTMLDListElementHTMLElementHTMLEmbedElementHTMLFieldSetElementHTMLFormElementHTMLHRElementHTMLHeadElementHTMLHeadingElementHTMLHtmlElementHTMLIFrameElementHTMLImageElementHTMLInputElementHTMLLabelElementHTMLLegendElementHTMLLIElementHTMLLinkElementHTMLMapElementHTMLMediaElementHTMLMenuElementHTMLMetaElementHTMLMeterElementHTMLModElementHTMLObjectElementHTMLOListElementHTMLOptGroupElementHTMLOptionElementHTMLOutputElementHTMLParagraphElementHTMLPictureElementHTMLPreElementHTMLProgressElementHTMLQuoteElementHTMLScriptElementHTMLSelectElementHTMLSlotElementHTMLSourceElementHTMLSpanElementHTMLStyleElementHTMLTableCaptionElementHTMLTableCellElementHTMLTableColElementHTMLTableElementHTMLTableRowElementHTMLTableSectionElementHTMLTemplateElementHTMLTextAreaElementHTMLTimeElementHTMLTitleElementHTMLTrackElementHTMLUListElementHTMLUnknownElementHTMLVideoElement
Interfaces de elementos en desuso
HTMLMarqueeElementObsoleto
Interfaces de elementos HTML obsoletas
HTMLFontElementObsoletoHTMLFrameElementObsoletoHTMLFrameSetElementObsoleto
Interfaces de integración 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 configuración.
Interfaces de integración de aplicaciones web y navegadores en desuso
ExternalObsoleto
Interfaces de integración de aplicaciones web y navegadores obsoletas
PluginObsoletoPluginArrayObsoleto
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>.
Interfaces multimedia
Las interfaces multimedia proporcionan acceso HTML al contenido de los elementos multimedia: <audio> y <video>.
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 página
Las interfaces de la API de historial te permiten acceder a información sobre el historial del navegador, así como avanzar y retroceder en la pestaña actual del navegador a través de ese historial.
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. Además, PromiseRejectionEvent representa el evento que se envía cuando se rechaza una JavaScript Promise.
Interfaces pertenecientes a otras API
Varias interfaces están definidas técnicamente en la especificación 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 reutilización.
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 aplicación y su contenido, como para admitir la mensajería entre ventanas o aplicaciones.
BroadcastChannelDedicatedWorkerGlobalScopeMessageChannelMessageEventMessagePortSharedWorkerSharedWorkerGlobalScopeWorkerWorkerGlobalScopeWorkerLocationWorkerNavigator
Interfaces WebSocket
Estas interfaces, definidas por la especificación 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 botón "submit" de un formulario en función 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 código utiliza el método 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 métodos que proporcionan información sobre estos elementos y permiten controlarlos.
El objeto HTMLInputElement Para la propiedad disabled del botón "Enviar" se establece en true (verdadero), lo que inhabilita el botón "Enviar" para que no se pueda hacer clic en el. Además, el campo de entrada del nombre de usuario se convierte en el foco activo, al llamar al método focus() que hereda de HTMLElement.
A continuación, se llama a addEventListener() para añadir un manejador para el evento input al campo de entrada del nombre de usuario. Este código comprueba la longitud del valor actual del campo de entrada; si es cero, el botón "Enviar" se desactiva, si aún no lo está. De lo contrario, el código se asegura de que el botón esté activado.
Con esto, el botón "Enviar" siempre estará habilitado cuando el campo de entrada del nombre de usuario tenga un valor, e inhabilitado cuando esté vacío.
HTML
El código 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 |
Compatibilidad con navegadores
Loading…