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.

Video Explanation

DOM – HTML Page Output

HTML DOM with Page output example
HTML DOM Page Output

HTML Code used to create this DOM can be seen in image below

You can find this code on Github here.

DOM Example with HTML Code
HTML Code of this DOM

Below, I have provided different versions of this DOM Diagram.

Feel free to download and use in your projects.

High Quality DOM

Best High Quality HTML DOM Diagram
Best High Quality HTML DOM Diagram

DOM Black Background

JavaScript DOM

Default image
Navjot Singh Virk
Navjot is a Hobby Blogger from Ireland and loves to create content to help people. He makes time on weekends to work on this blog. And has a full time position at Workday as Technical Product Manager, which he loves and thrives at. His Skills include in-depth knowledge of SEO, Javascript, Advertising, HTML, Java and Product Management. And his other hobbies include Investing, Gardening and playing Table Tennis.