The DOM

When a browser loads HTML it builds a tree: the document contains html, which contains head and body, which contain headings, paragraphs and buttons, each a node with attributes, styles and text. JavaScript works on that tree through the DOM API, finding elements with calls such as document.querySelector, changing their text or classes, adding and removing them, and listening for events such as clicks.

Each change can make the browser recalculate styles and layout and repaint, which gets slow if done carelessly thousands of times. Frameworks manage this for you: React compares a 'virtual DOM' and applies only the differences, while Svelte compiles to direct, targeted updates. Screen readers work from an accessibility tree built from the DOM, and automated tests query it, so a well-structured DOM helps both.