The Document Object Model (DOM) is the browser’s programming interface for a web document. It represents HTML as a tree of nested nodes: parents contain children, and related elements can be siblings. The visible page comes from the elements inside the body. section 1.2.1
Each DOM element combines styles, attributes, and properties. Styles control appearance, attributes include identifiers such as classes and IDs, and properties represent changing state such as whether a checkbox is checked. In SVG, attributes also define shape position, size, and proportions. section 1.2.1
A small document tree
An HTML document can contain html as the root, head and body as children, and h1, div, and p elements nested inside body. For SVG, the DOM order also controls drawing order: later elements are painted on top of earlier ones. section 1.2.1
D3 uses the DOM as the working surface for visualizations. d3.select() finds the first matching element, d3.selectAll() finds every match, append() adds children, and attr() and style() modify presentation. Their selectors use familiar CSS tag, class, and ID syntax. section 2.0 section 2.7
When a frontend framework also controls the DOM, unrestricted D3 manipulation can cause conflicts. D3 can control an isolated region, act only as a utility library for calculations, or share control selectively through a hybrid approach. section 8.1 section 8.6
