Accessing Page Elements through the DOM

The DOM interprets each constitutive element of a page as an object. For instance, all the following page elements are DOM objects:

• images;
  
  
• tables;
  
  
• paragraphs;
  
  
• hyperlinks;
  
  
• titles.
  
  

By assigning names to each of your object elements, you can directly access and manipulate them as you wish with JavaScript. Imagine that they are hanging on a tree. You just need to position yourself on the right branch, look at the object name and, if it's the right one, change it according to your needs.

Since each element is directly accessible, the changes are immediate. There is no need to reload the page, modifications are applied immediately. The advantages in terms of interactivity and speed are obvious.

To be able to change an element, you must assign it a name, as in the following example:

<IMG SRC="image.gif" id="logoMM">.

You can then access the image, using its name: logoMM or, even better, by traversing the structure model (the hierarchical relationships shared by the objects). For instance, if our image is the second one appearing in the page:

document.images[2]

All the objects can be altered, from the frames to the plug-ins, and from the forms to the windows. You can at any time query or change any element on the page (position, content, status, etc.).