Week 6: DOM Manipulation & Events

Learning Objectives: By the end of this week, you will be able to select and modify DOM elements, handle user events, validate forms with JavaScript, and build interactive web page features.

Sessions

Session 1: DOM Manipulation & Events

Selecting elements, modifying content and styles, event handling, form validation, and common interactive patterns

Session 2: Advanced DOM Patterns & Data Persistence

Event delegation, DOM traversal, data attributes, template literals, and localStorage

Topics Covered

The Document Object Model (DOM) and how HTML becomes a tree
Selecting elements with querySelector and querySelectorAll
Modifying text, HTML, classes, styles, and attributes
Creating and removing DOM elements
Event handling with addEventListener
Event propagation, bubbling, and delegation
Form handling and validation
Common patterns: toggle, dark mode, tabs, accordion, mobile nav
Script placement and DOMContentLoaded
DOM traversal (parent, children, siblings, closest)