The Modern JavaScript DOM Cheat Sheet

This article provides a comprehensive cheat sheet for modern JavaScript DOM, covering a wide range of methods and properties that you can use to interact with the Document Object Model in your web applications.

Selecting Elements

• document.querySelector(selector) – selects the first element that matches the CSS selector.
• document.querySelectorAll(selector) – selects all elements that match the CSS selector.
• document.getElementById(id) – selects the element with the specified ID.
• document.getElementsByClassName(className) – selects all elements with the specified class name.
• document.getElementsByTagName(tagName) – selects all elements with the specified tag name.
• element.matches(selector) – returns a Boolean indicating whether the element matches the specified CSS selector.

Creating and Modifying Elements

• document.createElement(tagName) – creates a new element with the specified tag name.
• element.appendChild(childElement) – appends a child element to the end of the parent element.
• element.insertBefore(newElement, referenceElement) – inserts a new element before the specified reference element.
• element.setAttribute(name, value) – sets the value of the specified attribute for an element.
• element.removeAttribute(name) – removes the specified attribute from an element.
• element.innerHTML – sets or gets the HTML content of an element.
• element.textContent – sets or gets the text content of an element.
• element.insertAdjacentHTML(position, htmlString) – inserts HTML into the specified position relative to the element.
• element.insertAdjacentText(position, text) – inserts text into the specified position relative to the element.

Styling Elements

• element.style.property = value – sets a CSS property for an element.
• element.classList.add(className) – adds a class to an element.
• element.classList.remove(className) – removes a class from an element.
• element.classList.toggle(className) – toggles a class on or off for an element.
• element.classList.contains(className) – returns a Boolean value indicating whether an element has a specified class.
• window.getComputedStyle(element) – returns the computed style of an element.

Event Handling

• element.addEventListener(event, function) – adds an event listener to an element.
• element.removeEventListener(event, function) – removes an event listener from an element.
• event.preventDefault() – prevents the default action of an event.
• event.stopPropagation() – stops the propagation of an event to parent elements.
• event.target – returns the element that triggered the event.
• event.currentTarget – returns the element to which the event listener is attached.
• event.type – returns the type of the event.
• event.key – returns the key that was pressed (for keyboard events).
• event.keyCode – returns the Unicode value of the key that was pressed (for keyboard events).

Traversal

• element.parentNode – returns the parent node of an element.
• element.childNodes – returns a collection of all child nodes of an element.
• element.firstChild – returns the first child node of an element.
• element.lastChild – returns the last child node of an element.
• element.previousSibling – returns the previous sibling node of an element.
• element.nextSibling – returns the next sibling node of an element.
• element.parentElement – returns the parent element of an element (excluding text and comment nodes).
• element.children – returns a collection of all child elements of an element (excluding text and comment nodes).

Attributes and Properties

• element.getAttribute(name) – returns the value of the specified attribute for an element.
• element.setAttribute(name, value) – sets the value of the specified attribute for an element.
• element.removeAttribute(name) – removes the specified attribute from an element.
• element.propertyName – sets or gets the value of a property for an element.
• element.dataset – returns a DOMStringMap containing all the custom data attributes of an element.
• element.hasAttribute(name) – returns a Boolean indicating whether an element has the specified attribute.
• element.propertyName = value – sets the value of a property for an element.

DOM Manipulation

• document.createDocumentFragment() – creates a new empty document fragment.
• element.cloneNode(deep) – creates a clone of an element, optionally cloning its child nodes.
• element.removeChild(childElement) – removes a child element from the parent element.
• element.replaceChild(newElement, oldElement) – replaces an old child element with a new child element.
• element.contains(childElement) – returns a Boolean indicating whether an element is a descendant of another element.
• document.importNode(node, deep) – imports a node from another document into the current document.

Performance Optimization

• requestAnimationFrame(callback) – schedules a function to run the next time the browser renders a frame, usually at 60 frames per second.
• window.performance.mark(name) – creates a performance mark with the specified name.
• window.performance.measure(name, startMark, endMark) – creates a performance measure with the specified name, using the specified start and end marks.
• element.getBoundingClientRect() – returns a DOMRect object containing the size and position of an element.
• element.offsetWidth – returns the width of an element, including padding and border but not margin.
• element.offsetHeight – returns the height of an element, including padding and border but not margin.
• element.offsetLeft – returns the distance between an element’s left edge and its offset parent’s left edge.
• element.offsetTop – returns the distance between an element’s top edge and its offset parent’s top edge.

More Methods and Properties

• document.cookie – sets or gets the cookies associated with the current document.
• document.title – sets or gets the title of the current document.
• window.location – sets or gets the current URL of the window.
• window.navigator – returns an object containing information about the user’s browser and operating system.
• window.alert(message) – displays an alert dialog with the specified message.
• window.prompt(message, defaultValue) – displays a prompt dialog with the specified message and default value.

Epilogue

The above is the most concise information about the DOM in modern JavaScript. If you want to see more detailed guides and specific examples, keep reading the tutorials in this series, such as:

• JavaScript: Set HTML lang attribute programmatically
• JavaScript: Detect a click outside an HTML element

Happy coding and have a nice day!