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.

🦄 All new! A brand new and redesigned Vanilla JS Academy is here. Join now and get 30% off registration.

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...of - Loop over iterable objects.
for...in - Loop over plain objects.
Array.forEach() & NodeList.forEach() - Loop through arrays and NodeLists.

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 & Properties

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.
Properties - Get and set element properties.

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.replaceAll() - Replace all instances of a string inside another string.
String.slice() - Get a portion of a string starting and ending at specific characters.
String.split() - Convert a string to an array.
String.indexOf() - Find the index of a substring inside a string.
String.includes() - Check 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.
Increment & Decrement - Increment numbers up and down.
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.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.sort() - Sort and reorder the items in an array.
Array.join() - Combine all items in an array into a string.
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.shift() - Remove the first item from an array.
Array.pop() - Remove the last item from an array.
Array.from() - Create a new array from an existing array or array-like object.
Array.indexOf() - Get the index of the first matching item in an array.
Array.find() - Get the first item in an array that satisfies a condition.
Array.findIndex() - Find the index of an item in a multidimensional array.

Objects

Object.keys() - Get an array of keys from an object.
Object.entries() - Get an array of key/value pairs from an object.
delete - Remove an item from an object.
Object.assign() - Perform a shallow merge of two or more objects.
Object.freeze() - Make an object or array immutable.
Object Property Shorthand - A shorthand for defining object properties.
Object Function Shorthand - A shorthand for defining functions in an object.
Optional Chaining - Chain properties only if they’re not undefined or null.

Extract & Copy Properties

Array Destructuring - Extract variables from array properties.
Object Destructuring - Assign variables from object properties.
Spread Syntax - Expand array or object properties into their own values.
structuredClone() - Expand array or object properties into their own values.

Variables & Functions

Ternary Operator - A shorter way to write if...else statements.
Default Parameters - Define default values for function parameters.
Rest Parameters - Create an array with multiple function arguments.
Arrow Functions - An alternate way to define functions.

HTML & Text

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

DOM Injection

document.createElement() - Create an element.
Node.before() - Insert an element into the DOM before another one.
Node.after() - Insert an element into the DOM after another one.
Element.append() - Insert an element at the end of a set of elements inside a shared parent.
Element.prepend() - Insert an element at the beginning of a set of elements inside a shared parent.
Node.remove() - Remove an element from the DOM.
Node.replaceWith() - Replace an element with another.
Node.clone() - Create a copy of a node.

Traversing the DOM

Element.parentNode - Get the parent of an element.
Element.closest() - Get the closest parent element that matches a selector.
Node.children - Get the immediate descendant elements of an element.
Node.childNodes - Get the immediate descendants of an element, including text fragments and other non-element nodes.
Node.firstChild & Node.lastChild - Get the first and last child nodes of a parent element.
Node.firstElementChild & Node.lastElementChild - Get the first and last child element of a parent element.
Node.nextSibling & Node.previousSibling - Get the next and previous sibling node of an element.
Node.nextElementSibling & Node.previousElementSibling - Get the next and previous sibling element of an element.

The Viewport

window.innerHeight - Get the height of the viewport.
window.innerWidth - Get the width of the viewport.
Element.getBoundingClientRect() - Get information about the size of an element and its position relative to the viewport.

Browser Storage

Cookies - Get and 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 object or array data into a string.

Ajax & APIs

fetch() - Make Promise-based HTTP request.
Promise.all() - Wait for two or more asynchronous tasks to resolve.
async & await - Write asynchronous code like it’s synchronous.

ES Modules

export - Export modules for use in other files.
Default exports - Import all modules from a file.
import all - Import all modules from a file.
Side effects - Import all modules from a file.

JavaScript-Free Components

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