What is the document object model (DOM)?

Note: This post assumes you are familiar with object-oriented programming concepts.

Hey there citizens of the internet. If you are new to the Web development world you would have come across the term DOM(Document object world). Wondering what is DOM? So, let’s explore what is the Document object model.

What is the Document Object Model?

As the name suggests, DOM represents each element of HTML as an object. Whenever a webpage gets loaded, the browser creates a document object model of the page which means, for each tag in the loaded HTML page there is an object created by the browser.

Let’s see an example.

<!DOCTYPE html>
<html>
  <body>
    <h2>This is heading</h2>

    <p id="demo"></p>

    <script>
       document.getElementById("demo").innerHTML = "Hello World!";
    </script>

  </body>
</html>


In this example, we are changing the content of the <p> element with id=” demo”.

In the above example, getElementById is a method and innerHTML is a property.

Okay, so now I understand that DOM represents each element of an HTML document as an object. But, wait. Why did DOM come into existence?

You know these tags(<p></p>) of HTML are a problem for javascript. Give tag to javascript and javascript will be like hey stop! What are you doing man? I don’t understand these tags, give me the objects.

Exactly, you understood it right. Javascript does not understand HTML tags. Javascript works with objects only. That is why DOM came into existence. So that javascript can manipulate the document.

Now you know what DOM is.

So this is the end here.

Goodbye.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: