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 :-
You
document.getElementById("You")
If we wanna talk to your father, we can do say by referring to your parentNode
Your Parents
document.getElementById("You").parentNode
For accessing your siblings say Mary and Dolly, we can use this :-
Mary
document.getElementById("You").previousSibling
Dolly
document.getElementById("You").nextSibling
For accessing your children , we can use this :-
Nancy
document.getElementById("You").childNodes.item(0)
document.getElementById("You").firstChild
John
document.getElementById("You").childNodes.item(1)
document.getElementById("You").lastChild
In the same way , there is a hierarchy defined in the HTML document also. Lets apply the same on a HTML document.