[thelist] DOM Help

Tony Grimes info at scribenewmedia.com
Thu Feb 3 11:12:19 CST 2005


Is there any way to "walk" the DOM in javascript to find a given tag's
ancestor/parent or child tags (like you can in XSL)?

For example, I've written a javascript to show or hide a paragraph tag when
someone clicks on a link. Right now, each paragraph has a unique id so the
script knows which one to show/hide, but I'd like to make it simpler to
implement. 

Here's the HTML I use now:

================
<div>
  <h3>
      Header Text <a href="#" onclick="toggleShowHide('unique-id');
      return false;">Show/Hide Description</a>
  </h3>
  <p id="unique-id">
      This is description to Show/Hide.
  </p>
</div>
=================

But I'd like to use this:

================
<div>
  <h3>
      Header Text <a href="#" onclick="toggleShowHide();
      return false;">Show/Hide Description</a>
  </h3>
  <p>
      This is description to Show/Hide.
  </p>
</div>
=================

What I'd like to do from within the script is:

1. Find the <div> tag that surrounds the <a> tag that was clicked.
2. Access the <p> object that lies within the same <div> tag (to change it's
css properties).

Is there any way navigate the DOM like this in javascript? And while I'm on
the subject, is there a good book available on the DOM? All I can find are
single chapters in books about javascript etc.

TIA

Tony



More information about the thelist mailing list