Home arrow DHTML arrow Page 5 - Rough Guide To The DOM (part 1)

Ducks In A Row - DHTML

It's the bane of Web developers everywhere - conflicting standards, browser incompatibilities, and code that changes every time a new browser version hits the Web. But fear not - charging in on a white steed comes a heroic knight, clad in the attire of the new W3C DOM and armed with the tools to make this nightmare end forever. Read on to find out how the new DOM finally brings some standards to the decidedly non-standard world of the Web.

  1. Rough Guide To The DOM (part 1)
  2. Back To Basics
  3. Navigating The Family Tree
  4. What's In A Name?
  5. Ducks In A Row
  6. Changing Things Around
  7. Alternatives
  8. Shazam!
By: Vikram Vaswani, (c) Melonfire
Rating: starstarstarstarstar / 10
April 09, 2001

print this article


In addition to the getElementById() method, which is typically used toobtain a reference to a specific element, the DOM also offers thegetElementsByTagName() method, used to return a collection of a specifictype of element. For example, the code


would return a collection, or array, containing references to all the<form> tags in the document. Each of these references is a node, and canthen be manipulated using the standard DOM methods and properties.

Consider the following document, which contains three <div>s, eachcontaining 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


>>> More DHTML Articles          >>> More By Vikram Vaswani, (c) Melonfire

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Google Gives Buckyball a Tribute Doodle in H...
- Rough Guide To The DOM (part 2)
- Rough Guide To The DOM (part 1)
- Filters And Transitions In IE5
- Understanding Embedded Fonts

Developer Shed Affiliates


Dev Shed Tutorial Topics: