[thelist] Navigating the DOM

Noah St.Amand noah at tookish.net
Sun Apr 3 23:13:57 CDT 2005


Hi,

I'm trying to implement a drop-down menu script on a site built around a 
CMS. The CMS generates the menu, and so it doesn't have the hooks that I 
would typically use to make the drop-down script work.

Is it possible to refer to an element that doesn't have an id? To be 
specific, given this HTML:

<div id="shortcuts">
   <div class="block block-menu" id="block-menu-36">
     <h3>Shortcuts</h3>
     <div class="menu">
       <ul>
         <li class="expanded"><a href="residents" title="">Residents</a>
           <ul>

Is there anyway to do this in the javascript:

var menu = "the last ul in the example above"
var actuator = "the a after <li class="expanded"> in the example above"

I've tried a bunch of variations beginning with:

document.getElementById("shortcuts").firstchild.

Which I think gets me as far as the div with the id "block-menu-36", but 
I can't seem to get any further. I'd like to start from "shortcuts" 
because this is something I set in the template, rather than something 
generated by the CMS (so if it changes, it will be because I changed it).

On a vaguely related note, can anyone recommend a good DOM scripting 
book for someone with a fair bit of server-side coding experience, but 
very little on the client side? I'm pretty fluent in CSS, but basically 
  useless with Javascript (see exhibit A above). I would prefer 
something standards-oriented, and something that might help me get 
started using Ajax[1].

Thanks for any help.

Noah

[1] <http://www.adaptivepath.com/publications/essays/archives/000385.php>



More information about the thelist mailing list