DOM JavaScript — Cheat Sheet

Tags: javascript, dom, frontend, browser, html, events

Level: intermediate

TL;DR: Core methods and properties for selecting, manipulating, traversing, and listening to HTML elements via the Document Object Model in JavaScript.

Key concepts

The DOM is a tree-like object structure representing the HTML document.

Nodes can represent HTML elements, raw text, or element attributes.

Single element selection is handled via querySelector or getElementById.

Multiple elements are selected using querySelectorAll, returning a static NodeList.

Live collections (like getElementsByClassName) update automatically when the DOM changes.

Frequent direct DOM manipulations trigger reflows and repaints, which degrade performance.

Event bubbling causes events fired on children to propagate upward to their parents.

DocumentFragment is used to batch DOM insertions off-screen, improving render performance.

Typical questions and ready answers

Q: What is the difference between Event.preventDefault() and Event.stopPropagation()?R: I use preventDefault() to block the browser's default behavior (like following a link), whereas stopPropagation() stops the event from bubbling further up the DOM tree.

Q: How does event delegation work and why use it?R: Instead of binding listeners to many child elements, I attach one listener to their parent. I then use event.target to identify which child originated the event, saving memory.

Q: What is the difference between innerHTML, innerText, and textContent?R: innerHTML parses HTML tags. innerText reads rendered text, respecting CSS (ignoring hidden text). textContent grabs raw text from all nodes, ignoring CSS entirely.

Pitfalls and common mistakes

Manipulating the DOM repeatedly inside a loop instead of building a string or using DocumentFragment.

Injecting unsanitized user input directly via innerHTML, creating XSS vulnerabilities.

Forgetting to call removeEventListener on component unmount, leading to memory leaks.

Querying for elements before the browser fires the DOMContentLoaded event.

Confusing a NodeList with a true JavaScript array (requires Array.from() or spread operator to use array methods).

Snippets and commandsJavaScript

// 1. Selection
const container = document.querySelector('.container');
const buttons = document.querySelectorAll('button[data-action]'); // NodeList

// 2. Creation and Manipulation
const newDiv = document.createElement('div');
newDiv.textContent = 'Hello World';
newDiv.classList.add('highlight');
newDiv.setAttribute('aria-expanded', 'true');

// 3. Batch Insertion with DocumentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
document.querySelector('ul').appendChild(fragment);

// 4. Event Delegation
document.querySelector('#parent-list').addEventListener('click', (event) => {
  if (event.target.matches('li.item')) {
    console.log('List item clicked:', event.target.textContent);
  }
});

// 5. DOM Ready Check
document.addEventListener('DOMContentLoaded', () => {
  // Safe to manipulate DOM here
});

To review

[ ] Traversing methods (nextElementSibling, closest, contains)

[ ] Intersection Observer API for scroll-based DOM events

[ ] Custom Events creation and dispatching

Jarvis Interviews
Jarvis