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.
DeveloperXon 
Leave a Reply