YUI3 Tutorial: YUI Node with Examples – 1

YUI has a node utility for creating, collecting and manipulating node. Each node represent DOM node. It helps in managing style, subscribing to events, and dynamically loading content and many more things.

We can use Y.one() for single node, Y.all() for multiple node (nodeList) and node.one(), which is same as Y.one() for working with the node.

This first post also has examples on YUI3 node.

HTML Used in the YUI Node example:


<div class="sideheader">Categories</div>
	<ul class='cats'>
	<li class="cat-item cat-item-16"><a href="http://www.satya-weblog.com/category/blogger" title="Blogspot, wordpress, related to blogging">Blogger/WP</a> (58)
	</li>
		<li class="cat-item cat-item-278"><a href="http://www.satya-weblog.com/category/java" title="Java and all related technologies">Java</a> (16)
	</li>
		<li class="cat-item cat-item-224"><a href="http://www.satya-weblog.com/category/lamp" title="PHP, MySQL, Apache and Linux">LAMP</a> (128)
	</li>
		<li class="cat-item cat-item-9"><a href="http://www.satya-weblog.com/category/security" title="about security, client side, server side">Security</a> (13)
	</li>
		<li class="cat-item cat-item-24"><a href="http://www.satya-weblog.com/category/seo" title="search engine optimization">SEO</a> (18)
	</li>
		<li class="cat-item cat-item-29"><a href="http://www.satya-weblog.com/category/tech-talk" title="tech news, new events etc">Tech Talk</a> (188)
	</li>
		<li class="cat-item cat-item-213"><a href="http://www.satya-weblog.com/category/tools" title="any kind of web development related tools">Tools</a> (17)
	</li>
		<li class="cat-item cat-item-23"><a href="http://www.satya-weblog.com/category/web-2" title="web2/3 or newer related technologies ">Web 2</a> (10)
	</li>
		<li class="cat-item cat-item-225"><a href="http://www.satya-weblog.com/category/web-design" title="HTML, JavaScript, and CSS">Web Design</a> (86)
	</li>
		<li class="cat-item cat-item-25"><a href="http://www.satya-weblog.com/category/xml" title="XML and related technologies">XML</a> (6)
	</li>
	</ul>
</div>
<div id='extracted_data'> </div>

YUI library seed (main) file need to add on page:
http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js

Important: JavaScript used in YUI3 Node Example:


YUI().use('node', 'escape', function(Y) {
   // All example code discussed below will go here
});

escape module helps in escaping special HTML characters.

YUI3 Node Examples:

Access a node, which has title = "PHP, MySQL, Apache and Linux"

.
After getting the result I will append the output to a div


// Get the a (link) with title=PHP, MySQL, Apache and Linux and print innerHTML
var nodeText = Y.one('a[title="PHP, MySQL, Apache and Linux"]').get('innerHTML');
// Will be append all result to id=extracted_data div
var result = Y.one('#extracted_data');
result.append(nodeText); // appendTo() is available from YUI3.3

Get the parent tag and parent tag's class name:


	// Print the parent Tag
	// Output = li
	var p = Y.one('a[title="PHP, MySQL, Apache and Linux"]').get('parentNode').get('tagName');
	result.append('<p>' + p + '</p>');
	// Output = cat-item cat-item-224
	var c = Y.one('a[title="PHP, MySQL, Apache and Linux"]').get('parentNode').get('className');
	result.append('<p>' + c + '</p>');

NodeList Example. Here you will see how you can loop nodeList like ForEach

With nodeList looping, you will see how to access node properties. Example of escaping HTML using escape utility is also included.


Y.all('.cats li').each(function(li)  {
		// Get each li
		Y.log(this);
		//Or
		//Y.log(li);
		// UnEscaped HTML will show in browser.
		result.append('InnerHTML: ' + li.get('innerHTML') + '<br>');
		// Using Escape plugin to Escape HTML so that we can see content directly on browser or we             //need to see those in html source code
                // Escape special HTML characters
		result.append('<p> InnerHTML: ' + Y.Escape.html(li.get('innerHTML')) + '<br>');
		// Each LIs innerHTML character length
		result.append(' Char count: ' + li.get('innerHTML').length + '</p>');
	});

Example of setting node property: Similarly we can set properties to any node.


// Looping through nodeList and setting node property
	Y.all('.cats li a').each(function() {
        this.setContent('Changing each Link content');
        // Or
	//this.set('innerHTML', 'Changing each Link content');
	this.set('className', 'redText'); // For adding class use .addClass()
	});

You should be seeing the list with the above content set by .set()/.setContent() and not the content extracted from HTML. So, try this JavaScript to see the content selected from HTML. It will only change the content of Link when you mouse over the link.


Y.all('.cats li a').each(function() {
	this.on('mouseover', function(e){
	        this.set('innerHTML', 'Changing each Link content'); // or this.setContent('set Content');
		this.set('className', 'redText'); // For adding class use .addClass()
	});
});