Editing Document Object Model (section)

==Applications==
===Web browsers===
To [[Web browser engine|render]] a document such as a HTML page, most web browsers use an internal model similar to the DOM. The nodes of every document are organized in a [[tree structure]], called the ''DOM tree'', with the topmost node named as "Document object". When an HTML page is rendered in browsers, the browser downloads the HTML into local memory and automatically parses it to display the page on screen. However, the DOM does not necessarily need to be represented as a tree,<ref name="Level3-Introduction">{{cite web|url=https://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/introduction.html|title=What is the Document Object Model?|access-date=2021-09-12|publisher=W3C|quote=However, the DOM does not specify that documents must be implemented as a tree or a grove, nor does it specify how the relationships among objects be implemented. The DOM is a logical model that may be implemented in any convenient manner.}}</ref> and some browsers have used other internal models.<ref name="Modernizing-Dom">{{cite web|url=https://blogs.windows.com/msedgedev/2017/04/19/modernizing-dom-tree-microsoft-edge/|title=Modernizing the DOM tree in Microsoft Edge|date=19 April 2017|access-date=2021-09-12|publisher=Microsoft}}</ref>

===JavaScript===
When a web page is loaded, the browser creates a Document Object Model of the page, which is an object oriented representation of an HTML document that acts as an interface between JavaScript and the document itself. This allows the creation of [[dynamic web page]]s,<ref>{{cite web|url=https://www.w3schools.com/js/js_htmldom.asp|title=JavaScript HTML DOM|access-date=23 September 2016}}</ref> because within a page JavaScript can:

* add, change, and remove any of the HTML elements and attributes
* change any of the CSS styles
* react to all the existing events
* create new events