1.Include Dependencies:
<script type="text/javascript" charset="utf-8"
src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js">
</script>
2.The YUI Instance:
YUI().use('node', function(Y) {
// Node available, and ready for use.
});
3.Getting a Node:
YUI().use('node', function(Y) {
var node1 = Y.one('#main');
var node2 = Y.one(document.body);
});
4.Using Node:
4.1Accessing Node Properties:
YUI().use('node', function(Y) {
var node = Y.one('#foo');
var parent = node.get('parentNode'); // Node instance
var html = 'I am "' + node.get('id') + '".';
html += 'My parent is "' + parent.get('id') + '"';
node.set('innerHTML', html);
});
4.2DOM Events
YUI().use('node', function(Y) {
Y.one('#demo').on('click', function(e) {
e.preventDefault();
alert('event: ' + e.type + ' target: ' + e.target.get('tagName'));
});
});
4.3DOM Methods
YUI().use('node', function(Y) {
var node = Y.one('#demo');
var node2 = node.appendChild(Y.one('#foo p'));
node2.addClass('bar');
});
4.4Using NodeList
YUI().use('node', function(Y) {
Y.all('#demo li').addClass('bar');
});
YUI().use('node', function(Y) {
Y.one('#demo').get('children').addClass('bar');
});
4.5Node Queries
YUI().use('node', function(Y) {
var node = Y.one('#demo');
var node2 = node.one('p');
if (node2) { // might be null
node2.addClass('bar'); // adds "bar" to the first paragraph descendant of #demo
}
node.all('p').addClass('bar'); // adds "bar" to all paragraph descendants of #demo
if (node.test('.foo.bar')) { // "if node has both foo and bar classNames"
node.removeClass('bar');
}
});
4.6ARIA Support
YUI().use('node', function(Y) {
var node = Y.one('#toolbar').set('role', 'toolbar');
});
YUI().use('node', function(Y) {
Y.one('#rootmenu').set('role', 'menubar').all('.menu').setAttrs({ role: 'menu', 'aria-hidden': true });
});
5.method
myNode.addClass
NodeList[methodName], NodeList.each, or Y.each
Y.guid
Y.one Note strings are now treated as selectors (e.g. "Y.one('#foo')" vs. "YAHOO.util.Dom.get('foo')")
myNode.ancestor
myNode.ancestor
myNode.ancestor
myNode.get('children')
myNode.all
myNode.get('viewportRegion')
myNode.get('docHeight')
myNode.get('docScrollX')
myNode.get('docscrollY')
myNode.get('docWidth')
myNode.all
myNode.all
myNode.one
myNode.one
myNode.one
myNode.one
myNode.next
myNode.next
myNode.previous
myNode.previous
myNode.get('region')
myNode.getStyle
myNode.get('winHeight')
myNode.get('winWidth')
myNode.getXY
myNode.getXY
myNode.getXY
myNode.hasClass
myNode.inDoc
myNode.insert
myNode.insert
myNode.contains (Note myNode.contains(myNode) === true)
myNode.removeClass