What is Document Object Model?
Basically, Document Object Model provides you a standard to control the structure of the document. Therefore, you can access different elements of the document as well as manipulate them.
In fact, the standard provides a core model for all document types called the DOM Core. However, HTML DOM extends it and provides HTML-specific interfaces. There are multiple APIs that form the Core DOM. Henceforth, we discuss the HTML DOM that describes an HTML Document.
The Document Object Model represents a document as a tree structure. Also, each node of the tree is an object that represents a specific element of the document. Yet, it is a logical structure only, since no relationship has been specified among objects by the DOM.
Example of HTML Document Object Model
As an illustration, consider the following HTML document. As can be seen, the corresponding DOM has html as the root object and the next level objects are head and body. Further, these objects enclose the next level objects such as h1 and table.
<!DOCTYPE html> <html> <head> <title>A DOM Example</title> </head> <body> <center><h1> DOM Example</h1></center> <div> <h2>An HTML Table</h2> <table> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </div> </body> </html>
The following image shows the corresponding HTML DOM of the above document.