The Document Object Model (DOM) is the browser’s internal representation of a web page’s structure. The rendering engine builds it while processing HTML, then uses it to determine styling and layout efficiently and to reuse that work as the page changes. section 2.1
The DOM is what makes a page programmable after it loads. JavaScript can wait for user activity or other DOM changes, then update page elements, load data, or trigger navigation. Client-side-rendered applications can edit the DOM directly instead of generating interim HTML. section 2.1 section 2.2
Script timing affects when code can work with the page structure:
- A script marked with defer waits until the DOM is finalized before it runs. section 2.2
- An inline script runs immediately; an external script runs as soon as its referenced resource loads. section 2.2
- Scripts commonly react to scrolling, clicks, and typed text by changing other page elements or starting browser actions. section 2.2
DOM access is useful because a script can change the interface a user sees and interacts with, but it does not grant unrestricted control of the computer. Browser sandboxing limits JavaScript: it cannot access arbitrary disk files, other operating-system processes, arbitrary memory, or arbitrary network locations. Additional browser APIs require permission. section 2.2 section 2.2
A deferred page interaction
A page can load a script with defer so its code runs after the DOM is ready. That code can then wait for a click on a page element and update another element or trigger navigation, rather than trying to act before the page structure has been finalized. section 2.2 section 2.2
