YUI3学习（四）--- Node

YUI3 ‘node’ 模块为创建、操作和获取DOM节点对象（集合）提供了丰富的方法。该模块包含两个主要的对象 Node和NodeList。每一个Node实例表示一个底层的DOM节点；每一个NodeList实例表示一组DOM节点集合。相比YUI2，YUI3 的 Node在模块组织和方法上有了很大的精简，但同样提供丰富的功能；下面简单介绍下node模块Node和NodeList的主要方法和使用。完整功能列表可参考官方API文档。

 

     YUI3 Node API是基于标准的DOM API的，它提供一些便捷的属性和方法使常用的DOM操作变得更简单，实现代码也更简洁。熟悉标准的DOM API的开发者会发现使用Node实例非常熟悉。

 

     获取Node实例最简单的办法就是使用YUI实例的“one”方法。Y.one方法接收页面上的DOM元素作为参数，也接收“选择字符串”作为参数。如果使用“选择字符串”作为参数，会得到“选择字符串匹配的第一个元素”。

注意：默认不包含CSS3选择器支持，要得到CSS3选择器支持，你需要引入“selector-css3”模块。

（了解css3 选择器）

 

 获取DOM元素（集合）

示例

 

YUI({ filter: 'raw' }).use('node',function(Y) {
	//单实例获取 
	Y.one('#id');//根据id返回Node实例
	Y.one('tagName');//根据标签名（input、div）获取。返回第一个匹配的元素
	Y.one('.className');//根据class样式名获取.返回第一个匹配的元素。
	//获取多个实例
	Y.all('#id1,#id2');//返回所选id的元素集合
	Y.all('tagName');//返回标签为tagName的元素集合
	Y.all('.className');//返回所有标记该样式的元素集合
	Y.all('#id div');//获取id表示元素下所有的div元素
	//另，引入‘selector-css3’模块可以使用css3支持的样式选择。
});

 

此外test方法，可以判断是否有元素匹配。 var  bool = node.test('.class div');

 

使用Node对象

 

获取/设置Node属性

 

Node实例内的DOM节点的属性可以通过Y.Node实例的set和get方法访问。简单类型的属性(string、number、boolean)将直接针对底层的DOM节点操作。set和get方法返回操作的Node实例便于继续操作，不仅如此，大部分的Node方法都支持这种链式调用。

除了set和get方法外，Node还提供了setAttribute/getAttribute、setAttrs/getAttrs及removeAttribute，

 提供直接为底层DOM元素设置属性的功能；

set与setAttribute方法的比较

 

set         ：设置Node定义的属性（见下面Node扩展属性介绍），及role属性给node（见下面ARIA语义属性支持）；也可以设置该dom元素支持的属性给dom。

setAttribute：设置dom元素支持的属性，也可以设置自定义属性给dom。 

同理来区分get与getAttribute。

示例：

 

YUI({ filter: 'raw' }).use('node',function(Y) {
	var input1 = Y.one('#input1');
	//ARIA语义属性支持
	input1.set('role','inputname');	
	//Node.ATTRS属性，见 Node API 属性
	input1.set('offsetHeight',30); 
	//dom支持的属性。如 innerHTML等。
	input1.set('disabled',true);	
	input1.get('parentNode');	
	
	var input2 = Y.one('#input2');
	//dom支持属性
	input2.setAttribute('disabled',true);
	//自定义属性 
	input2.setAttribute('custAttr','v');  
	
});

 

获取/设置Node数据

  getData/setData/clearData方法：为node对象绑定自定义数据。注意数据关联的是node而非dom。

设置样式

相关方法：hasClass()、 addClass()、removeClass()、 replaceClass()、toggleClass()、

getStyle()、setStyle()、setStyles()

以上方法设置/获取对应dom节点的样式。使用可参考api参数说明。

位置相关方法

Node提供了一系列获取和设置dom位置相关的方法

getX()  getY()  getXY()    

