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

 关于选择器查询更多内容，请查看W3C规范：

• 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实例。

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 Note strings are now treated as selectors (e.g. “Y.one(‘#foo’)” vs. “YAHOO.util.Dom.get(‘foo’)”)
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