The Modern JavaScript DOM Cheat Sheet

• Selecting Elements
• Creating and Modifying Elements
• Styling Elements
• Traversal
• Attributes and Properties
• DOM Manipulation
• Performance Optimization
• More Methods and Properties

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.