Learn YUI3 – Play with Node/Element and know the DomReady etc.

I was thinking of writing few posts about YUI but not writing about it thinking I do not know much, so what can I write. Finally I thought to write about small things every developers face when jump into YUI first time.

YUI2 is deprecated and it is very different in structure and other than YUI3. There is no point looking into YUI2 now. YUI3 is not backward compatible as you may think. Even when you hit search engine to search for something, better search with "YUI3" so that at max you can avoid YUI2 results.

YUI3 is regarded as a good and smart JavaScript library by experts. Its file size is something I am not sure how good it is! I like small foot print JavaScript library. It loads many missing module dynamically which is making me unsure about its actual file size in use in a website.

Here is the starting block of YUI (YUI3):

YUI(/* Config items */).use('node', function(Y) {
});

Node is the module name to work with node elements.

Access an Element by its ID:

var results = Y.one('#id2');

Access Elements by Class:

Y.log(Y.all('.class1').size());

Access Elements by Tag name:

Y.log(Y.all('div').size());

Here is a working example of the code. I tried to show various things related to node. It helps in accessing elements on page. Accessing DOM node is the simplest things we do in JavaScript! This code also include few events related to page load.

<!DOCTYPE HTML >
<html>
 <head>
  <title>  YUI3: Accessing element by ID  and Class  </title>
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
  <script type="text/javascript">
  function getTime() {
	var t =  new Date().getTime();
	return 'Time: ' + t;
  }
  // YUI code starts
	var Y = YUI(/* Config items */).use('node', function(Y) {
	// Access element by tag name
	Y.log(Y.all('div').size());
	// Or
	//console.log(Y.all('div').size());
	// Access an element by ID
	var results = Y.one('#id2');
	// Access elements by class name
	// Y.all() is for all with the class. Y.one() is for accessing one. First one will be selected if more than one is
	// classified with selector.
	Y.log(Y.all('.class1').size());
     //assign page load handler:
     // Window load will fire at last
    Y.on("load", function () {
        results.append("<p>The window load event fired.  The page and all of its image data, including the large image of Uluru, has completed loading.</p>" + getTime());
    }, Y.config.win);
    //assign domready handler:  It is equivalent to JQuery $(document).ready()
    Y.on("domready", function () {
        results.append("<p>The DOMContentLoaded event fired.  The DOM is now safe to modify via script.</p>"  + getTime());
    });
    //assign 'contentready' handler:
	// This and available events are useful when DOM elements are generated dynamically. Here nothing special to watch for.
    Y.on("contentready", function () {
        results.append("<p>The 'contentready' event fired for the element 'contentContainer'.  That element and all of its children are present in the DOM.</p>"  + getTime());
    }, "#contentContainer");
    //assign 'available' handler:
    Y.on("available", function () {
        results.append("<p>The 'available' event fired on the element 'contentContainer'.  That element is present in the DOM.</p> "  + getTime());
    }, "#contentContainer");
});
</script>
 </head>
 <body>
<div id="id1">
TEST DIV
</div>
<div id="id2">
</div>
<div id="contentContainer">
	<div class="id3">
		Delay the page load by including two images here: <br/>
		<img src="//lh3.googleusercontent.com/-9gMaJ3xL9NE/TtUuFTB4VII/AAAAAAAAB08/NLFbXEB-v5E/s800/yui.jpg" alt="yui library Image" id="image" />
		<br/>
		<br/>
		YUI seems to be a famous/common name in Japan!<br/>
		<img src="//lh3.googleusercontent.com/-Ie0HcWUCHYE/TtUuhNad2DI/AAAAAAAAB08/aJ76nLwWWnI/s800/yui-girl.jpg" alt="Japan girl" id="japangirl" />
	</div>
</div>
<div class="class1">
</div>
 </body>
</html>

The output page.

Accessing Node/Element Properties:
Use get() for accessing Elements property as shown below.


YUI().use('node', function(Y) {
	Y.one(document).on('click', function(e) {
		//Y.log('target: ' + e.target);
		//Y.log('currentTarget: ' + e.currentTarget);
		//Y.log('relatedTarget: ' + e.relatedTarget);
		// To access node properties, use .get()
		Y.log(e.target.get('id'));
                Y.log(e.target.get('className'));
                Y.log(e.target.get('parentNode.className'));
                Y.log('-----------');
	});
});

If you know jQuery even a little then this page is very important and you see yourself visiting there from time to time.

Next on the .