jQuery 源碼分析(十九) DOM遍歷模塊詳解

時間 2019-11-08

標籤 jquery 源碼分析十九 dom 遍歷模塊詳解欄目 JQuery 简体版

原文原文鏈接

jQuery的DOM遍歷模塊對DOM模型的原生屬性parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling進行了封裝和擴展，用於在DOM樹中遍歷父元素、子元素和兄弟元素。html

能夠經過jQuery的實例來訪問，方法以下:node

parent() 　　　　　　;獲取匹配元素的父元素
parents(selector) 　　　;獲取匹配元素的全部祖先元素　　　　　　　　　　　　 ;selector用於過濾查找的元素，若是爲空則獲取全部的祖先元素
parentsUntil(until,selector) ;得到當前匹配元素集合中每一個元素的祖先元素,直到遇到until元素
next() 　　　　　　 ;獲取匹配元素以後緊挨着的兄弟元素,沒有則返回undefined
nextAll(selector) 　　 ;獲取匹配元素以後緊挨着的全部兄弟元素
nextUntil(until,selector) 　 ;獲取匹配元素以後緊挨着的全部兄弟元素，直到遇到until元素
prev() 　　　　　　 ;獲取匹配元素以前緊挨着的兄弟元素,沒有則返回undefined
prevAll(selector) 　　 ;獲取匹配元素以前緊挨着的全部兄弟元素
prevUntil(until,selector) ;獲取匹配元素以前緊挨着的全部兄弟元素，直到遇到until元素
siblings(selector) 　　 ;獲取匹配元素的全部兄弟元素，若是指定了selector則只獲取該類型的元素
children(selector) 　　 ;獲取匹配元素的子元素，不包括文本節點和註釋節點
contents() 　　　　 ;獲取匹配元素的子元素，包括文本節點和註釋節點

舉個栗子:jquery

writer by:大沙漠 QQ:22969969數組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <h1>Hello World!</h1>
        <p>123</p>
        <span>123</span>        
    </div>
    <script>
        console.log( $('p').parent() )            //獲取p元素的父元素
        console.log( $('p').prev() )              //獲取p元素以前緊挨的兄弟元素
        console.log( $('p').next() )              //獲取p元素以後緊挨的兄弟元素
        console.log( $('p').siblings() )          //獲取p元素的全部兄弟元素
        console.log( $('div').children() )        //獲取div的全部子元素,不包括文本節點和註釋節點
        console.log( $('div').contents() )        //獲取div的全部子元素,包括文本節點和註釋節點
    </script>
</body>
</html>

輸出以下:函數

對應栗子裏的每個輸出，分別輸出工具

p元素的父節點
p元素的上一個兄弟元素
p元素的下一個兄弟元素
p元素的全部兄弟元素
div元素過濾掉文本節點和空白節點的子節點
div元素包括文本節點和空白節點的子節點

返回的都是一個jQuery對象，很是的好用，操做DOM時都會用到這幾個方法源碼分析

源碼分析this

jQuery對於DOM遍歷模塊的實現是基於三個工具函數實現的spa

$.dir(elem, dir, until)　　　　 ;從elem元素開始，查找dir方向(能夠是:parentNode、nextSibling或previousSibling)上的全部元素，若是在查找過程當中遇到匹配參數until的元素，則查找終止
$.nth(cur, result, dir, elem)　　;從cur元素出發，查找dir方向(parentNode、nextSibling或previousSibling)上的第result個元素
$.sibling(n, elem)　　　　　　 ;負責查找一個元素以後的全部兄弟元素，包括起始元素，但不包括參數elem。n是查找的起始元素，包含在結果集中，elem是可選的DOM元素，不包含在返回結果中。

舉個栗子:code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <h1>Hello World!</h1>
        <p>123</p>
        <span>123</span>        
    </div>
    <script>    
        var h1 = document.getElementsByTagName('h1')[0],          //分別獲取h一、p、span元素的節點引用
            p = document.getElementsByTagName('p')[0],
            span = document.getElementsByTagName('span')[0];
        console.log( $.dir(h1,'parentNode') )                     //打印h1的全部祖先節點            
        console.log( $.nth(h1,3,'nextSibling') )                  //獲取h1以後的第二個節點
        console.log( $.sibling(h1,h1) )                           //獲取h1的全部兄弟元素，默認獲取包括自身在內的元素，參數2也傳入h1表示排除h1元素
    </script>
</body>
</html>

輸出以下:

輸出三行，分別對應h1的全部祖先節點、h1以後的第二個子節點和h1的全部兄弟元素，和DOM樹中也是對應的。

對於$.dir、$.nth和$.sibling來講，它的實現以下:

