Dancing Around The DOM at migraineheartache.

Dancing Around The DOM

Published December 3rd, 2006 in General

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:



<div id="app">

    <ul id="nav">

        <li id="main"><a href="/main.html">main</a></li>

        <li id="articles"><a href="/articles.html">articles</a></li>

        <li id="examples"><a href="/examples.html">examples</a></li>

    </ul>

    <div id="content">

    . . . content . . .

  </div>

</div>

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.



  function attachOnclicks(event) {

      $('nav').descendants().each(function(element) {

          if(element.tagName == "A") {

              Event.observe(element, "click", navOnclick, false);

          }

      });

  }

  

  Event.observe(window, "load", attachOnclicks, false);

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.



  function navOnclick(event) {

      Event.stop(event);

      var clickedLink = Event.element(event);

      var clickedLi = clickedLink.up();

      clickedLi.siblings().each(function(sibling) {

          sibling.removeClassName("active");

      });

      clickedLi.addClassName("active");

  }

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.

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.

31 Comments to “Dancing Around The DOM”

Feed for this Entry Trackback Address

1 corra24 Dec 21st, 2006 at 11:24 pm

Interesting post.

Thanks.
2 rocks123 Dec 29th, 2006 at 12:44 am

good post want to try it ,do we have a demo for this?
3 rocks123 Dec 29th, 2006 at 1:52 am

what are the other browsers protoype supports other than IE ?
4 Aron Jun 4th, 2007 at 5:47 pm
5 fdgdfgfdg Mar 13th, 2008 at 8:20 am

iopuhjfhgjfghjdfgdfertytyytuuyiioiupwqeretreryttyutuiyuoiuiuioljklhghfhghdsfgadadffdsgvbcxvnbvmghghghhghfdfdfgfdfgfdgfdgfgdfg
fdgdfg
6 fdgdfgfdg Mar 13th, 2008 at 8:21 am

ghjgfjhfgjhfgjhghjfgjhhj
7 Leroy Gill Nov 13th, 2008 at 4:00 am

0d8isbxun8h44k7x
8 Debra Astorga Mar 17th, 2010 at 5:24 pm

I loved every single word of this post !
9 Leora Roussin Mar 17th, 2010 at 5:32 pm

I got really unbelivable pleased by this post! Post more about dommes!
10 nicki minaj naked Jan 8th, 2011 at 9:04 am

I just like to say it how I see it. Take care.
11 world wide web Aug 11th, 2011 at 1:51 pm

As a internet resource for businesses and engineering enthusiasts to stick to the latest and greatest breakthroughs in Unified Communications, IP Telephony, Hosted Communications and VoIP.
12 Pozycjonowanie Gorzow Jan 30th, 2012 at 6:24 pm

Excellent goods from you, man. I’ve understand your stuff previous to and you’re just too great. I actually like what you have acquired here, certainly like what you are saying and the way in which you say it. You make it entertaining and you still take care of to keep it sensible. I can’t wait to read much more from you. This is really a tremendous web site.
13 Marcene Truiolo Feb 8th, 2012 at 5:54 am

hey all, I was just checking out this weblog and I seriously admire the basis in the write-up, and have nothing to complete, so if any person would like to to have an engrossing convo about it, please contact me on AIM, my name is heather smith
14 Emelina Reutlinger Mar 20th, 2012 at 2:16 am

I seldom comment, however after looking at some of the remarks on Dancing Around The DOM at migraineheartache.. I actually do have a couple of questions for you if it’s allright. Is it just me or does it give the impression like a few of these comments appear like they are left by brain dead people? :-P And, if you are writing on other online sites, I would like to follow anything new you have to post. Could you list of all of your public pages like your Facebook page, twitter feed, or linkedin profile?
15 Brett Hamby Apr 8th, 2012 at 6:55 am

Off-hoot of thi initiative unuccefully urfaced in a few tate and California ha recently uccefully enacted a law that could/would mandate tudent drugging without parental permiion

1 linzer tarts Trackback on Apr 26th, 2007 at 7:19 pm
2 Tramadol. Trackback on Feb 7th, 2008 at 5:01 am
3 Order phentermine uk. Trackback on Mar 6th, 2008 at 2:33 am
4 Wo kann ich filme downloaden? Trackback on Mar 22nd, 2008 at 2:01 pm
5 Adderall xr. Trackback on Mar 22nd, 2008 at 2:41 pm
6 Cheap vicodin cod. Trackback on Mar 22nd, 2008 at 4:26 pm
7 iContent Robot Trackback on Apr 22nd, 2008 at 9:23 pm
8 Recently leaked footage of the new Paris Hilton sex tape Trackback on May 19th, 2008 at 6:15 pm
9 Buy rohypnol. Trackback on Jul 16th, 2008 at 1:16 am
10 Bqeqkfndvqn Trackback on Aug 17th, 2008 at 4:28 pm
11 Propecia. Trackback on Aug 20th, 2008 at 11:35 pm
12 Generic for diflucan. Trackback on Aug 29th, 2008 at 5:10 am
13 Rohan Trackback on Aug 10th, 2009 at 8:28 am
14 Taylor Trackback on Aug 10th, 2009 at 8:29 am
15 Alondra Trackback on Aug 10th, 2009 at 8:56 am
16 Jayla Trackback on Aug 10th, 2009 at 9:19 am

Dancing Around The DOM

31 Comments to “Dancing Around The DOM”

Leave a Reply