DOM

Ever wondered how the websites that you visit, work? Like other programming languages such as Python, C, and C++, even HTML has a pre-defined structure which is usually not visible to us. Our websites use the concepts of DOM in order to create a structure.

DOM stands for Document Object Model. One can think of an HTML DOM as a tree structure consisting of nodes and objects. The browser creates a DOM of the web page when it is loaded.

graphical representation of the DOM (source: w3c)

Talking specifically, DOM acts as a programming interface for HTML and XML documents (known as unstructured data). It represents the page so that programs can change the document structure, style, and content. A well designed and developed web page is actually a document that can either be viewed in a browser or as an HTML source. But, it is the same document in both cases. DOM is responsible for representing that same document so that it can be manipulated. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

As per W3C (World Wide Web Consortium) standards, DOM is separated into 3 different parts:

• Core DOM: Defines the event and document model for all document types

Core DOM Architecture (source: w3c)

• HTML DOM: Defines the event and document model for HTML documents

HTML DOM Architecture (source: w3schools)

• XML DOM: Defines the event and document model for XML documents

XML DOM Architecture (source: w3schools)