jQuery.extend({
    dir: function( elem, dir, until ) {        //從elem元素開始，查找dir方向(能夠是:parentNode、nextSibling或previousSibling)上的全部元素，若是在查找過程當中遇到匹配參數until的元素，則查找終止。
        var matched = [],
            cur = elem[ dir ];                    //cur表示下一個元素，根據參數dir不一樣，多是父元素、前一個兄弟元素 或者 後一個兄弟元素

        while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {    //若是下一個元素存在 且 不是document對象(nodeType等於9) 則繼續判斷括號裏的語句，不然跳出循環  括號內:若是沒有傳入until參數，或者傳入了until參數而且當前元素不是Element節點(屬性nodeType等於1)    或者 傳入了until參數且當前參數是Element節點且該元素不匹配參數until 則進行循環
            if ( cur.nodeType === 1 ) {                    //若是cur是元素節點
                matched.push( cur );                        //存儲到數組matched中
            }
            cur = cur[dir];                                //獲取下一個方向上的元素
        }
        return matched;                                //返回找到了的Element節點數組。
    },

    nth: function( cur, result, dir, elem ) {    //從cur元素出發，查找dir方向(parentNode、nextSibling或previousSibling)上的第result個元素
        result = result || 1;
        var num = 0;                                //當前查找的元素序號

        for ( ; cur; cur = cur[dir] ) {                    //從起始元素cur觸發，沿着方向dir迭代遍歷，只要cur元素存在則一直查找，直到查找該方向上的第result個Element節點
            if ( cur.nodeType === 1 && ++num === result ) {    //若是cur是一個元素節點，則num+1，此時若是num等於result,則表示查找到該元素了，則跳出循環
                break;
            }
        }

        return cur;                                        //返回查找到的cur元素。
    },

    sibling: function( n, elem ) {                //負責查找一個元素以後的全部兄弟元素，包括起始元素，但不包括參數elem。n是查找的起始元素，包含在結果集中，elem是可選的DOM元素，不包含在返回結果中。
        var r = [];

        for ( ; n; n = n.nextSibling ) {                //從起始元素n觸發，迭代遍歷其後的全部兄弟元素
            if ( n.nodeType === 1 && n !== elem ) {            //若是該兄弟元素是元素節點且不等於參數elem則被放入數組r中。
                r.push( n );
            }
        }

        return r;                                        //返回存放了找到的Element節點的數組r
    }
});

也就是對parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling這些原生DOM操做的一些封裝

咱們經過jQuery實例能夠訪問的方法的實現以下:

jQuery.each({
    parent: function( elem ) {                        //返回匹配元素的父元素
        var parent = elem.parentNode;
        return parent && parent.nodeType !== 11 ? parent : null;    //若是父元素存在且不是文檔碎片元素，則返回該父元素，不然返回null
    },
    parents: function( elem ) {                        //返回匹配元素的全部祖先元素
        return jQuery.dir( elem, "parentNode" );
    },
    parentsUntil: function( elem, i, until ) {        //得到當前匹配元素集合中每一個元素的祖先元素，直到遇到until元素
        return jQuery.dir( elem, "parentNode", until );
    },
    next: function( elem ) {                        //獲取匹配元素以後緊挨着的兄弟元素    
        return jQuery.nth( elem, 2, "nextSibling" );
    },
    prev: function( elem ) {                        //獲取匹配元素以前緊挨着的兄弟元素
        return jQuery.nth( elem, 2, "previousSibling" );
    },
    nextAll: function( elem ) {                        //獲取匹配元素以後緊挨着的全部兄弟元素    
        return jQuery.dir( elem, "nextSibling" );
    },
    prevAll: function( elem ) {                        //獲取匹配元素以前緊挨着的全部兄弟元素
        return jQuery.dir( elem, "previousSibling" );
    },
    nextUntil: function( elem, i, until ) {            //獲取匹配元素以後緊挨着的全部兄弟元素    ，直到遇到匹配元素until爲止
        return jQuery.dir( elem, "nextSibling", until );
    },
    prevUntil: function( elem, i, until ) {            //獲取匹配元素以前緊挨着的全部兄弟元素    ，直到遇到匹配元素until爲止
        return jQuery.dir( elem, "previousSibling", until );
    },
    siblings: function( elem ) {                    //獲取匹配元素的全部兄弟元素
        return jQuery.sibling( elem.parentNode.firstChild, elem );
    },
    children: function( elem ) {                    //獲取匹配元素的子元素
        return jQuery.sibling( elem.firstChild );
    },
    contents: function( elem ) {                    //獲取匹配元素的子元素，包括文本節點和註釋節點
        return jQuery.nodeName( elem, "iframe" ) ?
            elem.contentDocument || elem.contentWindow.document :
            jQuery.makeArray( elem.childNodes );
    }
}, function( name, fn ) {                            //模板函數，用於調用對應的遍歷函數查找DOM元素，而後執行過濾、排序、和去重操做         name是每一個函數名，fn是對應的值(也就是函數)
    jQuery.fn[ name ] = function( until, selector ) {        //定義模版函數,真正是在這裏定義的，它接收兩個參數 until:選擇器表達式，用於指示查找中止的位置。selector:選擇器表達式，用於過濾找到的元素
        var ret = jQuery.map( this, fn, until );                //調用方法jQuery.map()遍歷當前匹配元素集合，對每一個元素調用遍歷函數fn，並將遍歷函數fn的返回值放入一個新的數組ret中。

        if ( !runtil.test( name ) ) {                        //若是遍歷函數名不以'Until'結尾的，則最多隻有一個參數
            selector = until;                                    //修正參數selector爲until
        }

        if ( selector && typeof selector === "string" ) {    //若是設置了參數selector 且selector是一個字符串
            ret = jQuery.filter( selector, ret );                //則調用jQuery.filter()對數組ret中的DOM元素逐個過濾，最終只保留匹配選擇器表達式selector的元素。
        }

        ret = this.length > 1 && !guaranteedUnique[ name ] ? jQuery.unique( ret ) : ret;

        if ( (this.length > 1 || rmultiselector.test( selector )) && rparentsprev.test( name ) ) {        //排序
            ret = ret.reverse();                
        }

        return this.pushStack( ret, name, slice.call( arguments ).join(",") );    //建立一個jQuery對象並返回
    };
});