HTML DOM
HTML
DOM Node
Element Element HTML XML SVG 1
2 1 2
HTML Document
HTML
Element HTML HTMLElement HTML Element HTML HTMLElement hidden innerText
HTML DOM HTML HTMLElement HTMLElement Node Node HTML
HTMLElement ID HTML HTML
HTMLElement HTMLElement <canvas> HTMLCanvasElement HTMLCanvasElement HTMLElement height getContext()
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 HTMLElement Element Node EventTarget
Node EventTarget
<audio> <video> HTMLAudioElement HTMLVideoElement HTMLMediaElement HTMLElement HTMLMediaElement audio video
HTML DOM
HTML DOM API HTML DOM
HTML DOM API
HTML DOM API HTML HTML DOM API HTML
HTML
HTML
HTMLAnchorElementHTMLAreaElementHTMLAudioElementHTMLBaseElementHTMLBodyElementHTMLBRElementHTMLButtonElementHTMLCanvasElementHTMLDataElementHTMLDataListElementHTMLDetailsElementHTMLDialogElementHTMLDirectoryElementHTMLDivElementHTMLDListElementHTMLElementHTMLEmbedElementHTMLFieldSetElementHTMLFormElementHTMLHRElementHTMLHeadElementHTMLHeadingElementHTMLHtmlElementHTMLIFrameElementHTMLImageElementHTMLInputElementHTMLLabelElementHTMLLegendElementHTMLLIElementHTMLLinkElementHTMLMapElementHTMLMediaElementHTMLMenuElementHTMLMetaElementHTMLMeterElementHTMLModElementHTMLObjectElementHTMLOListElementHTMLOptGroupElementHTMLOptionElementHTMLOutputElementHTMLParagraphElementHTMLPictureElementHTMLPreElementHTMLProgressElementHTMLQuoteElementHTMLScriptElementHTMLSelectElementHTMLSlotElementHTMLSourceElementHTMLSpanElementHTMLStyleElementHTMLTableCaptionElementHTMLTableCellElementHTMLTableColElementHTMLTableElementHTMLTableRowElementHTMLTableSectionElementHTMLTemplateElementHTMLTextAreaElementHTMLTimeElementHTMLTitleElementHTMLTrackElementHTMLUListElementHTMLUnknownElementHTMLVideoElement
HTML Element
HTML Element
HTML
CanvasGradientCanvasPatternCanvasRenderingContext2DImageBitmapImageBitmapRenderingContextImageDataOffscreenCanvasOffscreenCanvasRenderingContext2DPath2DTextMetrics
AudioTrackAudioTrackListMediaErrorTextTrackTextTrackCueTextTrackCueListTextTrackListTimeRangesTrackEventVideoTrackVideoTrackList
&
API
BeforeUnloadEventHashChangeEventHistoryLocationPageRevealEventPageSwapEventPageTransitionEventPopStateEvent
HTML DOM API PromiseRejectionEvent JavaScript (Promise)
DOMStringListDOMStringMapErrorEventHTMLAllCollectionMimeTypeMimeTypeArrayPromiseRejectionEvent
API
HTML API
BroadcastChannelDedicatedWorkerGlobalScopeMessageChannelMessageEventMessagePortSharedWorkerSharedWorkerGlobalScopeWorkerWorkerGlobalScopeWorkerLocationWorkerNavigator
HTML API
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 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="userEmail">:</label>
<input type="email" id="userEmail" />
</p>
<input type="submit" value="" id="sendButton" />
</form>
| HTML # htmlelement |