Using YUI for DOM Manipulation

After being frustrated of not getting consistent and accurate result via standard DOM methods especially html_element.getAttribute('key'); and html_element.setAttribute('key', 'value');, I came across some YUI library components that provides abstractions to various DOM methods. Some interesting DOM-related tools covered in this post are YAHOO.util.Element, YAHOO.util.DOM and YAHOO.util.Selector.

YAHOO.util.Dom

YAHOO.util.Element is basically a singleton instance that provides various DOM methods. Following are some of the methods that one may find useful. For more information, please refer to the API documentation.

Finding an Element by Id

To find an element by its Id, instead of document.getElementById, another way through YUI would be through YAHOO.util.Dom.get.


var element = YAHOO.util.Dom.get('some_element');


Finding Element(s) by Class Name

To find elements by class name,


var elements = YAHOO.util.Dom.getElementsByClassName('some_class');


YAHOO.util.Element

Before I discover how powerful is jQuery, I have relied on YAHOO.util.Element a lot in various tasks. Basically, YAHOO.util.Element wraps a HTMLElement and provide some methods to simplify the code used in certain DOM operations such as getting and setting attributes, manipulating element position etc. Detailed API documentation is here.

Creating a New Element

To create a new element, one typically pass in the result from document.createElement into the constructor as follows. For example, to create a new link element.


// create a new element
var element = new YAHOO.util.Element(document.createElement('a'));
 
// set the href
element.set('href', 'http://www.google.com/');
 
// insert caption
element.appendChild(document.createTextNode(
'Click me to the search engine.'
));
 
element.appendTo(document.body);


Uses an existing Element

To wrap YUI Element component methods to an existing HTMLElement, pass in the element OR the element Id into the constructor.


var by_element = new YAHOO.util.Element(
YAHOO.util.Dom.get('some_id')
);
var by_id = new YAHOO.util.Element('some_id');


Getting the original HTMLElement

Sooner or later one would find out that it is impossible to call some DOM methods through the YAHOO.util.Element instance, for instance the setAttribute method. Besides that, as of 2.6.0, the appendChild method also doesn’t seem to accept instance from YAHOO.util.Element. Therefore to get the wrapped element,


var some_container = new YAHOO.util.Element(container_element);
var the_yui_element = new YAHOO.util.Element(original_element);
 
// this will result in an error
some_container.appendChild(the_yui_element);
 
// but this won't
some_container.appendChild(the_yui_element.get('element'));


Hopefully instances of YAHOO.util.Element are also accepted by all methods requiring HTML element in future releases.

YAHOO.util.Selector

DOM Collection via CSS3 Selector

Those who are from jQuery may be interested in knowing that YUI also provides similar functionality via YAHOO.util.Selector. For those who are interested, the API documentation is here. As an example,


var elements = YAHOO.util.Selector.query('body p');


For those who are interested, the official site provides a great amount of information, guide, examples and tutorials. However, for those who are new to javascript, the tutorials may take them some time to get used to. However, after investing enough time in it, then the extensive API documentation will be extremely useful. I will document down some notes on YAHOO.util.Event, which is my favorite component next time.