DHTML
  Home arrow DHTML arrow Page 5 - Rough Guide To The DOM (part 1)
Dev Shed Forums 
Administration  
Apache  
BrainDump  
DHTML  
Flash  
Java  
JavaScript  
Multimedia  
MySQL  
Oracle  
Perl  
PHP  
Practices  
Python  
Reviews  
Security  
Style-Sheets  
Web Services  
XML  
Zend  
Zope  
Forums Sitemap 
IBM® developerWorks 
Dedicated Servers 
E-Commerce Hosting 
Linux Web Hosting 
Managed Hosting 
Small Business Hosting 
Download TestComplete 
VPS Hosting 
Weekly Newsletter

 
Developer Updates  
Free Website Content 
OLM
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
DHTML

Rough Guide To The DOM (part 1)
By: Vikram Vaswani, (c) Melonfire
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 9
    2001-04-09

    Table of Contents:
  • Rough Guide To The DOM (part 1)
  • Back To Basics
  • Navigating The Family Tree
  • What's In A Name?
  • Ducks In A Row
  • Changing Things Around
  • Alternatives
  • Shazam!

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
     
    ADVERTISEMENT

    Stay one step ahead of the competition. Evaluate and give feedback on some of the hottest web development tools on the market today. Make your opinion heard! Click Here

    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 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

    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 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

    document.getElementsByTagName("*");

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


     

       

    DHTML ARTICLES

    - Rough Guide To The DOM (part 2)
    - Rough Guide To The DOM (part 1)
    - Filters And Transitions In IE5
    - Understanding Embedded Fonts




    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway