Internet Programming Laboratory
Unit 6: JavaScript DOM & BOM
DOM Tree, Selection, Manipulation, classList, Event Bubbling & Capturing, DOM Traversal, BOM (window, history, location, navigator), setTimeout, setInterval, IntersectionObserver, MutationObserver — bridging JavaScript to the visible page.
🏢 Industry-Aligned | 📝 15 MCQs (Bloom's Taxonomy) | 🔬 5 Lab Exercises | 💼 Interview Prep
Why This Chapter Matters in 2025
You already know JavaScript syntax — variables, functions, loops, promises. But here's the honest truth: JavaScript without DOM access is a brain without a body. It can think, but it can't do anything the user can see. The DOM (Document Object Model) is the bridge between your JavaScript code and the actual pixels on screen.
Every single time you've seen a website update without a full page reload — a notification badge appearing on Flipkart, a cart total recalculating on Swiggy, a stock price flashing green on Zerodha — that's JavaScript talking to the DOM. And the BOM (Browser Object Model) is what gives you access to the browser itself: the URL bar, navigation history, screen dimensions, and timers.
🏢 Industry Connection — DOM Powers Every Indian Super-App
Flipkart — When you add an item to cart, JavaScript calls createElement() to build a new cart-item card, appendChild() to inject it into the sidebar, and classList.add('slide-in') to animate it. Zero page reloads.
Swiggy — Infinite scroll? That's IntersectionObserver watching a sentinel element. When it enters the viewport, fetch() loads the next batch of restaurants and insertAdjacentHTML() injects the cards.
Zerodha (Kite) — Stock prices update 5 times per second via WebSocket. Each update uses querySelector() to find the price cell, textContent to write the new value, and classList.toggle() to flash green or red.
CRED — Those buttery smooth card flip animations? classList.add('flipped') triggers CSS transitions. The classList API is the secret weapon behind every modern animation library.
Prerequisite Checklist ✅
- ✅ Completed Unit 4 (JavaScript Core — variables, functions, objects, async/await)
- ✅ Completed Unit 5 (or at least know basic HTML structure — you need a page to manipulate)
- ✅ Chrome DevTools — you'll live in the Elements and Console tabs (F12)
- ✅ Understand that HTML is a tree of nested elements — the DOM formalises this
Learning Outcomes — Bloom's Taxonomy
| Bloom's Level | Learning Outcome |
|---|---|
| L1 — Remember | Recall DOM selection methods (getElementById, querySelector, querySelectorAll) and BOM objects (window, history, location, navigator) |
| L2 — Understand | Explain the difference between event bubbling and capturing, between innerHTML and textContent, and between NodeList and HTMLCollection |
| L3 — Apply | Use DOM manipulation methods (createElement, appendChild, removeChild, insertAdjacentHTML) to dynamically build UI components without page reload |
| L4 — Analyze | Debug event propagation issues using DevTools, trace DOM traversal paths, and diagnose performance problems caused by excessive DOM mutations |
| L5 — Evaluate | Compare IntersectionObserver vs scroll-event-based approaches for lazy loading and justify the performance benefits of the Observer pattern |
| L6 — Create | Build a complete interactive product listing page with dynamic card generation, infinite scroll, classList-driven animations, and SPA-style navigation using the History API |