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.

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.

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.

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

• 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.