What is the DOM?
Summary
According to MDN Web Docs, "The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document … in memory." Typically, the DOM is used together with JavaScript to modify a webpage dynamically.
DOM Specifications
Summary
Specifications pertaining to the DOM are the responsibility of the World Wide Web Consortium (W3C), which is the primary governing body for specifications involving the World Wide Web. These specifications include two main chapters: one pertaining to the core functionality of the DOM, and one pertaining to the HTML-specific functionality of the DOM.
DOM Implementation in Web Browsers
Summary
According to MDN Web Docs, in terms of the DOM and the CSSOM (CSS Object Model), there are five main steps in the critical rendering path:
- Step 1 of 5: Building the DOM Tree
- According to MDN Web Docs, "The DOM tree describes the content of the document. The
<html>element is the first element and root node of the document tree. The tree reflects the relationships and hierarchies between different elements. Elements nested within other elements are child nodes. The greater the number of DOM nodes, the longer it takes to construct the DOM tree." - Step 2 of 5: Building the CSSOM Tree
- According to MDN Web Docs, "The CSS object model is similar to the DOM. The DOM and CSSOM are both trees. They are independent data structures. The browser converts the CSS rules into a map of styles it can understand and work with. The browser goes through each rule set in the CSS, creating a tree of nodes with parent, child, and sibling relationships based on the CSS selectors."
- Step 3 of 5: Computing the Style
- According to MDN Web Docs, "The third step in the critical rendering path is combining the DOM and CSSOM into a render tree. The computed style tree, or render tree, construction starts with the root of the DOM tree, traversing each visible node."
- Step 4 of 5: Computing the Layout
- According to MDN Web Docs, "The fourth step in the critical rendering path is running layout on the render tree to compute the geometry of each node. 'Layout' is the process by which the dimensions and location of all the nodes in the render tree are determined, plus the determination of the size and position of each object on the page. 'Reflow' is any subsequent size and position determination of any part of the page or the entire document."
- Step 5 of 5: Painting the Nodes to the Screen
- According to MDN Web Docs, "The last step in the critical rendering path is painting the individual nodes to the screen, the first occurrence of which is called the 'first Meaningful Paint'. In the painting or rasterization phase, the browser converts each box calculated in the layout phase to actual pixels on the screen. Painting involves drawing every visual part of an element to the screen, including text, colors, borders, shadows, and replaced elements like buttons and images. The browser needs to do this super quickly."
Grand Summary
This R&D page contains information about the following topics:
- Document Object Model (DOM)
- DOM Specifications
- DOM Implementation in Web Browsers