DOM Manipulation
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: 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.offsetHeight
el.clientWidth, el.clientHeight
style.marginLeft, style.marginRight, style.marginTop, style.marginBottom

etc ... For other box model properties
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 using setTimeout() Examples
Hide or show an element Helper functions that adjust Examples
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