YUI 学习笔记：YUI Dom

YUI中使用最多的组件之一就是dom组件（YAHOO.util.Dom）了，看它的名字就能够大概猜到这个组件的功能了。没错，它就是封装了一下一些原生的DOM方法，并简化了一些常用的操作，而且更重要的是使用YUI的dom组件不必考虑浏览器之间的差异——这些事情YUI都帮你做好了。

在使用dom组件之前，你必须先引入dom组件的js文件：

1 2 3 4 5

<!-- Dependencies --> <script src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js"></script> <!-- Source file --> <script src="http://yui.yahooapis.com/2.6.0/build/dom/dom-min.js"></script>

或者使用YUI Loader动态引入。

下面介绍一下dom组件的一些方法。

1. get() 。这个方法类似于document.getElementById()，不过它除了接受元素的id作为参数以外，还可以接受一个id数组，比如 get(["id1", "id2"])

2. getAncestorByClassName()。这个方法用来根据元素class的属性值来获取父节点，比如有下面一段代码：

1 2 3

<div id="div1"> <p class="text">Some text.</p> </div>

那么 getAncestorByClassName(’text’) 获取到的就是 id 为 div1 的节点。

3. getFirstChild() 和 getLastChild() 。分别用来获取第一个子节点和最后一个子节点。

4. getNextSibling() 和 getPreviousSibling() 。分别用来获取下一个兄弟节点和前一个兄弟节点。

5. insertBefore( 新节点 , 参考节点id) 和 insertAfter( 新节点 , 参考节点id) 。在参考节点后面插入一个新节点。原生的DOM方法只有 insertBefore，有时候很不方便。

6. getXY() 和 setXY() 。分别用来获取和设置节点在文档坐标系中的坐标。getXY()接受节点的id作为参数，比如：getXY(”id”) ，它返回一个数组[x, y]，分别是节点的横坐标和纵坐标。而setXY()需要两个参数，第一个参数是要进行设置的节点的id，第二个是一个坐标数组，比如：setXY(”id”, [x,y]);

7. getStyle() 和 setStyle()。分别用来获取和设置节点的样式。getStyle()需要两个参数，第一个参数是元素的id，第二个参数是样式的名称，比如：getStyle(”id”, “background”) ，它返回指定样式的值。而setStyle() 则需要三个参数，前两个参数和 getStyle() 相同，第三个参数是要设置的值，比如： setStyle(”id”, “color”, “red”) 。这两个方法帮我们解决了一些很琐碎的问题，因为浏览器对CSS的支持都不一样，所以在设置样式的时候就比较麻烦，比如IE没有opacity属性，而是用滤镜实现的半透明效果，setStyle()方法就不再让我们去关心浏览器之间的差异，可以专心处理逻辑。

8. getElementsByClassName() 。顾名思义，这个方法是用来根据元素的class的值来获取节点的。它有三个参数，第一个参数是class的值，第二个参数是要取得的标签的名字（比如div），第三个参数是开始的根节点。比如 getElementsByClassName(”classname”, “div”, “root”)，这样就是从id为root的节点开始，获取所有class的值中包含 classname的DIV标签。第三个参数是可选的。

9. 其他方法自己去看API文档吧，我就不多说了。

最后补充一点，其实上面很多东西我写得都有bug，就是上面的所有方法，一般来说只要接受元素的id作为参数，那么该参数也可以是一个节点对象。因为除了get()方法本身，其它的方法内部都是使用get()方法来获取要处理的节点。咱们来看一下dom组件中 get() 方法的源码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

get: function(el) { if (el) { if (el.nodeType || el.item) { // Node, or NodeList return el; } if (typeof el === 'string') { // id return document.getElementById(el); } if ('length' in el) { // array-like var c = []; for (var i = 0, len = el.length; i < len; ++i) { c[c.length] = Y.Dom.get(el[i]); } return c; } return el; // some other object, just pass it back } return null; }

看了源码我想大家应该都清楚了，如果这个el本身就是个节点对象的话，get()方法就不会对其进行处理，而是直接返回。

以后有空多看看YUI的源码，多学习一些其中的思想。