Whenever I’m coding a site, I spend a lot of time in the DOM. For some odd reason, I tend look up the built-in JavaScript methods the most. For instance, I can never remember the parentNode method name. Lucky for me, I don’t have to anymore thanks to to Prototype. As of v1.5.0_rc1, Prototype has added some connivance methods for navigating the DOM.

These methods include things such as: ancestors, descendants, up, down, next, previous, previousSiblings, nextSiblings, and siblings.

Here is example markup we will be working with:

In the interest of time and text, I’m not going to cover how to update the content div element using AJAX. But, in order to show a trivial use of the DOM methods in Prototype, I will demonstrate how the to add classes to the markup when the user clicks on different links.

We are going to do this all unobtrusively. We’re going to start by attaching ‘onclick’ events to the anchor tags.

The Event.observe call, works like this: observe the window object for load Events and when a load event occurs call attachOnclicks. You can pretty much ignore the ‘false’ at the end of method call, it has to do with event bubbling, and (as of yet) it isn’t supported that well across browsers.

Once the page has loaded, the ‘attachOnclicks’ method gets called. ‘attachOnclicks’ gets the element with an id of ‘nav’, which is the ul tag. It then calls one of those special DOM methods, descendants. The descendants call returns all children, recursively, of the ul element. It then enumerates over each descendant to find the anchor tags. There is then another Event.observe call, that gets triggered 3 times (once for each anchor). This catches all click events on the anchor tag and calls the ‘navOnclick’ function when it receives them.

And finally we have the ‘navOnclick’ function. navOnclick takes an argument of event that is passed in by the browser when it gets a click event (you don’t need to do anything, this happens automatically). The first line stops the browser from navigating to the anchor the user clicked. The second line figures out which link the user clicked. It does this by calling the prototype function Event.element, it takes an event as a parameter that you provide. Luckily, you can just pass in the event that you received from the browser.

Then we get to use another DOM method, up. The call to up returns the li tag that surrounds the clicked link. Once we have the li tag a quick enumeration over the siblings removes the “active” css class from all of the other li tags.

Finally, we add the active css class to the clicked li tag. This gives you the ability to style #ul li.active to look different from the other li tags, showing the user which page they are viewing. This post ended up being a how-to of events just as much as DOM walking, but that’s okay, since it does show some of the power of these newer DOM methods.