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.

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.