Lesson 2: DOM Manipulation

In this lesson, you’ll learn how to select, create, and update HTML elements dynamically, and respond to user interactions by handling events. We’ll cover modern APIs like querySelector, addEventListener, and DOM methods for modifying the document structure in real time.

Interacting with the DOM

The Document Object Model (DOM) represents the page as a tree of nodes. You can query elements, listen for events, and modify the page structure or content on the fly. 

// Select elements
const button = document.querySelector('button');
const items = document.querySelectorAll('.item');

// Event handling
button.addEventListener('click', () => {
  items.forEach(item => item.classList.toggle('active'));
});

// Creating elements
const newItem = document.createElement('li');
newItem.textContent = 'New Item';
document.querySelector('ul').appendChild(newItem);

// Updating elements
const heading = document.getElementById('main-heading');
heading.textContent = 'Updated Title';

Key Methods

  • querySelector, querySelectorAll — select elements using CSS selectors
  • getElementById, getElementsByClassName — legacy selection methods
  • addEventListener — attach event listeners to elements
  • createElement, appendChild, removeChild — dynamically add or remove nodes
  • textContent, innerHTML — update element content
← Previous: JS Syntax & ES6+ Next: Fetch API & AJAX →