prev next

Document Object Model (DOM)

The Model
When your browser reads a page from a website or your local computer, it parses the page and builds a parse tree. The Document Object Model is an interface to that tree with bindings for scripts and WinForm applications. The DOM allows you to access and modify all of the elements on the current page.

Elements of the Document Object Model

Objects in the model are shown in blue. The window itself, the document body, and child elements of the body are all objects with methods, properties, and events.
Collections are shown in yellow. The all collection has a member for each element on the current page. Collections are indexed in one of two ways.

With a numeric value, e.g.:
document.body.all[1].innerText
is the text of the second body element. For this page the preceding expression evaluates to:
With an id string the collection will return all of the elements with that id. If there is only one use this:
document.body.all("anItem").innerText
On this page it evaluates to:

Elements of the Document Object Model
	Objects in the model are shown in blue. The window itself, the document body, and child elements of the body are all objects with methods, properties, and events. Collections are shown in yellow. The all collection has a member for each element on the current page. Collections are indexed in one of two ways. With a numeric value, e.g.: document.body.all[1].innerText is the text of the second body element. For this page the preceding expression evaluates to: With an id string the collection will return all of the elements with that id. If there is only one use this: document.body.all("anItem").innerText On this page it evaluates to:

This page uses JavaScript to access the DOM and evaluate the expressions discussed above. You are invited to view the source to see how that is done.

Using the Window object
1. Open another window like this:
2. Find current location like this:
Using the Navigator object
1. Get browser name like this:
2. Find platform type like this:
Using the Event object
1. Go to Events Information:
2. Get the element clicked like this:
  You can also click around the (hidden)
  table, above, to find its elements.
Using the Body object
1. Get document.body.all[4].tagname:
2. Get document.body.all[4].innerText:

The w3schools website is a great source of information about the Document Object Model with tutorials and lots of examples. For the most detailed reference information, you will want to visit MSDN Library.

As a final example of interactions with the DOM, we will display all of the tags found on this page:

prev next