HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
Esta página ha sido traducida del inglés por la comunidad. Aprende más y únete a la comunidad de MDN Web Docs.
View in English Always switch to English
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:
<canvas>
<audio>
<video>
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.
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).
document
Document
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.
Node
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.
Element
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:
<head>
copy
cut
paste
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.
HTMLElement
hidden
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.
HTMLCanvasElement
height
getContext()
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.
<a>
HTMLAnchorElement
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.
HTMLAudioElement
HTMLVideoElement
HTMLMediaElement
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.
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.
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.
Estas interfaces representan elementos HTML específicos (o conjunto de elementos relacionados que tienen las mismas propiedades y métodos asociados).
HTMLAreaElement
HTMLBaseElement
HTMLBodyElement
HTMLBRElement
HTMLButtonElement
HTMLDataElement
HTMLDataListElement
HTMLDetailsElement
HTMLDialogElement
HTMLDirectoryElement
HTMLDivElement
HTMLDListElement
HTMLEmbedElement
HTMLFieldSetElement
HTMLFormElement
HTMLHRElement
HTMLHeadElement
HTMLHeadingElement
HTMLHtmlElement
HTMLIFrameElement
HTMLImageElement
HTMLInputElement
HTMLLabelElement
HTMLLegendElement
HTMLLIElement
HTMLLinkElement
HTMLMapElement
HTMLMenuElement
HTMLMetaElement
HTMLMeterElement
HTMLModElement
HTMLObjectElement
HTMLOListElement
HTMLOptGroupElement
HTMLOptionElement
HTMLOutputElement
HTMLParagraphElement
HTMLPictureElement
HTMLPreElement
HTMLProgressElement
HTMLQuoteElement
HTMLScriptElement
HTMLSelectElement
HTMLSlotElement
HTMLSourceElement
HTMLSpanElement
HTMLStyleElement
HTMLTableCaptionElement
HTMLTableCellElement
HTMLTableColElement
HTMLTableElement
HTMLTableRowElement
HTMLTableSectionElement
HTMLTemplateElement
HTMLTextAreaElement
HTMLTimeElement
HTMLTitleElement
HTMLTrackElement
HTMLUListElement
HTMLUnknownElement
HTMLMarqueeElement
HTMLFontElement
HTMLFrameElement
HTMLFrameSetElement
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.
BarProp
Navigator
Window
External
Plugin
PluginArray
Estas interfaces proporcionan la estructura y la funcionalidad necesarias para los elementos utilizados para crear y manejar formularios, incluidos los elementos <form> y <input>.
<form>
<input>
FormDataEvent
HTMLFormControlsCollection
HTMLOptionsCollection
RadioNodeList
ValidityState
Estas interfaces representan objetos utilizados por la API Canvas, así como por los elementos <img> y <picture>.
<img>
<picture>
CanvasGradient
CanvasPattern
CanvasRenderingContext2D
ImageBitmap
ImageBitmapRenderingContext
ImageData
OffscreenCanvas
OffscreenCanvasRenderingContext2D
Path2D
TextMetrics
Las interfaces multimedia proporcionan acceso HTML al contenido de los elementos multimedia: <audio> y <video>.
AudioTrack
AudioTrackList
MediaError
TextTrack
TextTrackCue
TextTrackCueList
TextTrackList
TimeRanges
TrackEvent
VideoTrack
VideoTrackList
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.
DataTransfer
DataTransferItem
DataTransferItemList
DragEvent
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.
BeforeUnloadEvent
HashChangeEvent
History
Location
PageRevealEvent
PageSwapEvent
PageTransitionEvent
PopStateEvent
Estas interfaces son utilizadas por la Web Components API Para crear y gestionar los custom elements disponibles.
CustomElementRegistry
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.
PromiseRejectionEvent
Promise
DOMStringList
DOMStringMap
ErrorEvent
HTMLAllCollection
MimeType
MimeTypeArray
Varias interfaces están definidas técnicamente en la especificación HTML, aunque en realidad forman parte de otras API.
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.
Storage
StorageEvent
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.
BroadcastChannel
DedicatedWorkerGlobalScope
MessageChannel
MessageEvent
MessagePort
SharedWorker
SharedWorkerGlobalScope
Worker
WorkerGlobalScope
WorkerLocation
WorkerNavigator
Estas interfaces, definidas por la especificación HTML, son utilizadas por la API WebSockets API.
CloseEvent
WebSocket
La interfaz EventSource representa la fuente que envió o esta enviando server-sent events.
EventSource
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.
input
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.
getElementById()
userName
sendButton
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.
disabled
true
focus()
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.
addEventListener()
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.
El código HTML del formulario tiene el siguiente aspecto:
<p>Please provide the information below. Items marked with "*" are required.</p> <form action="?url=" 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>
Enable JavaScript to view this browser compatibility table.