[thelist] DOM Help

Chris Heilmann lists at onlinetools.org
Thu Feb 3 11:13:50 CST 2005

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

Yes there is, I wrote a self training course on that subject, which
actually has an example like that:
This also uses a proper separation of behaviour and presentation, as it
applies classes from the CSS instead of accessing the style properties in

The course is there:

Your example would be an onlick handler on the a:
      Header Text <a href="#" onclick="toggleShowHide('unique-id');
      return false;">Show/Hide Description</a>
  <p id="unique-id">
      This is description to Show/Hide.

and you could reach the P via the nextSibling of the H3:

Have a read through my example though, as it does not create any dead
links for non-javascript users.


Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/

More information about the thelist mailing list