[thelist] DOM Help

[Chris Heilmann]

> 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:
http://www.onlinetools.org/articles/unobtrusivejavascript/demo_cssseparation.html
This also uses a proper separation of behaviour and presentation, as it
applies classes from the CSS instead of accessing the style properties in
JS.

The course is there:
http://www.onlinetools.org/articles/unobtrusivejavascript/

Your example would be an onlick handler on the a:
<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>

and you could reach the P via the nextSibling of the H3:
toggleShowHide(this.parentNode.nextSibling);

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

HTH
Chris



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