Introduction to the Document Object Model
The Document Object Model, or DOM, is the interface that allows you to programmatically access and manipulate the contents of a web page (or document). It provides a structured, object-oriented representation of the individual elements and content in a page with methods for retrieving and setting the properties of those objects. It also provides methods for adding and removing such objects, allowing you to create dynamic content.
The DOM also provides an interface for dealing with events, allowing you to capture and respond to user or browser actions. This feature is briefly covered here but the details are saved for another article. For this one, the discussion will be on the DOM representation of a document and the methods it provides to access those objects.
The Document Tree
When a browser loads a page, it creates a hierarchical representation of its contents which closely resembles its HTML structure. This results in a tree-like organization of nodes, each representing an element, an attribute, content or some other object.
Each of these different object types will have their own unique methods and properties. But each also implements the
Node interface. This is a common set of methods and properties related to the document tree structure. To understand this interface better, take a look a the diagram below which represents a simple node tree.
Node object provides several properties to reflect this structure and allow you to traverse the tree. Here are some relationships using the example above:
Node interface also provides methods for dynamically adding, updating and removing nodes such as:
These will be covered later. But for now let’s look how the document tree reflects the contents of a web page.
[in more details http://www.brainjar.com/dhtml/intro/%5D