学校网站建设评比,重庆建站,中国建筑集团有限公司待遇,网站导航还值得做Node是用来操作DOM node的工具#xff0c;实际上每一个Node实例都代表着一个DOM node#xff0c;每一
个NodeList都代表着一组DOM node. 从YUI2.x到YUI3.0相关的api发生了一些变化#xff0c;具体可以参见本文的最后部分。 1. 要使用Node#xff0c;首先要引入YUI3的种子文…Node是用来操作DOM node的工具实际上每一个Node实例都代表着一个DOM node每一
个NodeList都代表着一组DOM node. 从YUI2.x到YUI3.0相关的api发生了一些变化具体可以参见本文的最后部分。 1. 要使用Node首先要引入YUI3的种子文件 script srchttp://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可以参见这里
[url]http://www.w3.org/TR/css3-selectors[/url]
以下是使用YUI.one()的例子 YUI().use(node, function(Y) { var node1 Y.one(#main); var node2 Y.one(document.body);}); 3. 访问Node属性 可以使用Node的setget方法访问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提供onealltest方法分别实现查找第一个匹配元素查找所有匹配元素测试
是否存在匹配元素的功能 8. YUI 2.x和YUI 3.x的对应表 YUI2.x的Node功能是由YAHOO.util.Dom提供的其与YUI3.0的对应关系如下
[table]
|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
[/table]
