DOM Tree

The structure of the DOM is tree-shaped because, typically, it took form with a single parent-object (a stem) that branches out into several child elements (branches),  each of which may have leaves. In the case of HTML documents, the stem is the root <html> element, the branches” are the nested elements, and the “leaves” are the content.

How DOM works? 

DOM is a way to convert the structure and content of the static HTML document into an object model that can be used by various programs.

In internet browsers, it works as following: 

  1. The browser retrieves the HTML from the server
  2. The parser analyzes the HTML structure and creates a DOM model of it. 
  3. Based on the model, the browser renders the page

Also, today's browsers use a DOM API that enables interaction with the DOM elements, making the websites dynamic.