HTML DOM Reference
The HTML DOM exposes a tree of nodes, each with a typed interface. Here are the ones you'll touch most.
The roots
| Type | Notable members |
|---|---|
Document | querySelector, querySelectorAll, getElementById, createElement, documentElement, head, body, title, activeElement, cookie, readyState |
Window | innerWidth, scrollTo, matchMedia, requestAnimationFrame, localStorage, history, location, navigator, crypto |
Element family
| Type | Notable members |
|---|---|
Node | nodeType, nodeName, parentNode, childNodes, appendChild, removeChild |
Element | tagName, id, className, classList, attributes, dataset, closest, matches, remove, append, prepend, before, after |
HTMLElement | style, innerText, title, hidden, focus, blur, click |
HTMLInputElement | value, checked, files, validity, setCustomValidity |
HTMLFormElement | elements, checkValidity, reportValidity, submit, reset |
HTMLImageElement / HTMLVideoElement | src, naturalWidth, play, pause, currentTime |
Events
| Type | Notable members |
|---|---|
Event | type, target, currentTarget, preventDefault, stopPropagation, defaultPrevented |
MouseEvent | clientX, clientY, button, shiftKey |
KeyboardEvent | key, code, ctrlKey, repeat |
InputEvent | data, inputType |
PointerEvent | pointerType, pressure, tiltX/Y |
FocusEvent / SubmitEvent / WheelEvent | Specialised events. |
Collections
| Type | Notes |
|---|---|
NodeList | Static (querySelectorAll) or live (childNodes). Supports forEach. |
HTMLCollection | Always live. children, forms, images. |
DOMTokenList | classList — add, remove, toggle, contains. |
Tip: The complete DOM has hundreds of interfaces. The "MDN DOM Interfaces" page is the canonical map — bookmark it and skim before reaching for a polyfill.
Example
Example
<!DOCTYPE html>
<html>
<body>
<p id="out"></p>
<script>
document.getElementById("out").textContent = "Hello from HTML DOM Reference!";
</script>
</body>
</html>
Try it Yourself »
Exercise
Add a CSS class with the modern API.
el.
.add('active');
Nine letters.
Discussion
Loading…