HTML DOM Diagram, Coded Example and Explanation

In this article, we will cover HTML DOM’s core basics and original diagrams. If you need to use these diagrams in your projects – online or offline. You will need to reference this page as the source of the diagram.

Hi Welcome to the HTML DOM tutorial on Mr. Virk Media. I am your host Navjot Singh Virk

What is DOM ?

DOM stands for Document Object Model.

When a web page is loaded in the browser (example: Google Chrome, Firefox etc), the browser creates a Document Object Model of the page.

The HTML DOM model is constructed as a tree of Objects. It helps define –

HTML elements as Objects
Events for HTML elements
Properties for HTML elements
Methods for HTML elements

DOM provides an API (programming interface) for JavaScript, using which you can manipulate the DOM, helping create dynamic HTML.

Using DOM API, JavaScript can add, change or remove –

HTML elements from the DOM
HTML attributes
CSS styles
HTML events
And react to HTML events

In the DOM below, you can see – How a web page loads in a browser ?

HTML DOM Diagram and its Explanation

JavaScript HTML DOM Diagram — HTML DOM Tree Diagram

Looking at the DOM Diagram above, you can see – What DOM looks like ? Lets, also understand its tree structure –

DOM Starts at the document object, which is provided by the Browser Window object. This is the container in which a web page loads in.

Then, the page has a Root Element which is HTML <html>

This HTML element then have child elements in this example the HTML element contains 2 child elements which are –

Head <head>
Body <body>

Both Head and Body then have their individual child elements –

Head has a child named Title <title> that has text assigned to it – “I am a Page Title”

And, Body Element has 3 child elements named –

Heading1 <h1> which has an attribute that align the h1 element to the center and a text assigned to it – “I am a Heading”
Paragraph <p> which has a style attribute which sets red as its background color
Image <img> which has a src (source) attribute that allows to define path/source of the image file

The output of this DOM will be a HTML page with a title, heading, paragraph and an image.