Reference Guide

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

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

🚀 For detailed tutorials, projects, and source code, check out my Vanilla JS Pocket Guides and Videos.

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.