[转帖]Mootools源码分析-15 -- Element-2

最新推荐文章于 2011-08-28 12:52:00 发布

weixin_30657999

最新推荐文章于 2011-08-28 12:52:00 发布

阅读量84

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/maapaa/articles/mootools-s-15.html

本文介绍了一个用于MooTools框架的DOM操作方法，包括获取当前节点的前后同级节点、子节点及父节点等实用功能。这些方法通过模块化的方式实现，能够有效地遍历DOM树并获取所需元素。

原帖地址：http://space.flash8.net/space/?18713/viewspace-403044.html

原作者：我佛山人

// 模块化写法，就地执行
( function ()    {

     /*
    步进访问父/子/兄弟节点，高度抽象，设计比较巧妙
    eleemnt 当前节点
    walk 指定步进的方式
    start 初始节点的位置
    match 匹配过滤的标签
    all 是否返回所有指定步进中包含的节点
    nocash 是否需要对节点进行扩展，默认为false，需要
     */
     var walk = function (element, walk, start, match, all, nocash)    {
         // 先确定步进的起始位置
         var el = element[start || walk];
         var elements = [];
         while (el)    {
             // 仅返回HTML Element节点和匹配指定标签的节点(在指定匹配标签时)
             if (el.nodeType == 1 && ( ! match || Element.match(el, match)))    {
                elements.push(el);
                 // 当不需要返回所有符合条件节点时立刻跳出循环
                 if ( ! all)     break ;
            }
         // 移动
        el = el[walk];
        }
         return (all) ? new Elements(elements, {ddup: false , cash: ! nocash}) : $(elements[ 0 ], nocash);
    };

    Element.implement({

         // 获取当前节点前面的同级节点
        getPrevious: function (match, nocash)    {
             return walk( this , ' previousSibling ' , null , match, false , nocash);
        },

         // 获取当前节点前面所有的同级节点
        getAllPrevious: function (match, nocash)    {
             return walk( this , ' previousSibling ' , null , match, true , nocash);
        },

         // 获取当前节点后面的同级节点
        getNext: function (match, nocash)    {
             return walk( this , ' nextSibling ' , null , match, false , nocash);
        },

         // 获取当前节点后面所有的同级节点
        getAllNext: function (match, nocash)    {
             return walk( this , ' nextSibling ' , null , match, true , nocash);
        },

         // 获取当前节点内的第一个节点
        getFirst: function (match, nocash)    {
             return walk( this , ' nextSibling ' , ' firstChild ' , match, false , nocash);
        },

         // 获取当前节点内的最后一个节点
        getLast: function (match, nocash)    {
             return walk( this , ' previousSibling ' , ' lastChild ' , match, false , nocash);
        },

         // 获取当前节点的上级节点
        getParent: function (match, nocash)    {
             return walk( this , ' parentNode ' , null , match, false , nocash);
        },

         // 获取当前节点的所有祖先
        getParents: function (match, nocash)    {
             return walk( this , ' parentNode ' , null , match, true , nocash);
        },

         // 获取当前节点的所有子节点
        getChildren: function (match, nocash)    {
             return walk( this , ' nextSibling ' , ' firstChild ' , match, true , nocash);
        },

         // 判断是否包含指定子节点
        hasChild: function (el)    {
            el = $(el, true );
             return ( !! el && $A( this .getElementsByTagName(el.tagName)).contains(el));
        }

    });

})();

转载于:https://www.cnblogs.com/maapaa/articles/mootools-s-15.html