YUI 3 学习笔记（2）- Node

Node是用来操作DOM node的工具，实际上每一个Node实例都代表着一个DOM node，每一
个NodeList都代表着一组DOM node.

从YUI2.x到YUI3.0相关的api发生了一些变化，具体可以参见本文的最后部分。

1. 要使用Node，首先要引入YUI3的种子文件：

<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

   然后加载相应模块：

YUI().use('node', function(Y) {
});

2. 获得Node
  可以使用YUI.one()获取Node，该方法的参数可以是一个Node，也可以是一个选择器（selector）,
在使用选择器时，返回第一个匹配的元素。默认情况下css3选择器不被支持，如果要使用，需要
加载“selector-css3”模块。关于css3 selector可以参见这里：
http://www.w3.org/TR/css3-selectors
以下是使用YUI.one()的例子：

YUI().use('node', function(Y) {
    var node1 = Y.one('#main');
    var node2 = Y.one(document.body);
});

3. 访问Node属性
   可以使用Node的set，get方法访问Node的属性，需要注意的是如果返回节点的话返回的是
YUI Node而不是DOM node，这一点在其他地方也要注意。
以下是相关的例子：

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. 事件监听
　　可以用on方法添加事件监听器：

YUI().use('node', function(Y) {
    Y.one('#demo').on('click', function(e) {
        e.preventDefault();
        alert('event: ' + e.type + ' target: ' + e.target.get('tagName')); 
    });
});

5. DOM方法
  Y.Node提供了所有DOM node的原有方法
 
6. NodeList的使用
  NodeList提供了与Node相似的API，但是它的处理时对所有NodeList中的所有Node作用的。
  例如如下代码对demo的所有子元素添加'bar'类：

  YUI().use('node', function(Y) {
    Y.one('#demo').get('children').addClass('bar');
});

7. 查找
  Node提供one，all，test方法分别实现查找第一个匹配元素，查找所有匹配元素，测试
是否存在匹配元素的功能

8. YUI 2.x和YUI 3.x的对应表
   YUI2.x的Node功能是由YAHOO.util.Dom提供的，其与YUI3.0的对应关系如下：

2.x (via YAHOO.util.Dom)	3.0
addClass	myNode.addClass
batch	NodeList[methodName], NodeList.each, or Y.each
generateId	Y.guid
get	Y.one
getAncestorBy	myNode.ancestor
getAncestorByClassName	myNode.ancestor
getAncestorByTagName	myNode.ancestor
getChildren	myNode.get('children')
getChildrenBy	myNode.all
getClientRegion	myNode.get('viewportRegion')
getDocumentHeight	myNode.get('docHeight')
getDocumentScrollLeft	myNode.get('docScrollX')
getDocumentScrollTop	myNode.get('docscrollY')
getDocumentWidth	myNode.get('docWidth')
getElementsBy	myNode.all
getElementsByClassName	myNode.all
getFirstChild	myNode.one
getFirstChildBy	myNode.one
getLastChild	myNode.one
getLastChildBy	myNode.one
getNextSibling	myNode.next
getNextSiblingBy	myNode.next
getPreviousSibling	myNode.previous
getPreviousSiblingBy	myNode.previous
getRegion	myNode.get('region')
getStyle	myNode.getStyle
getViewportHeight	myNode.get('winHeight')
getViewportWidth	myNode.get('winWidth')
getX	myNode.getXY
getY	myNode.getXY
getXY	myNode.getXY
hasClass	myNode.hasClass
inDocument	myNode.inDoc
insertAfter	myNode.insert
insertBefore	myNode.insert
isAncestor	myNode.contains (Note myNode.contains(myNode) === true)
removeClass	myNode.removeClass
replaceClass	myNode.replaceClass
setStyle	myNode.setStyle
setX	myNode.setXY
setY	myNode.setXY
setXY	myNode.setXY