Document Object Model
The Document Object Model (DOM) is a standard programming interface that represents a document as a structured tree of objects and provides ways to access and modify its content and structure.
Build a Frontend Web Framework (From Scratch)
The standardized tree-like representation of an HTML or XML document that scripts and browser APIs can inspect and modify.
- How it is used
- Serves as the browser-managed view that application code or a framework changes when state changes.
- How deep it goes
- Defines the DOM as a tree and works through direct element operations, while deferring browser rendering internals to an external resource.
- Examples
- Uses a to-do application to create, replace, and remove nodes, and compares virtual trees to identify changes.
- What you can do after
- Build it from scratch: render and update a small to-do interface with browser DOM operations and event listeners.
Read how Build a Frontend Web Framework (From Scratch) explains Document Object Model →
D3.js in Action, Third Edition
The Document Object Model is a programming interface that represents a web document as a structured tree of objects and elements.
- How it is used
- Supports web-page rendering and D3 visualization by representing, selecting, creating, and modifying document elements.
- How deep it goes
- Explains tree structure, element state, SVG painting order, and core D3 operations, then defers framework integration trade-offs to strategies.
- Examples
- Uses a nested HTML file, SVG shapes, CSS-style selectors, and framework-built scatterplots to illustrate document structure and control.
- What you can do after
- Apply D3 selections, append elements, and modify attributes and styles to build HTML or SVG visualizations.
Read how D3.js in Action, Third Edition explains Document Object Model →
Learn Go with Pocket-Sized Projects
The DOM, or Document Object Model, is a programming interface representing an HTML or XML document as an object tree that scripts can inspect and modify.
- How it is used
- Uses the DOM to build an interactive HTML multiplication quiz with Go running through WebAssembly.
- How deep it goes
- Explains element lookup, property reads and writes, callbacks, validation, and input resetting, while deferring broader browser internals.
- Examples
- Demonstrates operand spans, numeric form input, alert feedback, answer validation, and generated multiplication exercises.
- What you can do after
- Build interactive browser pages by reading and changing HTML elements from Go through WebAssembly.
Read how Learn Go with Pocket-Sized Projects explains Document Object Model →
Web Components in Action
The standardized object representation of an HTML or XML document that scripts and browsers can inspect and manipulate.
- How it is used
- Uses the DOM to distinguish creating a custom element from connecting it to the page.
- How deep it goes
- Explains creation, attachment, detached containers, and constructor limitations, but stops short of general DOM traversal.
- Examples
- Uses browser-console commands, custom-element listings, detached containers, and body append operations.
- What you can do after
- Apply via browser JavaScript by creating elements, inserting them, and predicting when connectedCallback runs.
Read how Web Components in Action explains Document Object Model →
Modern Angular
The DOM is the browser's in-memory tree representation of a document and its elements.
- How it is used
- Guides Angular’s translation of declarative templates into browser-rendering commands while exposing SSR constraints around direct DOM access.
- How deep it goes
- Traces JIT and AOT compilation plus render-phase DOM scheduling, but stops short of explaining generated JavaScript commands.
- Examples
- Uses routed standalone templates, an image and links, plus a scroll-to-top component that reads window afterNextRender.
- What you can do after
- Diagnose SSR failures from browser-only DOM APIs and schedule DOM reads or writes with Angular render callbacks.
Grokking Web Application Security
The Document Object Model is a programming interface representing an HTML or XML document as a tree of objects that scripts can inspect and modify.
- How it is used
- Supports browser rendering and client-side page updates by representing web-page structure for layout, styling, and JavaScript changes.
- How deep it goes
- Explains the DOM’s rendering role, script timing, and update behavior without detailing DOM APIs or object internals.
- Examples
- Uses deferred, inline, and external scripts plus scrolling, clicks, and text entry as DOM interaction examples.
- What you can do after
- Evaluate/understand when scripts can act on a page and which system-level actions browser sandboxing blocks.
Read how Grokking Web Application Security explains Document Object Model →
.NET in Action, Second Edition
A DOM is an in-memory tree representation of structured document data whose nodes can be inspected and modified.
- How it is used
- Uses an in-memory JSON representation to inspect and filter complete documents from file or network streams.
- How deep it goes
- Explains whole-document parsing, traversal, property access, and disposal, but defers alternative parsing use cases and serializer details.
- Examples
- Demonstrates filtering a jokes array by category while reading from a stream and writing to a file or console.
- What you can do after
- Apply it via JsonDocument to parse, traverse, inspect, filter, and dispose of complete JSON documents.
Read how .NET in Action, Second Edition explains Document Object Model →
Pro Angular 16
The DOM API is the browser programming interface for creating, reading, and modifying nodes in a document object model.
- How it is used
- Explains how browsers represent HTML and how Angular-driven changes reach displayed client-side content.
- How deep it goes
- Defines the live object model and property binding, but stops short of detailed DOM API interrogation or node-creation procedures.
- Examples
- Uses document structure, an input value property, an Angular property-binding listing, and rendered-content tests.
- What you can do after
- Evaluate how HTML elements become JavaScript objects and apply Angular property binding to update rendered element state.
Related concepts
- virtual DOMcontrasts with · A virtual DOM is an in-memory user-interface tree that frameworks compare or process to determine updates to the rendered DOM.
- reconciliationused by · Reconciliation is the process of comparing related states, records, or outputs to identify differences and, when needed, resolve them or bring them into agreement.
- browserproduced by · A web browser is software that retrieves, interprets, and renders web resources, executes supported web content, and enables interaction with web pages and applications.
- script elementused by · A script element is an HTML element that embeds executable script code or references an external script resource.
- screen readerused by · A screen reader is assistive software that presents digital content and interface information through synthesized speech, refreshable braille, or other nonvisual output.
- JavaScriptused by · JavaScript is a high-level, dynamically typed, multi-paradigm programming language standardized as ECMAScript and used for web and general-purpose programming.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.