Reference Guide

A quick reference for commonly used JavaScript methods and browser APIs.

Unless otherwise noted, these work in all modern browsers on desktop and mobile. You can extend support back further with polyfills.

🔥 Black Friday Sale! Today through Monday, save 50% on every pocket guide, video course, and enrollment in the Vanilla JS Academy. If you buy a pocket guide bundle or join Academy, you'll also get $436 in free bonus gifts. This sale ends Monday, so don't wait!

Selectors

document.querySelectorAll() - Find all matching elements on a page.
document.querySelector() - Find the first matching element on a page.
Element.matches() - Check if an element would be selected by a particular selector or set of selectors.

Loops

for - Loop through arrays and array-like objects.
for...in - Loop through objects.
Array.forEach() - Loop through arrays.

Classes

Element.classList - Add, remove, toggle, and check for classes on an element.
Element.className - Get and set classes on an element.

Styles

Element.style - Get and set inline styles for an element.
Window.getComputedStyle() - Get the computed style of an element.

Attributes

Element.getAttribute() - Get an attribute on an element.
Element.setAttribute() - Set an attribute on an element.
Element.removeAttribute() - Remove an attribute from an element.
Element.hasAttribute() - Check if an element has an attribute.

Event Listeners

Element.addEventListener() - Listen for events on an element.
CustomEvent() - Create and emit custom events.

Strings

String.padStart() - Add characters to the beginning of a string if it’s less than a certain length.
String.padEnd() - Add characters to the end of a string if it’s less than a certain length.
String.trim() - Remove leading and trailing whitespace from a string.
String.toUpperCase() - Transform all text in a string to uppercase.
String.toLowerCase() - Transform all text in a string to lowercase.
String.replace() - Replace a portion of a string with something else.
String.slice() - Get a portion of a string starting and ending at specific characters.
String.split() - Convert a string to an array.
String.indexOf() - Determine if a string contains a substring.
Template Literals - More easily create multi-line or complex strings.

Numbers

parseInt() - Convert a string into an integer (whole number).
parseFloat() - Convert a string into a point number (a number with decimal points).
Number() - Convert a string into a number.
Number.toFixed() - Format a number to a fixed number of decimal places.
Number.toString() - Convert a number to a string.
Basic math - Do basic arithmetic with JavaScript.
Comparisons - Compare two numbers.
Math.abs() - Get the absolute value of a number.
Math.floor() - Get the largest integer less than or equal to a number.
Math.ceil() - Get the smallest integer greater than or equal to a number.
Math.max() - Get the largest number from a set of numbers
Math.min() - Get the lowest number from a set of numbers.
Math.random() - Return a random float between 0 and 1.

Arrays

Array.push() - Add items to an array.
Array.concat() - Merge two or more arrays together.
Array.slice() - Copy a segment of an array into a new array.
Array.splice() - Delete, replace, and add items to an array at specific indexes.
Array.from() - Create a new array from an existing array or array-like object.
Array.map() - Transform the items in an array and create a new one.
Array.filter() - Create a new array containing a subset of items from an existing ones.
Array.reduce() - Take the content of an array and return a single value.
Array.reverse() - Reverse the order of items in an array.
Array.join() - Combine all items in an array into a string.
Array.indexOf() - Get the index of the first matching item in an array.

Objects

Object.keys() - Get an array of keys from an object.
Object.entries() - Get an array of key/value pairs from an object.
Object.assign() - Perform a shallow merge of two or more objects.
delete - Remove an item from an object.

HTML and Text

Element.innerHTML - Get and set HTML content for an element.
Element.textContent - Get and set the text of an element (without markup).

DOM Injection

document.createElement() - Create an element.
Element.insertBefore() - Add an element to the DOM.
Element.before() - Insert an element into the DOM before another one.
Element.after() - Insert an element into the DOM after another one.
Element.prepend() - Insert an element at the beginning of a set of elements inside a shared parent.
Element.append() - Insert an element at the end of a set of elements inside a shared parent.
Element.appendChild() - Insert an element at the end of a set of elements inside a shared parent.
Element.removeChild() - Remove an element from the DOM.
Element.remove() - Remove an element from the DOM.

Traversing the DOM

Element.parentNode - Get the parent of an element.
Element.closest() - Get the closest parent element that matches a selector.
Child elements by selector - Search for elements with a specific selector inside a parent element.
Element.children - Get the immediate descendant elements of an element.
Element.childNodes - Get the immediate descendants of an element, including text fragments and other non-element nodes.
Sibling elements - Get all sibling elements for an element.

The Viewport

Viewport Height - Get the height of the viewport.
Viewport Width - Get the width of the viewport.
isInViewport() - Check if an element is in the viewport.

Distances

window.pageYOffset - Get the distance a user has scrolled from the top of the page.
getOffsetTop() - Get an element’s distance from the top of the document.

Browser Storage

Cookies - Set cookie values.
localStorage - Store data locally in the browser for later use.
sessionStorage - Store data locally for the duration of the current browser session.

JSON

JSON.parse() - Convert stringified JSON back into an object or array.
JSON.stringify() - Convert objects and arrays into strings.

Ajax and APIs

fetch() - Make Promise-based HTTP request.
XMLHttpRequest() (XHR) - Make an asynchronous HTTP request.

JavaScript-Free Components

Accordions - Create an expand-and-collapse disclosure element.
Autocomplete - Create an autocompletion text input.
Smooth Scrolling - Animate scrolling to anchor links.