Hello,

DOM is a way to represent the webpage in a structured hierarchical way so that it will become easier for programmers and users to glide through the document. With DOM, we can easily access and manipulate tags, IDs, classes, Attributes, or Elements of HTML using commands or methods provided by the Document object. Using DOM, the JavaScript gets access to HTML as well as CSS of the web page and can also add behavior to the HTML elements. so basically Document Object Model is an API that represents and interacts with HTML or XML documents 

Why DOM is required?

HTML is used to structure the web pages and Javascript is used to add behavior to our web pages. When an HTML file is loaded into the browser, the javascript can not understand the HTML document directly. So, a corresponding document is created(DOM). DOM is basically the representation of the same HTML document but in a different format with the use of objects. Javascript interprets DOM easily i.e javascript can not understand the tags.
in HTML document but can understand object h1 in DOM. Now, Javascript can access each of the objects (h1, p, etc) by using different functions. 

To read more about it do a google search and there are lots of forums available with examples. 

• https://www.youtube.com/watch?v=ipkjfvl40s0
• https://www.outsystems.com/forums/discussion/81763/what-is-dom/
• https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

I hope this helps 

Best Regards

Tousif Khan

Document Object model.

"It's how a web browser represents a web page internally."

It's the tree of elements you see on the HTML when you open the elements tab in the developer tools with the inspect, F12.

https://www.codecademy.com/resources/blog/what-is-dom/

You also have this video explaining in the above link I shared

https://youtu.be/kd8zX-66FS0

Kind Regards,

Márcio