Rough Guide To The DOM (part 1) - Ducks In A Row (
Page 5 of 8 )
In addition to the getElementById() method, which is typically used to
obtain a reference to a specific element, the DOM also offers the
getElementsByTagName() method, used to return a collection of a specific
type of element. For example, the code
document.getElementsByTagName("form");
would return a collection, or array, containing references to all the
<form> tags in the document. Each of these references is a node, and can
then be manipulated using the standard DOM methods and properties.
Consider the following document, which contains three <div>s, each
containing a line of text
<html>
<head>
</head>
<body bgcolor="white">
<div id="huey">
Huey here!
</div>
<div id="dewey">
Dewey in the house!
</div>
<div id="louie">
Yo dude! How's it hangin'?
</div>
</body>
</html>
and then study the code I'd use to manipulate the text within the second
<div>
<script language="JavaScript">
// get a list of all <div> tags
var divCollection = document.getElementsByTagName("div");
// get a reference to the second <div> in the collection
var deweyObj = divCollection[1];
// verify that we are where we think we are
// alert(deweyObj.getAttribute("id"));
// change the text string within the <div>
deweyObj.childNodes[0].data = "Dewey rocks!";
</script>
A collection of all the tags within a document (a lot like "document.all")
can be obtained with
document.getElementsByTagName("*");
/ 10 
