Web Biz

I’d like to continue from my last post on using the Yahoo User Interface JavaScript library (or YUI for short) and talk about how nicely YUI makes working with the DOM.  My first post was on getting started with YUI, which got us up and running with the loader to get the necessary YUI JS files to the client, and then introduced the Event class.  We even took a look at using the scope correction features of the YUI Event class.

The Dom sucks

In this next installment of the series, we are going to learn about YUI and the Dom.  Generally speaking, scripting the DOM sucks.  That might even be an understatement.  Thankfully, we have innerHTML and a variety of tools provided by the YAHOO.util.Dom singleton class as well as the YAHOO.util.Element class.

As a side note, for those of us out there that prefer the innerHTML route (not sure why you wouldn’t…) there is a good post by Steven Levithan on speeding up innerHTML by using his replaceHTML method — be sure to check this out of if you are continually using the innerHTML to inject returned HTML code from an Ajax call.

The YUI solution

The YAHOO.util.Dom class is a singleton (meaning, no need to instantiate it via new) that provides the following functionality:

• Accessing elements
• Positioning of elements (and easy access to document positioning information)
• Styling an element
• Inserting elements

Accessing elements

There are several approaches to finding and accessing elements in the Dom.  First, the YAHOO.util.Dom.get method is a convenience shortcut to the document.getElementById() function.  I like to create a shortcut function for this, coming from the Prototype world, the $() will do:

1
2
3
4
5
6
7
8

var $;
var myObj = {
	//This function is called from the onSuccess method of my YUI loader
	init: function(){
		//create helper shortcuts
		$ = YAHOO.util.Dom.get;
	}
};

In the code above, we are using our sample myObj object that has an init() method.  This method is called from our onSuccess() handler for the YUI loader from the getting started with YUI post.  Its important that the init() method is called after I have loaded the ‘dom’  module.  When specifying the components you want to load, be sure to reference the module names for the YUI loader.

You can also access elements using the YAHOO.util.Dom.getElementsByClassName() function to retrieve an array of elements based on their class name. You can also specify the type of tag (i.e. ‘div’ or ‘form’) as the second argument, and a root element as the third argument to be more explicit about the elements that are returned.  Let’s look an example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var $;
var myObj = {
	//This function is called from the onSuccess method of my YUI loader
	init: function(){
		//create helper shortcuts
		$ = YAHOO.util.Dom.get;
		this.attachEvents();
	},
	attachEvents: function(){
		var Dom = YAHOO.util.Dom;
		var elements = Dom.getElementsByClassName('clickbutton');
		YAHOO.util.Event.addListener(elements, 'click', function(){
			this.activate();
		}, this, true);
	},
	activate: function(){
		window.alert('You clicked me');
	}
};

In the example code above, I have the same object with an attachEvents() method.  This is an improved version from the last post in this series.  We are now using the YAHOO.util.Dom.getElementsByClassName() function to get the array of elements on the page that have the class ‘clickbutton’.  I can then pass this array of elements into the YAHOO.util.Event.addListener() function.  Here we simply call the activate() method to alert the user that they have clicked the button.

Positioning elements

The YUI library also enables us to get and set (regardless of the position CSS attribute set on the element) the positioning of elements.  These are simple get and set functions that require the element object or element’s id string as the first argument.  These functions include: getX(), getY(), getXY(), setX(), setY(), and setXY().

Styling elements

YUI offers a quick and easy solution for adding and removing classes on elements.   This can be accomplished using either the Element class, or the DOM singleton.  Using the DOM singleton is more efficient, unless you have already have an instance of the Element.  To add a class to an element using YUI, simply:

1

YAHOO.util.Dom.addClass('elementid', 'myclass');

You can remove a class from an element using:

1

YAHOO.util.Dom.removeClass('elementid', 'myclass');

And, you can also test if the element already has a class applied to it:

1
2
3

if (!YAHOO.util.Dom.hasClass('elementid', 'myclass')){
	YAHOO.util.Dom.addClass('elementid', 'myclass');
}

In conclusion, the YUI library give you a simply and intuitive interface to programming in the land of the DOM; and makes it a lot less painful. In the next post, we’ll show how the Selector class enables you to access elements in the DOM via a XPath syntax.