YUI 学习笔记：YUI Dom

最新推荐文章于 2022-02-25 18:19:43 发布

wankunde

最新推荐文章于 2022-02-25 18:19:43 发布

阅读量210

点赞数

分类专栏： YUI学习文章标签： YUI 浏览器 Yahoo IE C

本文链接：https://blog.csdn.net/wankunde/article/details/83739059

版权

YUI学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

<!-- 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() 方法的源码：

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