Document Object Model

What Is DOM

If you think about it, how is a programming language going to be able to access the HTML elements?

The answer is the DOM, the Document Object Model.

When the browser reads an HTML element, it converts it to its object representation through a series of steps. And it does this for all the elements and their children.

Look at the following code:

<h1 id = "title">This is not tough!</h1>
<p>It's really easy.</p>

This is how the browser sees it:

h1 = {
    id: "title",
    innerText: "This is not tough!",
    tagName: 'H1'

p = {
    innerText: "It's really easy.",
    tagName: 'P'

There are more properties that get associated with each object. This is only a representation.

In the example given below, focus on the output in the console:

The console output shows that can get some idea as to how the browser views the HTML elements.

πŸ‘‰πŸ‘‰πŸ‘‰Need the console output here.πŸ‘ˆπŸ‘ˆπŸ‘ˆ