JavaScript DOM Manipulation Cheat Sheet

Select Elements

const el = document.querySelector('#id');         // Single element
const all = document.querySelectorAll('.class');  // NodeList of elements
const byId = document.getElementById('id');
const byClass = document.getElementsByClassName('class');
const byTag = document.getElementsByTagName('div');

Modify Text and HTML
el.textContent = "New text";   // Sets or gets plain text
el.innerHTML = "<strong>Bold</strong>"; // Sets or gets HTML

Change Attributes
el.setAttribute('src', 'image.jpg');
el.getAttribute('href');
el.removeAttribute('disabled');

Add / Remove / Toggle Classes
el.classList.add('active');
el.classList.remove('hidden');
el.classList.toggle('open');
el.classList.contains('visible'); // returns true/false

Create & Append Elements
const newDiv = document.createElement('div');
newDiv.textContent = "Hello";
document.body.appendChild(newDiv);
parent.insertBefore(newDiv, sibling); // insert before a sibling

Remove Elements
el.remove();
el.parentNode.removeChild(el); // older method

Set Styles Inline
el.style.color = 'red';
el.style.backgroundColor = '#eee';
el.style.display = 'none';

Event Listeners
el.addEventListener('click', e => {
  console.log('Clicked!', e.target);
});

el.removeEventListener('click', handlerFn);

Form Input Values
const value = document.querySelector('input').value;
document.querySelector('input').value = 'Updated!';

Prevent Default Behavior
form.addEventListener('submit', e => {
  e.preventDefault();
  // handle form manually
});