YUI之节点获取

 

一、为什么要先讲DOM节点的获取？

理解这个首先我们要理解使用原生代码写Script脚本的方式，我们一般都是通过获取一个DOM对象，然后对这个节点进行操作，例如：

var dom = document.getElementById(“dom1”); dom.setAttribute(“width”,100);

 

 

 

 

但是在YUI里面已经封装了DOM，并且将DOM的操作方法全部重做了，如果同样实现上面的操作，YUI3里面你就需要写成这样

var dom=Y.one(“#dom1”);dom.setStyle(‘width’,100);

 

 

 

 

先就这么理解就行了。所以使用YUI前提需要学会获取YUI的DOM节点。

 

二、一个简单完整的利用YUI进行页面操作的例子

 

首先，在你的页面中插入YUI脚本

<script type="text/javascript" charset="utf-8"

        src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js">

</script>

然后是代码

YUI().use('node', function(Y) {// 你会发现这里面有个‘node’，而且很多地方后面还有’node’,’event’,’json’之类的，这都是YUI的moudle。所有的节点操作相关的都基本上可以使用node来完成,具体什么时候需要在这里写什么以后再说 var node = Y.one('#foo');// 获取id为foo的节点对象 var html = 'I am "' + node.get('id') + '".'; node.set('innerHTML', html);// 设置节点node的innerHTML值。 });

 

简单的例子完成。

 

三、Y.one()方法介绍

Y.one()的意思是获取一个单独的节点

传入的参数可以是

 

css选择器的字符串，比如:

#foo   获取id为foo的对象

.foo   获取第一个class为foo的对象

#foo #test 获取#foo下面id为test的对象Y.one(“#foo #test”)

需要注意的是YUI3.1之后已经对firefox2不支持，对于class选择器在firefox下面会失效。

 

也可以是一个YUI节点，比如：

var node = Y.one('#foo'); var node2 = Y.one(node);//注意这里面就不是带引号的字符串了

 

 

 

也可以是一般的dom节点，比如:

var node = Y.one(document.getElementById(‘#foo’))

 

 

四、Y.all()方法

这个跟Y.one类似，只是说获取的是所有的对象，而不是一个，容易理解，其他和Y.one一样使用就行

 

五、Y.Node.one和Y.Node.all

学习YUI必须需要看YUI的api文档，你会发现，one和all方法不仅仅在yui这个大对象里面有，而且在Y.Node里面也有这两个方法，所以如果通过Y.one或者Y.all获取到了一个节点，那么这个节点也可以通过.one或者.all方法来获取他的其他下级子节点，我们可以这么理解document.getElementById()方法是在这个document文档里面来查找对应id的节点，如果我们已经找到了一个节点dom1，我们也可以使用dom1.getElementById()来获取在dom1整个节点树下面相对应id的节点对象，YUI也是一样，如果我们使用var node = Y.one('#foo');

获取到了节点node，那么我们就可以使用var node2 = node.one(‘#test’)来获取node下面id为test的节点对象。