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