Hidden YUI Treasures: Find your Ancestors..

Once again I've jumped into the ocean that is YUI and retrieved a pearl for you to show proudly to your friends. Today's pearl is actually a string of pearls :)

Object getAncestorByTagName ( node , tagName )
Object getAncestorByClassName ( node , className )
Object getAncestorBy ( node , method )


These methods live inside the DOM utility and exist to make your life alot better. At least your coding life. Basically these methods are perfect for when you are trying to make changes to a page based on something you clicked on or some element that has 'focus'. For instance imagine if you had a list of elements on a page - each element had inside it an image, some text, and a button. Imagine if you wanted to change the background color of that element when you click on the button inside of it. You could do some code where you get the parentNode of your button and go up the chain till you find the right element to swap a classname on to change the color, or you can use these extremly handy methods. Basically they will do the legwork for you of crawling back up the DOM hierarchy seeking out the element you wish.

getAncestorByTagName is great for when you have clicked on a form element and want to find the form that contains it. getAncestorByClassName is awesome for looking for some specific element that might be several levels up the chain - and you dont know what the tagname is but you do know the classname. getAncestorBy is perhaps the most powerful of them all because you can create your own test to determine what is a suitable ancestor element.

One item to note - there are a few opals along with those pearls I found:
getChildren and getChildrenBy which fetch all children or only ones that meet some criteria respectively.

So, get in touch with your Ancestors and try out these YUI Treasures...