Netscape 6, Part II: Animation: Extracting Elements by Tag Name - Doc JavaScript

Netscape 6, Part II: Animation

Extracting Elements by Tag Name

When animating a page, you should decide how to reference the target object that you want to animate. The best scenario is when you know its ID. Then you reference all of an object's properties and methods by appending them to the element ID. For example, to find out the tag name of an element with ID="bar", you would use something like bar.nodeName. Go ahead and query the type of the DIV below, ID="foo".

Sometimes, though, you need to search for your animation object. Both Internet Explorer 5 and Netscape 6 support the getElementsByTagName() method, which extracts an array of elements of the same tag type. This method applies to any element. You can extract all tags in the entire document, or within any specific element such a DIV, or a P. The following handleAllTags() function extracts all FONT tags in this page as well as all tags in the DIV container that wraps the following code listing. It prints these two counts:

<SCRIPT LANGUAGE="JavaScript">
<!--
function handleAllTags() {
var arrayOfDocFonts, arrayOfDivFonts;
  if (document.all || document.getElementById) {
    arrayOfDivFonts = foo.getElementsByTagName("font");
    arrayOfDocFonts = document.getElementsByTagName("font");
  }
  else {
    document.write("Unrecognized Browser Detected");
  }
  alert("Number of font tags in this document and DIVs are " + 
  arrayOfDocFonts.length + " and " + 
      arrayOfDivFonts.length + ", respectively.");
}
// -->
</SCRIPT>

Notice that the tags extracted from the DIV with ID="foo" are found by foo.getElementsByTagName("font"). All this page's tags are extracted by document.getElementsByTagName("font").

JavaScript uses a lot of collections. A collection is an ordered list of objects. You can access a particular element of the collection using either array notation or the item() method. The following script computes the font color of the third element (index is 2) in arrayOfDocFonts that was extracted as above. It demonstrates both ways of computations:

function printColors() {
var arrayOfDocFonts, arrayOfDivFonts;
  if (document.all || document.getElementById) {
    arrayOfDivFonts = foo.getElementsByTagName("font");
    arrayOfDocFonts = document.getElementsByTagName("font");
  }
  else {
    document.write("Unrecognized Browser Detected");
  }
  alert('arrayOfDocFonts[2].color = ' + arrayOfDocFonts[2].color + '; 
  arrayOfDocFonts.item(2).color = ' + arrayOfDocFonts.item(2).color);
}

The code in this page assumes you are running Internet Explorer or Netscape 6.

Next: How to set the content of any HTML tag