When the browser renders HTML and CSS into the document object it first creates the DOM (Document Object Model) and CSSOM (CSS Object Model) Trees. The DOM Tree contains the document object nodes that match up with HTML elements, while the CSSOM Tree contains the nodes that match up with CSS selectors.
Next, the browser matches the nodes from both trees to their corresponding HTML elements and CSS selectors to make up what is called the Render Tree. This tree does NOT contain hidden elements or elements in the document head. The browser then uses the Render Tree to create the image that is seen on the screen.
Nodes are parts of the document object, with the “root node” being the document object itself. Other nodes are the Element Nodes, which are HTML elements, the Attribute Nodes, which are HTML attributes, Text Nodes, which are the texts inside of the HTML elements, and Comment Nodes, which are the HTML document comments.
The structure of the document object model is known as a tree structure as it begins with a single root (the document Object), which contains multiple nodes (such as element nodes of paragraphs or headers or div-sections), and these, in turn, can contains several child nodes themselves. Much like a tree, if a section is cut out, any contained sections are as well.