DOM Methods & Selectors Cheatsheet

Element Selectors

// Single Element Selectors (returns single element)
document.getElementById('myId')                 // No array conversion needed
document.querySelector('.myClass')              // No array conversion needed
document.querySelector('#myId')                 // No array conversion needed
document.querySelector('[data-test]')           // No array conversion needed

// Multiple Element Selectors (returns NodeList or HTMLCollection)
document.getElementsByClassName('myClass')      // Returns HTMLCollection - needs Array.from()
document.getElementsByTagName('div')           // Returns HTMLCollection - needs Array.from()
document.getElementsByName('firstName')        // Returns NodeList - has forEach, needs Array.from() for map/filter
document.querySelectorAll('.myClass')         // Returns NodeList - has forEach, needs Array.from() for map/filter

Common Element Properties

element.id                    // Get/set ID
element.className            // Get/set class as string
element.classList            // List of classes with methods
element.tagName             // Get tag name (uppercase)
element.innerHTML           // Get/set HTML content
element.textContent         // Get/set text content (no HTML)
element.innerText           // Get/set rendered text content
element.value              // Get/set form input value
element.style              // Access CSS properties
element.dataset            // Access data-* attributes
element.attributes         // Get all attributes
element.getAttribute('src') // Get specific attribute
element.setAttribute('src', 'value') // Set specific attribute

Element Creation & Modification

// Creating Elements
const div = document.createElement('div')
const text = document.createTextNode('Hello')
const fragment = document.createDocumentFragment()

// Adding Elements
parentElement.appendChild(childElement)
parentElement.append(element1, element2, 'text')  // Multiple nodes & text
parentElement.prepend(element)                    // Add as first child
parentElement.insertBefore(newNode, referenceNode)
element.insertAdjacentHTML('beforeend', htmlString)
element.insertAdjacentElement('afterend', element)

// Removing Elements
element.remove()                                  // Remove self
parentElement.removeChild(childElement)           // Remove child
element.replaceWith(newElement)                  // Replace self
parentElement.replaceChild(newChild, oldChild)    // Replace child

// Cloning Elements
element.cloneNode(true)  // Deep clone with children
element.cloneNode(false) // Shallow clone without children

ClassList Methods

element.classList.add('class1', 'class2')
element.classList.remove('class1', 'class2')
element.classList.toggle('class')
element.classList.contains('class')
element.classList.replace('old', 'new')

Element Traversal

// Parents & Children
element.parentElement              // Immediate parent
element.parentNode                // Immediate parent node
element.children                  // HTMLCollection of children - needs Array.from()
element.childNodes               // NodeList of child nodes - needs Array.from() for map/filter
element.firstElementChild        // First child element
element.lastElementChild         // Last child element
element.firstChild              // First child node
element.lastChild               // Last child node

// Siblings
element.previousElementSibling   // Previous sibling element
element.nextElementSibling      // Next sibling element
element.previousSibling         // Previous sibling node
element.nextSibling            // Next sibling node

Event Handling

// Adding Events
element.addEventListener('click', callback)
element.addEventListener('click', callback, { once: true })
element.addEventListener('click', callback, { capture: true })
element.onclick = callback

// Removing Events
element.removeEventListener('click', callback)
element.onclick = null

// Event Object Properties
event.target                // Element that triggered event
event.currentTarget        // Element event listener is attached to
event.preventDefault()     // Prevent default behavior
event.stopPropagation()   // Stop event bubbling
event.stopImmediatePropagation() // Stop other listeners

Measuring Elements & Position

// Element Size & Position
element.getBoundingClientRect()  // Size and position relative to viewport
element.offsetWidth             // Width including padding and border
element.offsetHeight            // Height including padding and border
element.clientWidth            // Width including padding
element.clientHeight           // Height including padding
element.scrollWidth            // Total scrollable width
element.scrollHeight           // Total scrollable height
element.offsetLeft             // Distance from left of positioned parent
element.offsetTop              // Distance from top of positioned parent

Form Element Properties & Methods

form.elements                   // Access form controls - HTMLFormControlsCollection
form.submit()                  // Submit form programmatically
form.reset()                   // Reset form to initial state
input.focus()                  // Focus input
input.blur()                   // Remove focus
input.select()                 // Select input content
input.checkValidity()          // Check HTML5 validation

Converting Collections to Arrays

// HTMLCollection (from getElementsByClassName, getElementsByTagName, children)
Array.from(collection)
[...collection]

// NodeList (from querySelectorAll, childNodes)
Array.from(nodeList)
[...nodeList]

// Example usage with array methods
Array.from(document.querySelectorAll('.item')).map(el => el.textContent)
[...document.getElementsByClassName('item')].filter(el => el.classList.contains('active'))

Common NodeList vs HTMLCollection Differences

// NodeList:
- Returned by querySelectorAll(), childNodes
- Static (doesn't update when DOM changes)
- Has forEach method built in
- Needs Array.from() for map, filter, reduce
- Can contain text nodes and comment nodes

// HTMLCollection:
- Returned by getElementsByClassName(), getElementsByTagName(), children
- Live (updates when DOM changes)
- No forEach method built in
- Needs Array.from() for all array methods
- Only contains element nodes