YUI 3 学习笔记（2）- Node

yiyu

浏览: 186275 次
性别:
来自: 北京

最近访客更多访客>>

彭彪321

webeasymail

dawei1980

akacd

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

YUI JavaScript jQuery IE Firefox

Node是用来操作DOM node的工具，实际上每一个Node实例都代表着一个DOM node，每一
个NodeList都代表着一组DOM node.

从YUI2.x到YUI3.0相关的api发生了一些变化，具体可以参见本文的最后部分。

1. 要使用Node，首先要引入YUI3的种子文件：

<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

然后加载相应模块：

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

2. 获得Node
可以使用YUI.one()获取Node，该方法的参数可以是一个Node，也可以是一个选择器（selector）,
在使用选择器时，返回第一个匹配的元素。默认情况下css3选择器不被支持，如果要使用，需要
加载“selector-css3”模块。关于css3 selector可以参见这里：
http://www.w3.org/TR/css3-selectors
以下是使用YUI.one()的例子：

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

3. 访问Node属性
可以使用Node的set，get方法访问Node的属性，需要注意的是如果返回节点的话返回的是
YUI Node而不是DOM 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);
});

4. 事件监听
　　可以用on方法添加事件监听器：

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

5. DOM方法
Y.Node提供了所有DOM node的原有方法

6. NodeList的使用
NodeList提供了与Node相似的API，但是它的处理时对所有NodeList中的所有Node作用的。
例如如下代码对demo的所有子元素添加'bar'类：

  YUI().use('node', function(Y) {
    Y.one('#demo').get('children').addClass('bar');
});

7. 查找
Node提供one，all，test方法分别实现查找第一个匹配元素，查找所有匹配元素，测试
是否存在匹配元素的功能

8. YUI 2.x和YUI 3.x的对应表
YUI2.x的Node功能是由YAHOO.util.Dom提供的，其与YUI3.0的对应关系如下：

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
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

分享到：

YUI 3 学习笔记（3）- Event | YUI 3 学习笔记（1）-YUI Global对象

2010-03-01 17:46
浏览 2521
评论(5)
论坛回复 / 浏览 (3 / 4924)
分类:Web前端
查看更多

5 楼 lclcr 2011-02-11

yiyu，谢谢。
在IE下没问题，在FF下如果将HTML文件和yui-min.js文件放在服务器下就没有问题，看来其相对路径FF不知道如何打开。

4 楼 yiyu 2011-02-10

yui-min.js的路径对吗？
在firefox里看看yui代码加载进来了吗？

3 楼 lclcr 2011-02-10

<html>
<head>
<title>测试YUI</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<script type="text/javascript" src="yui-min.js"></script>
<script type="text/javascript">
alert("begin");
YUI().use('node', function(Y) {
var node1 = Y.one('#id_but');
alert(node1);
});
alert("end");
</script>
</head>
<body>
<input type="button" nam="n_but" id="id_but" value="click"/>
<input type="button" nam="s_but" id="id_sbut" value="stop"/>
<br/>
</body>
</html>
我的YUI部分根本就没有执行，请问是什么原因呢？

2 楼 tyc1920 2010-11-26

YUI有哪些优点啊，跟JQuery相比有哪些区别？

1 楼 200830740306 2010-03-06

学习了

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论