DOM helps you interact with HTML elements using JavaScript — like accessing elements, changing content, listening to events, and dynamically updating

✅ 1. DOM Element Selectors

document.getElementById('id');
// Selects a single element by its ID

document.getElementsByClassName('class');
// Selects all elements with the given class (HTMLCollection)

document.getElementsByTagName('tag');
// Selects elements by tag name (HTMLCollection)

document.querySelector('.class, #id, tag');
// Selects the first matching element using CSS selectors

document.querySelectorAll('.class');
// Selects all matching elements (NodeList)
        

✅ 2. Text, HTML & Attribute Manipulation

element.textContent = "Hello";
// Sets or gets plain text (ignores HTML)

element.innerHTML = "<strong>Hello</strong>";
// Sets or gets HTML content

element.setAttribute('href', '#');
// Adds or updates an attribute

element.getAttribute('href');
// Gets the value of an attribute

element.removeAttribute('href');
// Removes the attribute

element.hasAttribute('href');
// Checks if attribute exists (returns true/false)
        

✅ 3. Class and Inline Style Manipulation

element.classList.add('active');
// Adds a class to the element

element.classList.remove('hidden');
// Removes a class

element.classList.toggle('dark-mode');
// Toggles class on/off

element.classList.contains('active');
// Checks if class exists (returns true/false)

element.style.color = "red";
// Applies inline style (use camelCase)
        

✅ 4. Create, Append & Remove Elements

const newEl = document.createElement('p');
// Creates a new element

newEl.textContent = "Hello World";
// Sets text content

document.body.appendChild(newEl);
// Appends to the body

container.prepend(newEl);
// Inserts at the beginning

newEl.remove();
// Removes element from DOM
        

✅ 5. DOM Traversal

element.parentElement;
// Gets parent element

element.children;
// Gets all direct children

element.firstElementChild;
// First child element

element.lastElementChild;
// Last child element

element.nextElementSibling;
// Next sibling

element.previousElementSibling;
// Previous sibling
        

✅ 6. DOM Event Handling

btn.addEventListener('click', () => {
  alert('Clicked!');
});
// Adds event listener

btn.removeEventListener('click', handler);
// Removes event listener

input.addEventListener('input', () => {
  console.log(input.value);
});
// Listens for input changes
        

✅ 7. Form Submission Example

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const name = document.querySelector('#name').value;
  console.log('Submitted:', name);
});
// Prevents reload and logs form data
        

✅ 8. Useful Shortcuts

Array.from(document.querySelectorAll('.item'));
// Converts NodeList to array

document.querySelectorAll('.item').forEach(el => {
  el.style.color = 'green';
});
// Loops over NodeList and applies styles
        

✅ 9. DOM Ready Listener

document.addEventListener('DOMContentLoaded', () => {
  // Runs code after full HTML is loaded
});
        

🏁 Conclusion

Mastering the DOM is the core foundation of becoming a confident frontend or full-stack JavaScript developer.

I hope this cheatsheet helps you while building, debugging, or revising DOM concepts in real-world projects.