The Document Object Model (DOM) is a tree representation of a document on the web. It consists of objects representing logical structure of a document and the content in it. The objects are organized in a hierarchical order. The main objective of DOM is to provide standard API for HTML (and XML) documents so that the documents can be dynamically accessed and manipulated (update the content, structure, and style) easily using any programming language.
Let’s consider a simple web page to understand DOM.
<html>
<head>
<title> DOM Example</title>
</head>
<body>
<h1 id="header"> Hello World! </h1>
<p> Some Text </p>
</body>
</html>
Here is how the DOM of above document would look like:
The document object is the parent of all other objects in the page. An object in DOM can be an element node, a text node or attribute node. Note that browser parse and creates DOM every time a web page is loaded.
JavaScript has some inbuilt methods for accessing and manipulating DOM. In the upcoming article, I will discuss about this in detail. Stay tuned.