What is DOM ? Document Object Model. HTML DOM Diagram and Explanation

Опубликовано: 08 Сентябрь 2019
на канале: Mr. Virk Media

28,652

264

In this video we will cover - What is DOM ? HTML DOM Diagram and Explanation
Article: https://mrvirk.com/html-dom-diagram-a...

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
HTML DOM Tree 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

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

Head
Body
Both Head and Body then have their individual child elements –

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

And, Body Element has 3 child elements named –

Heading1 which has an attribute that align the h1 element to the center and a text assigned to it – “I am a Heading”.
Paragraph which has a style attribute which sets red as its background color.
Image 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.