YUI3:Node

YUI的Node功能为获取、创建、操作DOM节点提供很易懂的方式。每个Node实例代表一个DOM节点，每个NodeList代表一系列DOM节点。我们可以管理Node的className(myNode.addClass(‘foo’)) 和样式(myNode.setStyle(‘opacity’, 0.5))、可以创建DOM元素(Y.Node.create(‘foo’))等。

引入YUI种子文件和配置YUI实例就不累述了，详见 YUI 3: YUI 全局对象。

获取Node实例

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

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

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

下面的代码展示获取Node实例的两种方式：

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

使用Node功能

下面的内容详细说明如何使用YUI的Node共功能。包含如下几个部分：

• 访问Node实例的属性
• DOM事件
• DOM方法
• Node List(节点集)
• Node Queries(节点查询)

访问Node实例的属性

Node实例内的DOM节点的属性可以通过Y.Node实例的set和get方法访问。简单类型的属性(string、number、boolean)直接传入/传出Node实例的DOM节点，原来返回DOM节点的属性会返回Y.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);
});

DOM事件

使用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'));
    });
});

DOM方法

Y.Node API提供了所有的你能想到的DOM方法，还有提供了一些额外的执行常见操作的方法。和上述的属性及事件一样，原来返回DOM节点的方法将返回Y.Node实例。

使用 NodeList

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

Y.all方法是获取NodeList最简单的方法。

YUI().use('node', function(Y) {
    Y.all('#demo li').addClass('bar');
});

Node Queries

选择器查询是很强大的操作、测试节点的方法。所有的Y.Node实例都支持“one”、“all”、“test”方法。

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');
    }
});

• CSS Level 3 Selectors
• Selectors API

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

ARIA支持

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

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

通过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 });
});

功能迁移表

Node上有YAHOO.util.Dom大部分的功能。

注意：在下面的示例代码中，myNode是一个Node实例。以前返回DOM节点的方法在这里返回Node实例。