YUI Demo: Dom Splicer

It is often difficult to understand a new language or set of apis without having some working code in front of you to SEE how to put all the functions together in a coherent whole. One of the things I feel strongly about is getting more folks to become aware of and use YUI libraries. So, placing these two things together I sat down and wrote a small demo which utilizes many of the concepts I've mentioned before here.

Imagine if you will that DIV and P elements on a page were like little organisms floating in the browser. Their DNA would be represented by the CSS properties that they possess. Such things as borders and background colors, etc. Now imagine if we took some YUI libraries and gathered up all these elements and "spliced" their CSS DNA. Then we create a new DIV which we then assign this new spliced CSS and drop it into the page.

If you view source of the page you will see many of the elements I've mentioned before.
1) YUI hosted files - the utilities and selector libs were loaded from the remote YUI location
2) Javascript Module Pattern - great for formatting your JS.
3) Selector - I use this to very easily grab all the p and div tags on the page. Doing it via getElementsByTagName would have been a bit more tedious - plus I can very easily expand the list of nodes I want to fetch, or only fetch certains ones with a given class, etc.
4) events - instead of assigning an onclick to the button, I use YUI's ability to attach events to the button element instead.
5) Style Abstractions - using the getStyle and setStyle I was able to easily fetch and assign style information to my nodes.
6) JSON - I use JSON style formatting to configure the properties of the CSS that I was interested in. JSON is really just a shorthand way to define objects and arrays.
7) console.log - you may see alot of those in there (hopefully all commented out) - these are used in tandem with Firebug - an add-on for Firefox. I'm sure you're mostly likely familiar with Firebug, but if not, there's always a first time.


Please let me know if you got anything out of this Demo. I spent quite a bit of time thinking and coding to make it work, and I hope that it helps you get started or more familiar with YUI development.