Review DHTML(msdn):About the DHTML Object Model (1)

The Dynamic HTML (DHTML) Document Object Model (DOM) allows authors direct, programmable access to the individual components of their Web documents, from individual elements to containers. This access, combined with the event model, allows the browser to react to user input, execute scripts on the fly, and display the new content without downloading additional documents from a server.

how to get to an element?

The object model focuses on collections of elements, a hierarchy of groupings that the elements fall into. The most important of these collections are the all collection and the children collection. A DHTML document is a structured arrangement of elements.
Each element object has an all collection that contains all the elements that are beneath that element in the hierarchy, and a children collection that contains only the elements that are direct descendants of that element（for example,there are only two elements that are children of the html tag—head and BODY. The TITLE and script elements are children of the head tag）.an all collection of the document (represented by the document object)contains all the elements on the Web page（The all collection also includes comments (!) and unknown or invalid tags. The purpose is to give you an accurate picture of the content of the document. ）.
You can examine the structural hierarchy of a element even the document using the contains method and the parentElement property(for example,document.body.contains(x)). The contains method returns either true or false to indicate whether one element contains another.The all collection and the children collection for each element can also help determine the document structure.

Events: Bubbling, Canceling, and Handling

event bubbling(冒泡) is provides an efficient model for incorporating event handling into Web documents. if an HTML element generated an event, but no event handler was registered for it, Event bubbling simply passes these unhandled events to the parent element for handling until it is handled, or until it reaches the topmost object, the document object.Event bubbling is useful because it:

• Allows multiple common actions to be handled centrally.
• Reduces the amount of overall code in the Web page.
• Reduces the number of code changes required to update a document.

<!--
   Notice that the onmouseover event for the img object was handled even though it does not
   have an event handler.
   -->
  <DIV id=MyDiv style="background-color: red" onmouseover="alert(window.event.srcElement.id);">
This is some text
<IMG id=MyImg>
</DIV>
<!--
If you were to move your mouse pointer over the img, the order of events would be as follows: 
MyDiv:: onmouseover —— MyDiv:: onmouseout —— MyImg:: onmouseover
-->

Every time an event is fired, a special property on the window object is created. This special property contains the event object. The event object contains context information about the event that just fired, including mouse location, keyboard status, and, most importantly, the source element of the event,which  is accessed using the srcElement property on the window.event object.

All events bubble to their parent element (and, recursively, all the way up to the document object) unless the event is canceled. To cancel an event, you must set the window.event.cancelBubble property to "true" in the event handler.
Canceling event bubbling should not be confused with canceling the default action for the event. (for example, When an anchor is clicked, its default action is to navigate the current window to the URL specified in the src property. )Returning "false" from an event handler, or setting window.event.returnValue to "false", cancels the default action but does not cancel event bubbling unless window.event.cancelBubble is also set. Conversely, canceling an event's bubbling doesn't cancel its default action.

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/doc_object.asp