Agent YUI: Mission 2 - Magic Of The DOM

The last article in the Agent YUI series was about YAHOO.util.Event, one of the YUI core components. The other, probably even more used component is YAHOO.util.Dom, which provides helper functions for several DOM related tasks. So our mission today will be checking out these functions a little bit further.

Introduction

As you can see from the API documentation for the DOM component, it provides several functions which can become quite handy and enhances the standard DOM functionality, e.g.:

• addClass: add a CSS class to any given element
• removeClass: removes a CSS class from an element
• get: get any given element from the DOM
• getElementsByClassName: as the name implies, retrieving elements based on their classname
• getStyle: get a style property from an element
• setStyle: set a particular style property
• insertAfter: a long awaited functionality that lets you insert a element after a given element in the DOM tree

But there are many more useful functions that can be found in the API documentation of this component.

The Mission Statement

The following little example deals with this task: A given text contains several anchor elements, most of them point to pages on Wikipedia, some of them are just external links and only one is a local link. They should be marked as follows:

• Marking a link to wikipedia
• Marking a link to any other external resource

Due to the fact that Internet Explorer 6 and below do not support the CSS attribute selector, it is a bit difficult to accomplish this task (and make it work in IE6) by using HTML and CSS only. But with the help of JavaScript and the YUI, it is - really - a piece of cake.

The Plan

For the sake of simplicity, we imagine the following:

1. JavaScript is available: search for all anchors on the page and based on the href, attach a certain class
2. JavaScript is not available: leave it with standard link styling

The Implementation

Bond: Who would want to put a contract out on me?
M: Jealous husbands, humiliated tailors, outraged chefs. The list is endless!

from The Man with the Golden Gun

We start off with a little text kindly provided by Wikipedia, with some introduction about James Bond. You might want to check out the initial file. Even this short text already includes several anchor elements, most of them pointing to other resources on Wikipedia. However, the links in the references list point to pages which can be found elsewhere on the web. Finally, a little note at the end leads the user to the starting point of the Agent YUI series.

Before we dive into the JavaScript, we add 2 classes to our styles which will cater for the different styling of our links:

a.wp-link {
    padding-left: 20px;
    background: #fff url(img/wikipedia-icon.gif) top left no-repeat;
}

a.local-link {
    padding-left: 16px;
    background: #fff url(img/icon_external_link.gif) top left no-repeat;
}

Then we create our JavaScript module for this exercise:

YAHOO.AgentYUI.Mission2 = function () {
    // our javascript code will go in here
}();

We then define an init function which will scan through the page and get all the anchor elements. Luckily, there is YAHOO.util.Dom.getElementsBy which will get all the anchor elements on the page and feed them into a method (which we will define shortly) which checks the href attribute:

var init = function () {
    // get all anchors on the page and feed them to the testing method
    YAHOO.util.Dom.getElementsBy(formatLinks, "a");
};

Our testing method formatLinks is then taking one element of the anchors array at a time. It checks the href attribute and based on that will attach a new class using YAHOO.util.Dom.addClass:

var formatLinks = function (el) {
    var currentHref = el.getAttribute("href");

    if (currentHref.indexOf("http://en.wikipedia.org") !== -1) {
        YAHOO.util.Dom.addClass(el, "wp-link");
    } else if (currentHref.indexOf("http://") !== -1) {
        YAHOO.util.Dom.addClass(el, "local-link");
    }
};

After some cleaning up and making the code a little bit more structured, we get our final result. As stated above, this is just a little example of what can be accomplished using the YUI DOM component which provides loads of functions that can support developers when dealing with DOM related tasks and to make the functionality work cross browser.

For further information how the DOM component can assist you, please check out the reading resources listed below.

Further Reading

• YUI Library
• DOM Component
• DOM Component API documentation