DOM manipulation is the programmatic creation, inspection, or modification of a browser document. In vanilla JavaScript applications, the Document API performs work that frameworks commonly handle. section 2.0
The technique places several responsibilities directly in application code:
- Create DOM elements programmatically and assemble the browser document with JavaScript and HTML. section 2.0
- Update the DOM whenever an event changes application state, keeping the visible document aligned with that state. section 2.3
- Describe each update imperatively, specifying the individual steps required by the Document API. section 2.3 section 3.0
The practical cost appears when application logic and DOM manipulation grow together. Each user event can require both business logic and verbose instructions for changing the document, producing a hard-to-maintain mix of abstraction levels. section 2.3 section 3.0
Framework-free application
A small frontend application can be written entirely with vanilla JavaScript and HTML: event-driven application logic changes state, and explicit Document API operations update the browser document. Repeating those updates for every interaction demonstrates the problem that frontend frameworks solve. section 2.0 section 2.3
