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.

🚀 New & Updated! The Vanilla JS Pocket Guides have been completely updated with new methods and modern JS approaches.

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.

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.

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.

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.

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.

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.

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.

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.