The HTML DOM API
This feature is well established and works across many devices and browser versions. Its been available across browsers since 2015 7.
* Some parts of this feature may have varying levels of support.
HTML DOM API .
- DOM HTML .
- .
- 2D HTML
<canvas>. - HTML (
<audio><video>) . - .
- Web Components, Web Storage, Web Workers, WebSocket Server-sent events API .
In this article
HTML DOM
HTML HTML DOM . Drag and Drop, WebSockets, Web Storage API .
HTML
(DOM) document , Document . , (: ) .
, . DOM , Node .
, .
[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}
Document DOM , HTML DOM , HTML .
HTML Document .
- location, cookies, modification date, referring site , HTTP .
-
<head>body images, links, scripts . - focus .
- mouse keyboard , drag and drop, media control HTML .
- copy, cut paste .
HTML
Element HTML HTMLElement HTML . Element HTML . HTMLElement hidden innerText .
HTML HTML DOM , HTMLElement . HTMLElement Node ( ). Node HTML , , , .
HTMLElement , ID, , HTML, HTML .
HTMLElement , HTMLElement . <canvas> HTMLCanvasElement . HTMLCanvasElement , height getContext() HTMLElement .
HTML .
[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}
. , DOM HTMLAnchorElement <a> . HTMLElement Element, Node, EventTarget .
. Node , . , EventTarget .
. <audio> <video> . HTMLAudioElement HTMLVideoElement HTMLMediaElement , HTMLElement . HTMLMediaElement .
HTML DOM API , . DOM , Introduction to the DOM .
HTML DOM
HTML DOM API . HTML DOM .
HTML DOM API
HTML DOM API HTML . HTML DOM API HTML .
HTML
HTML ( ) .
HTMLAnchorElementHTMLAreaElementHTMLAudioElementHTMLBaseElementHTMLBodyElementHTMLBRElementHTMLButtonElementHTMLCanvasElementHTMLDataElementHTMLDataListElementHTMLDetailsElementHTMLDialogElementHTMLDirectoryElementHTMLDivElementHTMLDListElementHTMLElementHTMLEmbedElementHTMLFieldSetElementHTMLFormElementHTMLHRElementHTMLHeadElementHTMLHeadingElementHTMLHtmlElementHTMLIFrameElementHTMLImageElementHTMLInputElementHTMLLabelElementHTMLLegendElementHTMLLIElementHTMLLinkElementHTMLMapElementHTMLMediaElementHTMLMenuElementHTMLMetaElementHTMLMeterElementHTMLModElementHTMLObjectElementHTMLOListElementHTMLOptGroupElementHTMLOptionElementHTMLOutputElementHTMLParagraphElementHTMLPictureElementHTMLPreElementHTMLProgressElementHTMLQuoteElementHTMLScriptElementHTMLSelectElementHTMLSlotElementHTMLSourceElementHTMLSpanElementHTMLStyleElementHTMLTableCaptionElementHTMLTableCellElementHTMLTableColElementHTMLTableElementHTMLTableRowElementHTMLTableSectionElementHTMLTemplateElementHTMLTextAreaElementHTMLTimeElementHTMLTitleElementHTMLTrackElementHTMLUListElementHTMLUnknownElementHTMLVideoElement
HTML
HTML
HTML , ( ) .
CanvasGradientCanvasPatternCanvasRenderingContext2DImageBitmapImageBitmapRenderingContextImageDataOffscreenCanvasOffscreenCanvasRenderingContext2DPath2DTextMetrics
AudioTrackAudioTrackListMediaErrorTextTrackTextTrackCueTextTrackCueListTextTrackListTimeRangesTrackEventVideoTrackVideoTrackList
HTML Drag and Drop API ( ) , .
History API , .
HTML DOM API . PromiseRejectionEvent JavaScript Promise .
DOMStringListDOMStringMapErrorEventHTMLAllCollectionMimeTypeMimeTypeArrayPromiseRejectionEvent
API
HTML API .
BroadcastChannelDedicatedWorkerGlobalScopeMessageChannelMessageEventMessagePortSharedWorkerSharedWorkerGlobalScopeWorkerWorkerGlobalScopeWorkerLocationWorkerNavigator
HTML WebSockets API .
EventSource server-sent events .
JavaScript
const nameField = document.getElementById("userName");
const sendButton = document.getElementById("sendButton");
sendButton.disabled = true;
// [: ].
//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;
}
});
Document getElementById() , ID userName and sendButton <input> DOM . .
"" disabled HTMLInputElement true "" . HTMLElement focus() .
addEventListener() input . 0 "" . .
'' .
HTML
(form) HTML .
<p> . "*" .</p>
<form action="" method="get">
<p>
<label for="userName" required>Your name:</label>
<input type="text" id="userName" /> (*)
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="userEmail" />
</p>
<input type="submit" value="Send" id="sendButton" />
</form>
| Specification |
|---|
| HTML # htmlelement |
- Manipulating documents: DOM .