HTML DOM APIs

JavaScript alone knows nothing about pages. Every time a script reads a form field, adds a list item, reacts to a click or measures an element, it goes through the Document Object Model: the tree of objects the browser builds from your HTML.

This chapter starts with what the DOM is and what a change costs in rendering work, then tours the window object, node and element interfaces, HTML element objects, tree walkers and observers, and the event system.

The final sections cover patterns that keep DOM code fast and safe from cross-site scripting, how React 7,897 , Vue 5,482 and Solid 269,718 update the DOM for you, and where jQuery 561 , Alpine.js 208,904 and htmx 79,053 still fit.

What you will learn:

• How the DOM tree, its interface hierarchy and the rendering pipeline relate

• Using window, document, nodes, elements and HTML element objects

• Traversing, observing and changing the tree efficiently

• Handling, dispatching and customizing events

• DOM performance patterns, XSS defense, jQuery and lightweight libraries

Sections

• The Document Object Model
  • What the DOM Is
  • The Interface Hierarchy
  • How the DOM Is Rendered
  • Reflow, Repaint and Batching
• The Window Object
  • Properties and Methods
  • Popping Up Dialog Boxes
  • Managing Windows and Frames
  • Checking Visibility of Bars
  • Defining Custom HTML Elements
  • Using Location
  • Accessing History
  • Working with CSS
  • Matching Media Queries
  • requestAnimationFrame
  • Working on Idle Time
  • Extracting Bitmaps
  • Debugging with Console
  • Printing on Paper
• Data Type Objects
  • Data Type Reference
  • Selecting Elements
  • Processing Attributes
  • Processing Classes
  • Timing Media Clips
  • Range and Selection
  • Handling Exceptions
  • Implementing a New Document
• Event Target Objects
  • EventTarget Reference
  • Parsing HTML Strings
  • Traversing and Comparing Nodes
  • Adding and Removing Nodes
  • Copying and Moving Nodes
  • Normalizing Nodes
  • Knowing the Bounding Rectangle
  • Getting Elements at a Point
  • Attaching Shadow DOM
  • Loading a Font
• HTMLElement Objects
  • HTMLElement Reference
  • Inserting Tabular Elements
  • Getting Options
  • Validating Form Input
  • Playing Audio and Video
• Processor Objects
  • Processor Reference
  • Iterating with NodeIterator
  • Walking with TreeWalker
  • MutationObserver
  • URLSearchParams
  • Encoding Strings
  • Creating Object URLs
• The Event Object
  • Event Object Reference
  • Binding Event Handlers
  • Removing Event Handlers
  • Handling Input Events
  • Handling Document Events
  • Handling Resource Events
  • Handling Script Events
  • Handling Browser Events
  • Handling Smartphone Events
  • Simulating Clicks
  • Dispatching Events
  • Customizing Events
  • Preventing Default Behaviour
  • Stopping Event Propagation
  • Clicked Element's id
• DOM Patterns and Performance
  • Delegation and Batching
  • Debounce and Throttle
  • Virtual DOM and Signals
  • Sanitization and XSS Defence
• jQuery
  • Why jQuery Matters
  • Element Selection
  • DOM Manipulation
  • Attributes and Dimensions
  • Animation Effects
  • jQuery Events
  • Callbacks and Deferred Objects
  • AJAX
  • Global $ Functions
  • jQuery to Vanilla JS
• Lightweight DOM Libraries