DOM Manipulation and Events

Challenge

You need to efficiently update the DOM based on user interactions, handle events across multiple elements, and manage event listeners without memory leaks.

Explanation

The Document Object Model (DOM) is the browser’s representation of HTML. Events allow you to respond to user actions. Efficient DOM manipulation and event handling is critical for responsive web applications.

Selecting Elements

// Get single element
const element = document.getElementById('myId');
const element2 = document.querySelector('.class-name');
const element3 = document.querySelector('#id');

// Get multiple elements
const elements = document.querySelectorAll('.items');
const elements2 = document.getElementsByClassName('items');
const elements3 = document.getElementsByTagName('div');

// Efficient queries
const element4 = document.querySelector('section > .container > .item');

// Most efficient
const container = document.getElementById('container');
const item = container.querySelector('.item');

Modifying the DOM

// Text content
element.textContent = 'Hello'; // Text only
element.innerHTML = '<h1>Hello</h1>'; // HTML

// Attributes
element.setAttribute('data-id', '123');
element.getAttribute('data-id'); // '123'
element.classList.add('active');
element.classList.remove('active');
element.classList.toggle('active');

// Styles
element.style.color = 'red';
element.style.cssText = 'color: red; background: blue;';

// Create and insert
const newEl = document.createElement('div');
newEl.textContent = 'New content';
parent.appendChild(newEl);
parent.insertBefore(newEl, referenceNode);
parent.removeChild(element);

Event Handling

// Add listener
function handleClick(event) {
  console.log(event.type); // 'click'
  console.log(event.target); // Clicked element
}

element.addEventListener('click', handleClick);

// Remove listener
element.removeEventListener('click', handleClick);

// Event delegation
container.addEventListener('click', (event) => {
  if (event.target.matches('.item')) {
    console.log('Item clicked:', event.target);
  }
});

// Common events
element.addEventListener('click', handler);
element.addEventListener('change', handler);
element.addEventListener('input', handler);
element.addEventListener('submit', handler);
element.addEventListener('mouseover', handler);
element.addEventListener('keydown', handler);

Event Object

element.addEventListener('click', (event) => {
  event.preventDefault(); // Stop default action
  event.stopPropagation(); // Stop bubbling

  console.log(event.clientX); // Mouse position
  console.log(event.key); // Key pressed
  console.log(event.target); // Element that triggered
  console.log(event.currentTarget); // Element listener is on
});

Performance Optimization

// ❌ Bad: Many listeners
const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.addEventListener('click', handler);
});

// ✅ Good: Event delegation
const container = document.getElementById('items');
container.addEventListener('click', (event) => {
  if (event.target.matches('.item')) {
    handler.call(event.target, event);
  }
});

// ❌ Bad: Accessing DOM in loop
for (let i = 0; i < 1000; i++) {
  document.body.innerHTML += '<div>' + i + '</div>';
}

// ✅ Good: Batch DOM updates
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = i;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);