HTML DOM API
HTML DOM API HTML
HTML DOM API
- DOM HTML
- 2D HTML
<canvas> - HTML
<audio><video> - API Web Web StorageWeb WorkerWebSocket Server-sent
HTML DOM
HTML HTML DOM WebSocketWeb Storage API
HTML
Node DOM
Document DOM HTML Web DOM HTML
HTML Document
HTML
HTMLElement Element HTML HTML Element HTML HTMLElement hidden innerText
HTML DOM HTMLElement HTML HTMLElement Node Node HTML
HTMLElement HTML ID HTML
HTMLElement HTMLElement <canvas> HTMLCanvasElement HTMLElement height getContext() HTMLElement canvas
HTML
![[]](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/dom-structure.svg){kind=link}
![[HTML ]](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/html-dom-hierarchy.svg){kind=link}
<a> DOM HTMLAnchorElement Anchor HTMLElementElement Node EventTarget
Node EventTarget
<audio> <video> HTMLAudioElement HTMLVideoElement HTMLMediaElement HTMLElement HTMLMediaElement
HTML DOM API DOM DOM
HTML DOM
HTML DOM web API web web HTML DOM
HTML DOM API
HTML DOM API HTML HTML DOM API HTML
HTML
HTML
HTMLAnchorElementHTMLAreaElementHTMLAudioElementHTMLBaseElementHTMLBodyElementHTMLBRElementHTMLButtonElementHTMLCanvasElementHTMLDataElementHTMLDataListElementHTMLDetailsElementHTMLDialogElementHTMLDirectoryElementHTMLDivElementHTMLDListElementHTMLElementHTMLEmbedElementHTMLFieldSetElementHTMLFormElementHTMLHRElementHTMLHeadElementHTMLHeadingElementHTMLHtmlElementHTMLIFrameElementHTMLImageElementHTMLInputElementHTMLLabelElementHTMLLegendElementHTMLLIElementHTMLLinkElementHTMLMapElementHTMLMediaElementHTMLMenuElementHTMLMetaElementHTMLMeterElementHTMLModElementHTMLObjectElementHTMLOListElementHTMLOptGroupElementHTMLOptionElementHTMLOutputElementHTMLParagraphElementHTMLPictureElementHTMLPreElementHTMLProgressElementHTMLQuoteElementHTMLScriptElementHTMLSelectElementHTMLSlotElementHTMLSourceElementHTMLSpanElementHTMLStyleElementHTMLTableCaptionElementHTMLTableCellElementHTMLTableColElementHTMLTableElementHTMLTableRowElementHTMLTableSectionElementHTMLTemplateElementHTMLTextAreaElementHTMLTimeElementHTMLTitleElementHTMLTrackElementHTMLUListElementHTMLUnknownElementHTMLVideoElement
HTML
HTML
Web
HTML
Web
Web
Canvas
CanvasGradientCanvasPatternCanvasRenderingContext2DImageBitmapImageBitmapRenderingContextImageDataOffscreenCanvasOffscreenCanvasRenderingContext2DPath2DTextMetrics
AudioTrackAudioTrackListMediaErrorTextTrackTextTrackCueTextTrackCueListTextTrackListTimeRangesTrackEventVideoTrackVideoTrackList
History API
Web
HTML DOM API PromiseRejectionEvent JavaScript Promise
DOMStringListDOMStringMapErrorEventHTMLAllCollectionMimeTypeMimeTypeArrayPromiseRejectionEvent
API
HTML API
Web Storage
Web Worker
Web Worker API Worker
BroadcastChannelDedicatedWorkerGlobalScopeMessageChannelMessageEventMessagePortSharedWorkerSharedWorkerGlobalScopeWorkerWorkerGlobalScopeWorkerLocationWorkerNavigator
WebSocket
HTML WebSocket API
Server-sent
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 sendButton <input> DOM
HTMLInputElement disabled true HTMLElement focus()
addEventListener() input
HTML
HTML
<p>*</p>
<form action="" method="get">
<p>
<label for="userName" required></label>
<input type="text" id="userName" /> (*)
</p>
<p>
<label for="email"></label>
<input type="email" id="userEmail" />
</p>
<input type="submit" value="" id="sendButton" />
</form>
| HTML # htmlelement |