YUI Dom Collection , Event

Let us see how easy is it to manipulate the HTML document using the YUI DOM colleciton…you need to download yahoo-min.js and dom-min.js.normally i use the utilities.js which is combination of yahoo-dom-event-dragdrop.so it takes care of all ordering.

Let us define the variables.

var $D = YAHOO.util.DOM;

// To add class ——–> $D.addClass(element,class)

// To replace class ——–> $D.replaceClass(element,oldclass,newclass);

// To remove class ——>$D.removeClass(element,class)

// has class ——-> $D.hasClass(element,class)

$D followed by the operation you want to perform.The parameter would be the element you want to operate on will be the first one.followed by any additonal parameter required for the operation.let us check what other normal or the interesting operation for DOM interaction are available.Getting / setting the styles directly I would say don’t do this way .Use the CSS classes…but still it is good to know that style can be set and unset.Get the view port size..which is nothing but the VISIBLE size(height / width) of the element .once you know the size you might want to set/get the position of it.use setXY,getXY

var $ = $D.get;This is most used variable.so we just have single character for the variable.This does the most important thing you would do in a html document. getElementByID.Instead of typing this big.just say $(‘id1′) would give you the element….how cool..WOW!…This is my most favorite.I use $ every time for getting element by id….

Let us move to next variable..var $E = YAHOO.util.Event;To register for listening to an event you would say YAHOO.util.Event.addListener .Rather than that $E.on would do the trick .The syntax for it would be operation(element,event,function,parent,extra object,scope correction).The extra object would be passed as the 2nd object on the function.

func(e,obj) –> e stands for the event that triggered and called this function module and

obj —> is the 4th parameter we pass in the event registeration.

by scope correciton i mean if you pass is as true then this would be set to obj other wise it would be set the element on which the event got triggered.other wise there is another option you can pass an object instead of the boolean.now this would point to the 5th parameter make the scope of execution to the 5th object .

Event:prevent default event and propogation up you just need to call one operation $E.stopEvent();

removing events:removeListener(‘id’,'event’) would remove the event registered any no of functions.if you want it removed against a particular function you pass that as well,in which others would still be called.removeListener(‘id’,'event’,func).purgeEvent:would remove all the listeners register by an element.

CustomEvent: Custom Event is again an object.You can create it by new YAHOO.util.CustomEvent(‘eventtyp’,scope).It can be defined as a variable in an object .so that the obect can trigger the event.when the scope is defined as this it would point to the object which has this variable of custom event.

To trigger the event you have to have the object which contains the event. obj.event.fire(someobj).this someobj would come as the 2nd variable. to subscribe the event you have to have the object which contains the event .you would say obj.event.subscribe(function name,third argument).

These are the most used in any html document manipulation.get to an element ($),play with the event such as adding class use $D,and register for events on these elements use $E.that is it you covered 80% this is just the 20% of the knowldge.I guess that is sufficient…

To Summarize there are 3 variables you need to know $D,$E,$. $ to get element,$D to play with the element ,$E to play with the events of the element.