Docs
README
Module 19: Advanced DOM & Browser APIs
Master advanced DOM manipulation techniques and modern browser APIs for building rich, performant web applications.
╔═══════════════════════════════════════════════════════════════════════════════╗
║ ║
║ ┌─────────────────────────────────────────────────────────────────┐ ║
║ │ ADVANCED DOM & BROWSER APIS │ ║
║ │ │ ║
║ │ "Beyond the Basics - Professional Web Development" │ ║
║ └─────────────────────────────────────────────────────────────────┘ ║
║ ║
║ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ║
║ │ OBSERVE │ │ TRAVERSE │ │ MEASURE │ ║
║ │ ──────── │ │ ──────── │ │ ──────── │ ║
║ │ Mutation │ │ TreeWalker │ │ Performance │ ║
║ │ Intersection│ │ NodeIterator│ │ Timing │ ║
║ │ Resize │ │ Range/Select│ │ Metrics │ ║
║ └──────────────┘ └──────────────┘ └──────────────┘ ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
📋 Module Overview
This module takes you beyond basic DOM manipulation into the realm of professional-grade browser APIs. You'll learn to efficiently observe changes, traverse complex document structures, and measure performance with precision.
┌─────────────────────────────────────────────────────────────────────────────┐
│ WHY ADVANCED DOM APIs? │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Traditional Approach: Modern Observer Pattern: │
│ ───────────────────── ──────────────────────── │
│ │
│ setInterval(() => { const observer = new │
│ checkForChanges(); VS IntersectionObserver(callback); │
│ }, 100); observer.observe(element); │
│ │
│ ❌ Wasteful polling ✅ Event-driven efficiency │
│ ❌ Missed changes ✅ Guaranteed detection │
│ ❌ Battery drain ✅ Browser-optimized │
│ ❌ Performance hit ✅ Async, non-blocking │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
📚 Sections
19.1 Advanced DOM Traversal
┌─────────────────────────────────────────────────────────────────────────────┐
│ DOM TRAVERSAL EVOLUTION │
│ │
│ Basic: Intermediate: Advanced: │
│ ─────── ───────────── ───────── │
│ querySelector() → querySelectorAll() → TreeWalker │
│ getElementById() → getElementsBy* → NodeIterator │
│ parentNode → children → Range API │
│ firstChild → closest() → Selection API │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
- •TreeWalker - Flexible DOM tree navigation with custom filters
- •NodeIterator - Sequential node traversal with filtering
- •Range and Selection APIs - Programmatic text selection and manipulation
- •Shadow DOM basics - Understanding encapsulated DOM structures
19.2 Mutation Observer
┌─────────────────────────────────────────────────────────────────────────────┐
│ MUTATION OBSERVER │
│ │
│ DOM Change Event │
│ │ │
│ ▼ │
│ ┌──────────────┐ │
│ │ Browser │──────► Batches Changes │
│ │ Engine │ │ │
│ └──────────────┘ ▼ │
│ ┌──────────────┐ │
│ │ Mutation │ │
│ │ Records │ │
│ └──────────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────┐ │
│ │ Callback │──────► Your Code │
│ │ (async) │ │
│ └──────────────┘ │
│ │
│ Observes: childList | attributes | characterData | subtree │
└─────────────────────────────────────────────────────────────────────────────┘
- •Observing DOM changes - React to any DOM modification
- •Configuration options - Fine-tune what to observe
- •Performance considerations - Avoiding callback storms
- •Practical use cases - WYSIWYG editors, third-party script monitoring
19.3 Intersection Observer
┌─────────────────────────────────────────────────────────────────────────────┐
│ INTERSECTION OBSERVER │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ VIEWPORT │ │
│ │ │ │
│ │ ┌─────────┐ │ │
│ │ │ Element │ ◄─── isIntersecting: true │ │
│ │ └─────────┘ intersectionRatio: 0.75 │ │
│ │ │ │
│ │- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - │ │
│ │ threshold: [0, 0.25, 0.5, 0.75, 1] │ │
│ │ rootMargin: "100px 0px" │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ ┌─────────┐ │
│ │ │ Element │ ◄─── isIntersecting: false (below viewport) │
│ │ └─────────┘ │
│ │
│ Use Cases: Lazy Loading • Infinite Scroll • Analytics • Animations │
└─────────────────────────────────────────────────────────────────────────────┘
- •Lazy loading images - Load content only when needed
- •Infinite scroll - Dynamically load more content
- •Analytics tracking - Track element visibility
- •Animation triggers - Start animations on scroll
19.4 Resize Observer
┌─────────────────────────────────────────────────────────────────────────────┐
│ RESIZE OBSERVER │
│ │
│ ┌────────────────────────────────────┐ ┌──────────────────────┐ │
│ │ │ │ │ │
│ │ Container Resizes │ ──► │ Element Resizes │ │
│ │ │ │ │ │
│ └────────────────────────────────────┘ └──────────────────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────────┐ │
│ │ ResizeObserver │ │
│ │ Callback Fires │ │
│ └──────────────────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────────┐ │
│ │ contentRect: │ │
│ │ width, height │ │
│ │ top, left │ │
│ └──────────────────────┘ │
│ │
│ Use Cases: Responsive Charts • Container Queries • Flexible Layouts │
└─────────────────────────────────────────────────────────────────────────────┘
- •Element resize detection - Know when any element changes size
- •Responsive components - Build truly responsive widgets
- •Performance optimization - Efficient resize handling
19.5 Performance Observer & APIs
┌─────────────────────────────────────────────────────────────────────────────┐
│ PERFORMANCE MEASUREMENT │
│ │
│ Timeline: │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ navigationStart loadEvent│ │
│ │ │ │ │ │
│ │ ▼ ▼ │ │
│ │ ●───────●───────●───────●───────●───────●───────●─────────● │ │
│ │ │ │ │ │ │ │ │ │ │ │
│ │ redirect fetch connect request response DOM load complete│ │
│ └──────────────────────────────────────────────────────────────────────┘ │
│ │
│ APIs: │
│ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │
│ │ performance │ │ Performance │ │ Resource │ │
│ │ .now() │ │ .mark() │ │ Timing │ │
│ │ .measure() │ │ .getEntries() │ │ Navigation │ │
│ └────────────────┘ └────────────────┘ └────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
- •Performance.now() - High-resolution timestamps
- •Performance marks and measures - Custom timing metrics
- •Navigation timing - Page load performance
- •Resource timing - Individual resource load times
🎯 Learning Objectives
By the end of this module, you will:
┌─────────────────────────────────────────────────────────────────────────────┐
│ SKILL PROGRESSION │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Level 1: Understanding │
│ ├── Explain the Observer pattern and its benefits │
│ ├── Understand when to use each Observer API │
│ └── Know the performance implications of DOM operations │
│ │
│ Level 2: Implementation │
│ ├── Implement lazy loading with IntersectionObserver │
│ ├── Track DOM changes with MutationObserver │
│ ├── Build responsive components with ResizeObserver │
│ └── Create custom performance metrics │
│ │
│ Level 3: Optimization │
│ ├── Optimize observer callbacks for performance │
│ ├── Properly disconnect observers to prevent leaks │
│ └── Combine multiple observers efficiently │
│ │
│ Level 4: Mastery │
│ ├── Build production-grade lazy loading systems │
│ ├── Create real-time performance monitoring dashboards │
│ └── Implement complex infinite scroll with virtual scrolling │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
📋 Prerequisites
- •Module 17: DOM Manipulation - Basic DOM concepts
- •Module 15 & 16: Async JavaScript - Understanding callbacks and async patterns
- •Understanding of browser event loop - How the browser schedules work
🔑 Key Concepts
The Observer Pattern in Browsers
┌─────────────────────────────────────────────────────────────────────────────┐
│ BROWSER OBSERVER PATTERN │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │MutationObserver │ │IntersectionObs. │ │ ResizeObserver │ │
│ ├─────────────────┤ ├─────────────────┤ ├─────────────────┤ │
│ │ WHAT: DOM tree │ │ WHAT: Viewport │ │ WHAT: Element │ │
│ │ changes │ │ crossing │ │ size │ │
│ ├─────────────────┤ ├─────────────────┤ ├─────────────────┤ │
│ │ WHEN: childList │ │ WHEN: scroll, │ │ WHEN: resize, │ │
│ │ attr, charData │ │ resize, layout │ │ layout change │ │
│ ├─────────────────┤ ├─────────────────┤ ├─────────────────┤ │
│ │ WHY: React to │ │ WHY: Lazy load, │ │ WHY: Responsive │ │
│ │ DOM mutations │ │ infinite scrl │ │ components │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │PerformanceObs. │ │ ReportingObs. │ │
│ ├─────────────────┤ ├─────────────────┤ │
│ │ WHAT: Perf │ │ WHAT: Browser │ │
│ │ entries │ │ reports │ │
│ ├─────────────────┤ ├─────────────────┤ │
│ │ WHEN: Timing │ │ WHEN: CSP, dep. │ │
│ │ marks, navs │ │ crashes, etc │ │
│ ├─────────────────┤ ├─────────────────┤ │
│ │ WHY: Measure & │ │ WHY: Error & │ │
│ │ optimize │ │ security mon. │ │
│ └─────────────────┘ └─────────────────┘ │
│ │
│ Common Benefits: │
│ ✅ No polling required ✅ Browser-optimized callbacks │
│ ✅ Async execution ✅ Batched updates │
│ ✅ Memory efficient ✅ Proper cleanup with disconnect() │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Observer API Comparison
┌──────────────────┬───────────────────────┬────────────────────────────────────┐
│ Observer │ What It Observes │ Key Configuration │
├──────────────────┼───────────────────────┼────────────────────────────────────┤
│ Mutation │ DOM tree changes │ childList, attributes, subtree │
│ Intersection │ Element visibility │ threshold, rootMargin, root │
│ Resize │ Element dimensions │ box (content-box, border-box) │
│ Performance │ Performance entries │ entryTypes, buffered │
│ Reporting │ Browser reports │ types (deprecation, csp, crash) │
└──────────────────┴───────────────────────┴────────────────────────────────────┘
💡 Common Patterns
Pattern 1: Basic Observer Setup
// All observers follow this pattern:
const observer = new SomeObserver(callback, options);
observer.observe(target);
// ... later
observer.disconnect();
Pattern 2: Lazy Loading Images
const lazyLoad = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
lazyLoad.unobserve(img);
}
});
});
document
.querySelectorAll('img[data-src]')
.forEach((img) => lazyLoad.observe(img));
Pattern 3: Infinite Scroll
const sentinel = document.querySelector('#load-more-sentinel');
const infiniteScroll = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting) {
loadMoreContent();
}
},
{ rootMargin: '100px' }
);
infiniteScroll.observe(sentinel);
🎯 Practical Applications
┌─────────────────────────────────────────────────────────────────────────────┐
│ REAL-WORLD USE CASES │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ MutationObserver: │
│ ├── WYSIWYG editor undo/redo │
│ ├── Third-party script injection detection │
│ ├── Dynamic content accessibility │
│ └── Form validation on dynamic inputs │
│ │
│ IntersectionObserver: │
│ ├── Image/video lazy loading │
│ ├── Infinite scroll pagination │
│ ├── Scroll-triggered animations │
│ ├── Ad viewability tracking │
│ └── Read progress indicators │
│ │
│ ResizeObserver: │
│ ├── Responsive data visualization │
│ ├── Container query polyfills │
│ ├── Textarea auto-resize │
│ └── Responsive image switching │
│ │
│ Performance APIs: │
│ ├── Real user monitoring (RUM) │
│ ├── Custom performance dashboards │
│ ├── A/B test performance comparison │
│ └── Web vitals tracking │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
⚠️ Common Pitfalls & Best Practices
┌─────────────────────────────────────────────────────────────────────────────┐
│ PITFALLS TO AVOID │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ❌ Memory Leaks ✅ Always Disconnect │
│ ───────────────── ──────────────────── │
│ // Forgot to disconnect // Clean up properly │
│ observer.observe(el); observer.observe(el); │
│ // Element removed, leak! // When done: │
│ observer.disconnect(); │
│ │
│ ❌ Callback Storms ✅ Debounce/Throttle │
│ ───────────────── ─────────────────── │
│ // Every tiny change // Batch processing │
│ callback: (mutations) => { callback: (mutations) => { │
│ expensiveOperation(); requestAnimationFrame(() => │
│ } batchedOperation(mutations) │
│ ); │
│ } │
│ │
│ ❌ Over-Observing ✅ Precise Configuration │
│ ───────────────── ──────────────────────── │
│ { subtree: true, { subtree: false, // Only direct │
│ attributes: true, attributeFilter: ['class'], │
│ characterData: true } childList: true } │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
📚 Section Files
| Section | Topic | Key Files |
|---|---|---|
| 19.1 | Advanced DOM Traversal | 01-tree-walker.js, 02-node-iterator.js, 03-range-api.js |
| 19.2 | Mutation Observer | 01-basic-mutation.js, 02-attribute-observer.js |
| 19.3 | Intersection Observer | 01-lazy-loading.js, 02-infinite-scroll.js |
| 19.4 | Resize Observer | 01-responsive-component.js, 02-chart-resize.js |
| 19.5 | Performance APIs | 01-performance-marks.js, 02-timing-api.js |
🔗 Related Modules
- •Previous: Module 18 - Browser APIs and Storage
- •Next: Module 20 - Testing and Debugging
- •Related: Module 23 - Performance Optimization
📖 Quick Reference Card
┌─────────────────────────────────────────────────────────────────────────────┐
│ OBSERVER QUICK REFERENCE │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ // MutationObserver │
│ const mo = new MutationObserver(callback); │
│ mo.observe(node, { childList: true, subtree: true }); │
│ mo.disconnect(); │
│ │
│ // IntersectionObserver │
│ const io = new IntersectionObserver(callback, { threshold: 0.5 }); │
│ io.observe(element); │
│ io.unobserve(element); │
│ io.disconnect(); │
│ │
│ // ResizeObserver │
│ const ro = new ResizeObserver(callback); │
│ ro.observe(element); │
│ ro.unobserve(element); │
│ ro.disconnect(); │
│ │
│ // PerformanceObserver │
│ const po = new PerformanceObserver(callback); │
│ po.observe({ entryTypes: ['measure', 'mark'] }); │
│ po.disconnect(); │
│ │
└─────────────────────────────────────────────────────────────────────────────┘