<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
 
<!-- Source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
 

var el = new YAHOO.util.Element('foo');
 

//create a new instance of Element wrapping 
//'foo', which isn' yet on the page
var el = new YAHOO.util.Element('foo');
 
//add a click event handler to 'foo'
el.on('click', function(e) { alert('clicked'); });
 
//when 'foo' is loaded on the page, we'll fire
//an anonymous function that alerts the
//number of list items in 'foo', which is a 
//<ul> element:
el.on('contentReady', function() {
    var items = el.getElementsByTagName('li');
    alert(items.length);
});
 

<!--markup for foo-->
<div id="foo">
    <ul>
        <li>lorem</li>
        <li>ipsum</li>
        <li>dolor</li>
        <li>sit</li>
    </ul>
</div>
 

//create an Element instance wrapping 'foo':
var el = new YAHOO.util.Element('foo');
 
//create an event listener:
var handleClick = function(e) {
    alert(el.get('id') + ' clicked');
	//remove this listener, so that
	//it only fires on the firs click:
    el.removeListener(handleClick);
};
 
//assign an event listener using 'on';
//el.addListener and el.on are identical here:
el.on('click', handleClick);
 

<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
 
<!-- Element source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
 
<!-- Selector source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/selector/selector-min.js"></script>
 
<!-- Event Delegation Module source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/event-delegate/event-delegate-min.js"></script>
 
<!-- Element Event Delegation Module source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/element-delegate/element-delegate-min.js"></script>
 

<div id="container">
	<ul>
		<li id="item-1"><em>Item Type One</em></li>
		<li id="item-2"><em>Item Type Two</em></li>
		<li id="item-3"><em>Item Type Three</em></li>
	</ul>
</div>
 

var container = new YAHOO.util.Element('container');
 
container.delegate("click", function(e, matchedEl) {
 
	//	The list item that matched the provided selector is the default scope
	YAHOO.log("Default scope: " + this.id);
 
	//	The list item that matched the provided selector is also passed 
	//	as the second argument in case the scope of the listener 
	//	is adjusted
	YAHOO.log("Clicked list item: " + matchedEl.id);
 
    //	The actual click target, which could be the matched item or a
    //	descendant of it.
	YAHOO.log("Event target: " + YAHOO.util.Event.getTarget(e));
 
	//	The delegation container is passed as a third argument
	YAHOO.log("Delegation container: " + container.id);
 
}, "li");
 

//create an Element instance wrapping 'foo':
var el = new YAHOO.util.Element('foo');
//we can now use the instane's get method to retrieve
//attributes and properties of 'foo':
alert(el.get('id') + ' has ' + el.get('childNodes').length + ' children');
 

//create an Element instance wrapping 'foo';
//'foo' is not yet on the page.
var el = new YAHOO.util.Element('foo');
 
//When 'foo' becomes available, we want to alert
//its id and show the number childNodes; we tell the
//Element instance to do this when the contentReady
//event fires:
el.on('contentReady', function() {
   alert(el.get('id') + ' has ' + el.get('childNodes').length + ' children');
});
 

var el = new YAHOO.util.Element('foo');
//We can access the Dom property hasChildNodes
//directly on the Element instance:
if (el.hasChildNodes()) {
    el.removeChild(el.get('firstChild'));
}
 

var el = new YAHOO.util.Element('foo');
 
//set the color style property of 'foo'
//using the Element instance:
el.setStyle('color', '#f00');
 
//set an event handler using the Element
//instance to alert the value of the 
//color style property when 'foo' is clicked:
el.on('click', function() {
    alert(this.getStyle('color'));
});