| Operation | Quick Reference | Link |
|---|---|---|
| Selecting DOM Elements | ||
| Select DOM elements by CSS selector | document.querySelectorAll() |
Examples |
| Select elements by class name | document.getElementsByClassName() |
Examples |
| Select elements by tag name | document.getElementsByTagName() |
Examples |
| Select elements by ID | document.getElementsById() |
Examples |
| DOM Traversing | ||
| Match element selector | Use matches() or matchesSelector() |
Examples |
| Get parent element node | el.parentNode |
Examples |
| Get siblings of an element | Helper function using firstChild / nextSibling |
Examples |
| Get closest element by selector | el.closest() + polyfill for older browsers |
Examples |
| Select the children of an element | el.firstChild / el.lastChild / el.childNodes |
Examples |
| Manipulating DOM Elements | ||
| Create a DOM Element | document.createElement() / el.innerHTML / document.createTextNode() |
Examples |
| Replace a DOM Element | el.parentNode.replaceChild() |
Examples |
| Unwrap a DOM Element | Helper function using el.firstChild / parent.removeChild() |
Examples |
| Empty an element's content | el.innerHTML = ''; |
Examples |
| Removing an element | el.parentNode.removeChild() |
Examples |
| Insert an element after or before another | Helper function using nextSibling & insertBefore() |
Examples |
| Get the text content of an element | el.textContent || el.innertText |
Examples |
| Get and set the HTML content of an element | el.innerHTML |
Examples |
| Append or prepend to an element | Modify el.innerHTML or use appendChild() / insertBefore() |
Examples |
| Wrap an HTML structure around an element | Helper function using insertBefore() / appendChild() |
Examples |
| Clone an element | el.cloneNode(true); |
Examples |
| Iterating over a list of selected elements | Call document.querySelectorAll(), then iterate using various methods |
Examples |
| Getting and Setting DOM Attributes | ||
| Set, get, and remove properties of DOM elements | Directly access el.href, el.title, el.alt, el.value as JavaScript properties |
Examples |
| Adding, removing, and testing for classes | User helper function to manipulate el.classList or el.className |
Examples |
| Setting, getting, and removing data attributes | el.setAttribute(), el.getAttribute(), el.removateAttribute() with "data-" names |
Examples |
| Getting, setting, and removing attributes | el.setAttribute(), el.getAttribute(), el.removateAttribute() |
Examples |
| Getting and Setting Element Styles | ||
| Set and get CSS styles of elements | Get: el.getComputedStyle or el.currentStyle (IE < 9); Set: el.style |
Examples |
| Get and set scroll position of an element | el.scrollTop, el.scrollLeft |
Examples |
| Get the offset position of an element relative to its parent | el.offsetTop, el.offsetLeft |
Examples |
| Get the position of an element relative to the document | Helper function using el.getBoundingClientRect() |
Examples |
| Getting width and height of an element |
el.offsetWidth, el.offsetHeightel.clientWidth, el.clientHeightstyle.marginLeft, style.marginRight, style.marginTop, style.marginBottometc ... For other box model properties |
Examples |
| AJAX Requests | ||
| Making CORS AJAX GET requests | Helper function using XMLHttpRequest() and XDomainRequest() |
Examples |
| JSONP AJAX requests | Create/append script element and set script.src< |
Examples |
| Load a script file asynchronously | Inject a new script tag into the DOM |
Examples |
| Send AJAX GET and POST requests | Helper function using XMLHttpRequest() / ActiveXObject() |
Examples |
| Serialize form data into an array | Helper function that iterates over form.elements to build array |
Examples |
| Serialize form data into a query string | Helper function that iterates over form.elements to build string |
Examples |
| Binding and Unbinding Events | ||
| Preventing the default action or bubbling of events | e.preventDefault() / e.stopPropagation() |
Examples |
| Getting the keycode from keyboard events | e.keyCode / e.which / e.shiftKey / e.altKey / e.ctrlKey |
Examples |
| Getting the current mouse position | e.pageX / e.pageY / e.clientX / e.clientY |
Examples |
| Running code when the document is ready | Add an event listener for 'DOMContentLoaded' |
Examples |
| Live binding event handlers | Helper function using el.addEventListener() + some polyfills |
Examples |
| Binding and unbinding event handlers | el.addEventListener() / el.removeEventListener() + polyfills |
Examples |
| Trigger an event | Helper function using document.createEvent() / el.dispatchEvent() / el.fireEvent() |
Examples |
| Animation and Effects | ||
| Animate an element property | Helper functions that adjust el.style.opacity using setTimeout() |
Examples |
| Hide or show an element | Helper functions that adjust el.style.display |
Examples |
| Utilities | ||
| Parsing a JSON string | JSON.parse() |
Examples |
| Strip leading and trailing whitespace from a string | s.trim() + polyfills |
Examples |
| Test if a certain value exists in an array | a.indexOf() and/or helper function for IE8 |
Examples |
| Merge two JavaScript objects | Helper function to iterate over properties, checking o.hasOwnProperty() |
Examples |
| Set, get, and delete cookies | Helper functions to manipulate document.cookie |
Examples |