`
decentway
  • 浏览: 160034 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论
阅读更多

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规范:

注意:默认不包含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
分享到:
评论

相关推荐

    yui3-master.zip

    《深入理解YUI3:基于yui3-master.zip的探讨》 YUI(Yahoo! User Interface Library)是由雅虎公司开发的一套开源JavaScript库,它为Web开发者提供了丰富的功能和工具,以创建交互性强、性能优秀的网页应用。YUI3是...

    YUI3 中tree的两种实现

    这篇博文“YUI3 中tree的两种实现”探讨了如何在YUI3中创建和管理树形结构。 1. **YUI3 TreeView组件** YUI3 TreeView组件是YUI3核心库的一部分,它允许开发者创建交互式的树结构。这个组件支持节点的添加、删除、...

    YUI3.7.3 最新版本 带API

    3. **CSS样式工具**:YUI3包含了一套CSS工具,如样式类名管理器(YUI.addClass, YUI.removeClass等),这有助于在JavaScript中动态控制元素的样式。 4. **DOM操作**:YUI3提供了丰富的DOM操作接口,如查找元素(YUI...

    yui 资源包

    1. **DOM操作**:YUI的Node和Selector模块提供了高效的DOM操作接口,包括选择、操作、遍历DOM元素。 2. **Ajax**:IO模块用于实现异步数据请求,支持JSONP、XHR等通信方式。 3. **表格与表单**:DataTable和Form模块...

    yui3-3.17.2最新版

    YUI 3包含了一系列核心模块,如Event(事件处理)、Node(DOM操作)、IO(异步数据交互)等,同时还有许多可选的组件,如Grids(表格)、Charts(图表)、Form(表单元素)等,覆盖了前端开发的多个方面。...

    YUi文档(中文的哦)

    要使用Node模块,首先需要引入YUI3的种子文件,并通过`YUI().use()`加载`node`模块。 ```html &lt;script src="yuiload/yui-min.js"&gt; YUI().use('node', function (Y) { // 使用Node API的代码 }); ``` ##### Node...

    YUI js方法使用列子

    3. **Event(事件)**:YUI的事件系统支持事件监听、事件代理和事件分发,使得事件处理更加高效和灵活。 4. **Animation(动画)**:提供了平滑的CSS和属性动画,可以创建各种复杂的过渡效果。 5. **DataSource...

    nodejs-yui:这是带有yui的node.js

    nodejs-yui 这是带有yui的node.js 首先在您的计算机上安装node.js。 将此文件解压缩到目录中。 从终端窗口进入目录并运行'npm install'可能是需要此权限的sudo用户权限。 运行“节点服务器”。 转到

    yui 3.1.2 源码 6MB大小 0资源分

    YUI 3的设计目标是模块化和轻量化,它引入了模块系统,使得开发者可以根据需要只加载必要的组件,从而降低页面加载时间。在3.1.2版本中,这一特性得到了充分的体现。源码中的每个模块都是独立的,通过AMD...

    YAHOO YUI3简单入门

    这些方法与jQuery类似,但YUI3的设计更加面向对象,如`Node`和`Selector`模块,它们提供了更加高效和灵活的方式来处理DOM元素。 **事件处理** YUI3的事件系统支持DOM事件绑定、解绑和触发,以及自定义事件。它还...

    雅虎YUI组建

    - **Node**: Node模块提供了对DOM节点的操作,如选择、创建、修改和删除等,简化了DOM操作。 - **Anim**: 动画模块,用于实现各种复杂的动画效果,包括平滑的CSS属性过渡和JavaScript对象属性变化。 - **IO**: IO...

    YUI 详细说明文档

    - `YAHOO.util.Dom.getElementsBy(method, tagName, rootNode)`:在指定根节点下搜索满足条件的元素,支持传入自定义过滤函数。 **2.2 样式控制和访问** 提供了诸如`addClass`, `removeClass`, `toggleClass`, `...

    YUI 3 Cookbook

    ### YUI 3 Cookbook 关键知识点解析 #### 一、YUI 3 概述与书籍价值 **YUI 3** 是一个由雅虎开发的JavaScript库,它提供了丰富的功能来帮助开发者创建高质量的Web应用程序。这本书《YUI 3 Cookbook》由Evan Goer...

    yui_3.8.1.zip

    3. **CSS样式和布局**:YUI包含一套响应式设计的CSS框架,如Grids布局系统,帮助开发者快速创建响应式的网页布局。 4. **数据管理**:YUI提供了Model、ModelList和Store等组件,用于数据的存储、管理和同步,与...

    Ajax(yui-slideshow)

    4. **自定义导航**:可以使用YUI的Node API创建自定义导航元素,并绑定相应的事件处理函数。 5. **控制幻灯片**:YUI Slideshow提供了一系列方法供开发者控制幻灯片的播放,如`next()`、`prev()`、`jumpTo()`等。 ...

    YUI compressor源码jar包

    3. **学习价值**:对于前端开发者和Java开发者而言,阅读YUI Compressor的源码可以帮助他们更好地理解JavaScript和CSS的压缩过程,了解代码优化的技术,这对于提升自己的编程技能非常有益。 **二、YUI Compressor ...

    YUI英文API文档

    3. **Node API**:Node模块提供了一组强大的方法来操作DOM元素,如创建、查找、修改和管理DOM节点。了解如何使用`Y.Node`和`Y NodeList`对象可以极大提高你的DOM操作效率。 4. **事件系统**:YUI的事件系统允许你...

    yui最新版,api example docs

    1. **模块**:YUI由多个模块组成,如Core(核心)、Event(事件)、Node(DOM节点操作)、IO(异步数据请求)等。每个模块都提供了一组相关功能。 2. **类**:每个模块下有若干个类,这些类定义了对象的行为和属性...

    经典的YUI 示例中文文档

    ### 经典的YUI 示例中文文档 #### YUI概述 YUI(Yahoo User Interface Library)是由雅虎公司开发的一款免费、开源的JavaScript库。它包含了一系列强大的UI控件和实用工具,旨在帮助开发者轻松地构建高性能的Web...

    针对YUI框架API

    3. **DOM操作** Node模块提供了便捷的DOM操作接口,可以快速地选取、创建、修改DOM元素,增强了JavaScript对HTML文档的操作能力。 4. **CSS样式管理** YUI的StyleSheet模块允许开发者动态修改CSS样式,实现页面...

Global site tag (gtag.js) - Google Analytics