setX()  setY()  setXY()     

swap(otherNode)   //与参数node元素交换位置。只改变dom结构中的位置；

swapXY(otherNode) //与参数node交换页面显示位置；dom树位置不变，只改变dom的top left及position属性；     

scrollIntoView()  

get('region');   //通过Node定义的region属性，可以获取该元素在页面中占据的区域。返回对象：

｛width,height,top,left｝。

节点操作及判断

Node支持丰富的dom节点操作方法，而且大部分方法与W3C dom操作方法命名一致。熟悉dom操作函数的话，了解起来也非常的简单。具体方法可参考Node api 方法列表。

Node静态方法

Y.Node.create(htmlString,[doc]) //根据html字符串创建Node对象；

Y.Node.getDOMNode(node) //返回node对象表示的底层dom对象；

Y.Node.addMethod(..)  //为Node.prototype添加方法。

 

Node扩展属性

Node的扩展属性定义在Node.ATTRS中，在YUI3中，ATTRS是定义在类上的可配置属性，会在类实例化时将ATTRS中定义的属性赋予实例对象；

在API中列出了一下扩展属性：

--只读--

children 

docHeight、docWidth

winHeight、 winWidth   

docScrollX、docScrollY      

 

region

viewportRegion 

--可读写--

scrollTop、scrollLeft

offsetHeight、offsetWidth

text     

关于属性的含义可参考api文档；这些属性可通过Node的get和set方法获取或设置。

ARIA语义属性支持

 

Node接口具有ARIA支持。当和Node内置的CSS选择器查询一起使用时，很容易应用、管理一个Node实例的 roles，states 和 properties 。

ARIA Roles，States 和 Properties提升了HTML的语义。让开发者能更精确地描述页面某板块的目的，或者提升DHTML widget对需要辅助工具用户的使用体验。

通过set方法应用ARIA Roles，States 和 Properties。比如，把id为toolbar的<div>的role设置为“toolbar”。

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

    var node = Y.one('#toolbar').set('role', 'toolbar');

});

Node内置的CSS选择器查询支持、链式方法、在一个Node实例上设置多个属性的能力，让我们在创建有很多树状子目录的DHTML widget时，很容易地应用ARIA Roles，States 和 Properties。比如，要创建一个menubar widget，我们需要将“menubar”角色指定给代表menubar的根DOM元素，再把“menu”角色指定给代表“menu”(菜单)的根 DOM元素。然后，因为菜单项默认是隐藏的，每个菜单都需要指定aria-hidden状态。Node接口让我们用一行代码就完成上述操作。

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

    Y.one('#rootmenu').set('role', 'menubar').all('.menu').setAttrs({ role: 'menu', 'aria-hidden': true });

});

 

事件注册

 

使用on方法为Node实例添加事件监听器。通过监听函数第一个参数传入的事件对象是一个event facade，这个event facade和Node API一样，将浏览器差异统一化，提供一个基于W3C标准的标准API，与DOM事件配合工作。原来返回DOM节点的事件对象属性将返回Y.Node实 例。 

示例如下：

 

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

 

 

关于事件的详细介绍请参考Event模块。

 

 

 

使用NodeList对象

 

Y.NodeList提供了和Node类似的操作多个节点的单一接口。NodeList API是Node API的简化版本，允许批量进行常见操作。Y.all方法是获取NodeList最简单的方法。

示例：设置所有div元素样式

Y.all('div').setStyle('border','1px solid red');

 

此外，NodeList支持集合相关的操作方法,如下：

concat(nodeList/Array)

each()

even()/odd()

filter()

indexOf()

isEmpty()

item(index)

pop()

push()

shift()

size()

slice()

splice()

some()

 

 

 

 

 

评论

3 楼 284772894 2012-02-27  

经常看，写的不错

2 楼 王坤明 2012-01-14  

喜欢这些内容。学到不少东西

1 楼 tangyz 2011-11-25  

写的挺好，支持下！