Document Object Model

DOM is a way of accessing data either through a XML file or through a screen. We can access each and every value present on the screen using Document Object Model. Its exactly the same way in which each and every content of a house can be associated with some of its members in a way or other like Mr X's car, X's pen, X's so and so.

If you like technical (and often arcane) structural details, check out the Document Object Model Core ; for info on HTML tags, their attributes, and different methods for specific HTML tags, there's Document Object Model HTML.

Hierarchical Structure of DOM

The DOM is based on a well-defined hierarchical structure. At the top of the tree, we have document. Everything including html tag etc comes below it. Tags like head, li, p, td etc. comes beneath it. Lets try to understand it with a simple family tree structure.

Example explaining DOM hierarchy

Suppose your parents name is Mr. Bean and your siblings are Mary and Dolly and your children are Nancy and John.

For the time being , keep in mind that in order to call an object on your documnet whose id is myDiv is document.getElementById('myDiv');

Coming back to our family example, suppose we wanna talk to you , we can do so in the following way :-


If we wanna talk to your father, we can do say by referring to your parentNode

Your Parents

For accessing your siblings say Mary and Dolly, we can use this :-


For accessing your children , we can use this :-


In the same way , there is a hierarchy defined in the HTML document also. Lets apply the same on a HTML document.

Member Login

Member Login

Not a Member? Sign Up!

Login to comment

Be the first to comment on this topic


Continue >>>