JavaScript DOM
The DOM (Document Object Model) is how JavaScript reaches into a page to read it, change it and react to clicks. These are the methods and properties you reach for constantly — querySelector(), addEventListener(), innerHTML and more. All 32 below come with syntax and a live, editable example.
| Name | Description |
|---|---|
| addEventListener() | Attaches a function that runs when a given event fires on an element. The standard way to handle events. |
| append() | Adds nodes or text to the end of an element's children. More flexible than appendChild(). |
| appendChild() | Adds a node as the last child of an element, inserting it into the page. |
| classList | A property for reading and changing an element's classes with add, remove, toggle and contains. |
| clipboard.writeText() | Copies text to the system clipboard. Returns a promise and needs a user gesture. |
| cloneNode() | Creates a copy of an element. Pass true to copy its descendants too (a deep clone). |
| closest() | Finds the nearest ancestor (or the element itself) that matches a CSS selector. |
| createElement() | Creates a new HTML element in memory, ready to configure and insert into the page. |
| dataset | A property for reading and writing an element's data-* attributes as a convenient object. |
| fetch() | Makes a network request and returns a promise for the response. The modern way to call APIs. |
| getAttribute() | Returns the value of an element's attribute, or null if the attribute is not present. |
| getBoundingClientRect() | Returns an element's size and position relative to the viewport. |
| getComputedStyle() | Returns the actual, rendered CSS values of an element, including styles from stylesheets. |
| getElementById() | Returns the element with the given id attribute, or null if no element has that id. |
| history.pushState() | Adds an entry to the browser history and changes the URL without reloading the page. |
| innerHTML | Gets or sets the HTML markup inside an element. Powerful, but unsafe with untrusted input. |
| insertAdjacentHTML() | Inserts HTML at a specific position relative to an element, without replacing its contents. |
| matches() | Tests whether an element matches a CSS selector, returning true or false. |
| prepend() | Adds nodes or text to the start of an element's children. The front-insert counterpart of append(). |
| preventDefault() | Stops the browser's default action for an event, such as following a link or submitting a form. |
| querySelector() | Returns the first element that matches a CSS selector, or null if none match. |
| querySelectorAll() | Returns a static NodeList of all elements matching a CSS selector. Loop it with forEach. |
| remove() | Removes an element from the DOM. The simple, modern way to delete a node. |
| requestAnimationFrame() | Schedules a function to run before the next repaint — the right way to drive smooth animations. |
| scrollIntoView() | Scrolls the page so a given element comes into view, optionally with a smooth animation. |
| scrollTo() | Scrolls the window (or an element) to a set of coordinates, optionally smoothly. |
| setAttribute() | Sets an attribute on an element, creating it or updating its value. |
| setInterval() | Runs a function repeatedly at a fixed interval in milliseconds until you cancel it. |
| setTimeout() | Runs a function once after a delay in milliseconds. Returns an id you can cancel. |
| showModal() | Opens a <dialog> element as a modal, with a backdrop and focus trapping built in. |
| style | A property for reading and setting an element's inline styles from JavaScript. |
| textContent | Gets or sets the plain text inside an element. The safe alternative to innerHTML. |