This is a draft cheat sheet. It is a work in progress and is not finished yet.
Getting elements
document.getElementById(id) |
Gets a single element based on its id attribute. |
document.querySelector(cssSelector): |
Gets a single element based on a CSS selector. If multiple **elements match the selector, returns the first one. |
document.querySelectorAll(cssSelector) |
Gets all elements matching a CSS selector as a NodeList. |
document.getElementsByTagName(tagName) |
Gets all elements with a specific HTML tag as an HTMLCollection. |
document.getElementsByClassName(className) |
Gets all elements with a specific class as an HTMLCollection. |
Sizes and Scrolling
window.innerWidth |
The width of the browser window |
window.innerHeight |
The height of the browser window |
window.getComputedStyle(el) |
Gets styles as they are currently rendered on the page, converted to pixels. |
el.clientHeight |
The height of visible content and padding |
el.offsetHeight |
The height of visible content, padding, borders and scrollbars |
el.scrollHeight |
The height of all content and padding, including content scrolled out of view |
el.offsetTop |
The distance from the outer top border of the element to the inner top border of the nearest positioned parent |
el.scrollIntoView() |
Scrolls the container so the element is in view |
el.scrollTo(optionsObj) |
Scrolls the element to a specified top value in the options object. Additionally, behavior: 'smooth' will create a smooth transition. |
Adding And Removing Elements
document.createElement(tag) |
Creates a new HTML element. |
document.createTextNode(text) |
Creates a text node as an alternative to setting textContent. |
document.createDocumentFragment() |
Creates a document fragment, which is useful for appending multiple elements at once after a loop. |
el.appendChild(el) |
Appends an element to the end of the contents of another element. |
el.append(node1, ...) |
Appends 1 or more nodes (elements or text) to the end of the contents of another element. * element.prepend(node1, node2, ...): Prepends 1 or more nodes (elements or text) to the beginning of the contents of another element. |
el.remove() |
Removes the element from the DOM |
Setting Attributes
el.style.property |
Sets a CSS property using inline styles, although CSS classes should usually be preferred. The style object will only contain inline styles, not those set with CSS. |
el.setAttribute('attribute','val') |
Sets an HTML attribute to a specific value. |
el.textContent |
The text content of an element, including that of any children. Note: this is slightly different from element.innerText, which only gets text that is actually rendered and element.innerHTML which gets the entire HTML code as a string. |
el.attribute |
An alternative to the setAttribute function, attributes can be directly edited via their property name. For example, element.value would get the value attribute of the element. |
el.classList |
An object for updating CSS classes. Specifically, this contains 3 primary functions: add(className), remove(className) and toggle(className). |
|
