[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:
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/
More information about the thelist
mailing list