JavaScript & the DOM

The Big Picture

The browser parses your HTML and builds a tree of objects called the DOM. JavaScript reads and modifies this tree — adding elements, changing text, responding to clicks, and fetching data from servers. This is how static pages become interactive applications.

DOM Selection

Before you can change anything on the page, you need to select the element. JavaScript provides several methods, but querySelector and querySelectorAll are all you need.

// Select ONE element (first match)
const title = document.querySelector('h1');
const submitBtn = document.querySelector('#submit-btn');
const firstCard = document.querySelector('.card');
const emailInput = document.querySelector('input[type="email"]');

// Select ALL matching elements (NodeList)
const allCards = document.querySelectorAll('.card');
const allLinks = document.querySelectorAll('nav a');

// Loop through NodeList
allCards.forEach(function(card) {
  console.log(card.textContent);
});

// Convert to array for .map(), .filter(), etc.
const cardTexts = Array.from(allCards).map(function(card) {
  return card.textContent;
});

DOM Manipulation

Once you have an element, you can read its properties, change its content, modify its attributes, or add/remove it from the page.

// Change text content (safe — escapes HTML)
const heading = document.querySelector('h1');
heading.textContent = 'New Title';

// Change HTML content (careful — can inject HTML)
const container = document.querySelector('.content');
container.innerHTML = '<p>Updated <strong>content</strong></p>';

// Modify CSS classes
const card = document.querySelector('.card');
card.classList.add('active');
card.classList.remove('loading');
card.classList.toggle('expanded');

// Modify attributes
const link = document.querySelector('a');
link.setAttribute('href', '/new-page');
link.getAttribute('data-id');

// Modify inline styles (prefer classes instead)
card.style.display = 'none';

// Create new elements
const newCard = document.createElement('article');
newCard.className = 'card';
newCard.innerHTML = `
  <h3>New Card</h3>
  <p>Dynamically created content</p>
`;

// Add to the page
document.querySelector('.card-grid').appendChild(newCard);

// Insert before a specific element
const grid = document.querySelector('.card-grid');
const firstChild = grid.firstElementChild;
grid.insertBefore(newCard, firstChild);

// Remove from the page
const oldCard = document.querySelector('.card.deprecated');
oldCard.remove();

Event Handling

Events are the bridge between users and your code. The browser fires events for clicks, key presses, form submissions, scroll, resize, and dozens more.

// Basic click handler
const button = document.querySelector('#save-btn');
button.addEventListener('click', function(event) {
  console.log('Saved!');
  console.log(event.target); // the element that was clicked
});

// Form submission — ALWAYS prevent default
const form = document.querySelector('#login-form');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // Stop the page from reloading

  const formData = new FormData(form);
  const email = formData.get('email');
  const password = formData.get('password');

  loginUser(email, password);
});

// Keyboard events
document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') closeModal();
  if (event.key === '/' && !event.ctrlKey) focusSearch();
});

// Input events (real-time search)
const searchInput = document.querySelector('#search');
searchInput.addEventListener('input', function(event) {
  const query = event.target.value;
  filterResults(query);
});

Event Delegation

Instead of attaching handlers to every element, attach one handler to a parent and let events bubble up. This is more efficient and works for dynamically added elements.

// Bad: attaching to every card (slow, doesn't work for new cards)
document.querySelectorAll('.card').forEach(function(card) {
  card.addEventListener('click', handleCardClick);
});

// Good: event delegation on the parent
document.querySelector('.card-grid').addEventListener('click', function(event) {
  const card = event.target.closest('.card');
  if (!card) return; // clicked outside a card

  const cardId = card.dataset.id;
  navigateToCard(cardId);
});

Async JavaScript

JavaScript is single-threaded but handles async operations through the event loop. Promises and async/await let you write async code that reads like synchronous code.

// Promises (the foundation)
fetch('https://api.example.com/users')
  .then(function(response) {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.json();
  })
  .then(function(users) {
    console.log(users);
  })
  .catch(function(error) {
    console.error('Fetch failed:', error);
  });

// async/await (cleaner syntax, same thing under the hood)
async function getUsers() {
  try {
    const response = await fetch('https://api.example.com/users');
    if (!response.ok) throw new Error('Network response was not ok');
    const users = await response.json();
    return users;
  } catch (error) {
    console.error('Fetch failed:', error);
    return [];
  }
}

// Parallel requests with Promise.all
async function getDashboardData() {
  const [users, posts, stats] = await Promise.all([
    fetch('/api/users').then(r => r.json()),
    fetch('/api/posts').then(r => r.json()),
    fetch('/api/stats').then(r => r.json())
  ]);

  renderDashboard(users, posts, stats);
}

Essential ES6+ Features

Modern JavaScript (ES6 and beyond) introduced features that make code cleaner and more powerful. Every modern browser supports these.

// Template literals (string interpolation)
const name = 'Alice';
const greeting = `Hello, ${name}! You have ${inbox.length} messages.`;

// Destructuring (extract values from objects/arrays)
const { title, author, year } = book;
const [first, second, ...rest] = numbers;

// Spread operator (copy/merge)
const newArr = [...oldArr, newItem];
const newObj = { ...oldObj, updated: true };

// Optional chaining (safe property access)
const city = user?.address?.city; // undefined if any step is null/undefined

// Nullish coalescing (default values)
const theme = userPreference ?? 'light'; // only falls back on null/undefined

// Array methods
const adults = users.filter(u => u.age >= 18);
const names = users.map(u => u.name);
const total = prices.reduce((sum, p) => sum + p, 0);
const admin = users.find(u => u.role === 'admin');

// Modules (import/export)
// math.js
export function add(a, b) { return a + b; }
export const PI = 3.14159;

// app.js
import { add, PI } from './math.js';

Local Storage

The browser provides localStorage for persisting key-value data across sessions. Perfect for user preferences, theme choices, and cached data.

// Store data (strings only — serialize objects with JSON)
localStorage.setItem('theme', 'dark');
localStorage.setItem('user', JSON.stringify({ name: 'Alice', role: 'admin' }));

// Read data
const theme = localStorage.getItem('theme'); // 'dark'
const user = JSON.parse(localStorage.getItem('user'));

// Remove data
localStorage.removeItem('theme');

// Clear all
localStorage.clear();

// Check if key exists
if (localStorage.getItem('onboarded') === null) {
  showOnboarding();
}

Interview Questions

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}
const counter = createCounter();
counter(); // 1
counter(); // 2