jQuery 源碼分析(二十一) DOM操做模塊刪除元素詳解

時間 2019-11-08

標籤 jquery 源碼分析二十一 dom 模塊刪除元素詳解欄目 JQuery 简体版

原文原文鏈接

本節說一下DOM操做模塊裏的刪除元素模塊，該模塊用於刪除DOM裏的某個節點，也能夠理解爲將該節點從DOM樹中卸載掉，若是該節點有綁定事件，咱們能夠選擇保留或刪除這些事件，刪除元素的接口有以下三個:html

empty() ;移除匹配元素的全部子元素。 ;先移除全部後代元素關聯的數據和事件，以免內存泄漏。而後移除子元素。
remove(selector,keepData) ;從匹配元素中移除selector元素。 ;selector是可選的選擇器表達式，若是未傳入則所有移除，不然只移除對應的匹配元素。keepData可選，表示是否保留匹配元素以及它的後代元素所關聯的數據和事件
detach(selector) ;從文檔中移除匹配元素集合 ;但會保留後代元素和匹配元素關聯的數據和事件，經常使用於移除的元素稍後再次插入文檔的場景。

說直接一點，node

empty()會直接移除當前匹配的元素
remove()會將當前匹配的元素中在匹配參數1selector裏的元素，若是參數2keepData爲true則保存該DOM節點的事件，不然移除事件
detach()是調用remove()實現的，用於移除當前匹配的元素，可是會保留數據，它是調用remove(selector,true)來實現的

writer by:大沙漠 QQ:22969969jquery

舉個栗子:數組

<!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>你好</h1>
    </div>
    <p>朋友</p>
    <button id="b1">測試1</button>
    <button id="b2">測試2</button>
    <button id="b3">測試3</button>
    <script>
        $('h1').click(function(){console.log('h1 click')});             //給h1元素增長一個點擊事件
        $('p').click(function(){console.log('p click')});               //給P元素增長一個點擊事件

        //如下給三個按鈕都會實現將h一、p元素從DOM樹中移除，再插入body的子節點的前面，不一樣的地方是點擊子節點時的輸出信息不一樣
        b1.onclick=function(){$('h1,p').remove().prependTo('body')}       //點擊測試1按鈕後 h1和p元素都移動到了body子節點的最前面，可是再點擊h1和p元素都沒有反應
        b2.onclick=function(){$('h1,p').remove('p').prependTo('body')}    //點擊測試1按鈕後 h1和p元素都移動到了body子節點的最前面，點擊h1有輸出，點擊p沒有輸出
        b3.onclick=function(){$('h1,p').detach().prependTo('body')}       //點擊測試1按鈕後 h1和p元素都移動到了body子節點的最前面，點擊h1和p都有輸出
    </script>
</body>
</html>

渲染以下:瀏覽器

對應的DOM樹以下:緩存

咱們給h1和p元素分別綁定了一個事件，點擊分別輸出:h1 click和p click，，點擊輸出以下:源碼分析

另外無論點擊測試一、測試2仍是測試3，都會將h1和p元素從DOM樹中卸載並插入到body子節點的最前面，以下:測試

此時再點擊h1和p元素就會有不一樣的輸出了:this

對於測試1按鈕來講 ;點擊h1和p沒有任何輸出　　;因爲調用了remove()方法且未傳遞參數，因此全部匹配的元素的事件都會被刪除掉
對於測試2按鈕來講 ;點擊h1有輸出，點擊p沒有輸出　　;因爲調用remove()方法時傳遞了p，因此把p元素的事件都刪除了，而h1元素的事件並無被刪除
對於測試2按鈕來講 ;點擊h1和p沒有任何輸出　　 ;因爲調用了detach()方法，因此全部元素的數據都被保留了，detach()內部時調用remove( selector, true )來實現的，也就是remove的參數2爲true

源碼分析spa

講解empty()、remove()和detach()以前先介紹一個jQuery的API，就是$.cleanData(elems),參數是DOM節點的集合(能夠是document.getElementsByTagName的返回值)，它用於移除一個DOM節點上綁定的jQuery事件的，咱們舉個栗子:

<!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>
    <p>Hello World</p>
    <button>測試</button>
    <script>
        $('p').click(function(){console.log('p click')});               //給P元素增長一個點擊事件
        $('button').click(function(){
            $.cleanData(document.getElementsByTagName('p'))             //給button按鈕添加一個button事件，內部調用$.cleanData去清楚p元素上綁定的事件
        })
    </script>
</body>
</html>

渲染以下:

初始化時咱們點擊Hello World控制檯會輸出信息，若是點擊按鈕後再點擊Hello World就不會輸出了，由於$.cleanData把該DOM元素的事件給卸載了，$.cleanData實現以下:

jQuery.extend({
    cleanData: function( elems ) {            //移除多個DOM元素的所有數據和事件，    elems是待移除數據和事件的DOM元素數組。
        var data, id,
            cache = jQuery.cache,
            special = jQuery.event.special,
            deleteExpando = jQuery.support.deleteExpando;

        for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {            //遍歷每一個匹配元素
            if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()] ) {        //若是不支持設置屬性，則跳過本次循環。    jQuery.noData是一個數組，保存了不支持擴展屬性的節點名稱。
                continue;
            }

            id = elem[ jQuery.expando ];                                                //屬性名,注1

            if ( id ) {                                                                    //若是該DOM對象有jQuery.expando屬性，則表示設置過數據。
                data = cache[ id ];

                if ( data && data.events ) {                                            //若是DOM的關聯數據緩存對象存在且含有events屬性，說明在該DOM上綁定過事件，則移除
                    for ( var type in data.events ) {                                        //data.events是DOM元素的事件緩存對象，存儲了DOM元素的全部事件
                        if ( special[ type ] ) {                                                
                            jQuery.event.remove( elem, type );

                        // This is a shortcut to avoid jQuery.event.remove's overhead
                        } else {
                            jQuery.removeEvent( elem, type, data.handle );
                        }
                    }

                    // Null the DOM reference to avoid IE6/7/8 leak (#7054)
                    if ( data.handle ) {
                        data.handle.elem = null;
                    }
                }

                if ( deleteExpando ) {                                                    //若是jQuery.support.deleteExpando;返回ture，即瀏覽器支持刪除DOM元素上的擴展屬性
                    delete elem[ jQuery.expando ];                                             //刪除DOM元素的jQuery.expando屬性

                } else if ( elem.removeAttribute ) {                                     //若是瀏覽器不支持刪除DOM元素上的擴展屬性，則調用removeAttribute刪除屬性
                    elem.removeAttribute( jQuery.expando );
                }

                delete cache[ id ];                                                     //刪除DOM元素的數據緩存對象cache[id]
            }
        }
    }
    /*略*/
})

注1:jQuery綁定的事件對應的信息都存在$.cache裏，鍵名是對應DOM對象的jQuery.expando,也就是這裏的elem[ jQuery.expando ]，有疑問能夠看看以前事件的講解:https://www.cnblogs.com/greatdesert/p/11679334.html

cleanData就是刪除參數elems裏全部DOM元素的事件，本節的empty()和remove()都是基於cleanData實現的，empty()實現以下:

jQuery.fn.extend({
    empty: function() {                                     //從文檔中移除匹配元素的全部子元素。
        for ( var i = 0, elem; (elem = this[i]) != null; i++ ) {            //遍歷當前匹配的每一個元素
            // Remove element nodes and prevent memory leaks
            if ( elem.nodeType === 1 ) {
                jQuery.cleanData( elem.getElementsByTagName("*") );                ////先移除全部後代元素關聯的數據和事件，以免內存泄漏
            }     

            // Remove any remaining nodes
            while ( elem.firstChild ) {                                     //而後移除子元素。
                elem.removeChild( elem.firstChild );
            }
        }

        return this;
    },
})

empty()內首先調用cleanData()移除全部子孫節點的數據和事件，而後經過一個while()循環卸載掉每一個DOM節點，比較好理解哈，對於remove()來講，實現以下:

jQuery.fn.extend({
    remove: function( selector, keepData ) {             //從匹配元素中移除selector元素，該方法會遍歷匹配元素集合，先刪除後代元素和匹配元素的數據和事件，以免內存泄漏，而後移除匹配元素。
        for ( var i = 0, elem; (elem = this[i]) != null; i++ ) {                 //遍歷當前匹配元素
            if ( !selector || jQuery.filter( selector, [ elem ] ).length ) {        //若是沒有傳入selector參數，或者傳入了selector參數，而且當前元素與之匹配
                if ( !keepData && elem.nodeType === 1 ) {                                //若是沒有傳入keepData參數且elem是元素節點
                    jQuery.cleanData( elem.getElementsByTagName("*") );                        //移除後代元素的所有數據和事件
                    jQuery.cleanData( [ elem ] );                                            //移除元素節點。
                }

                if ( elem.parentNode ) {                                                //調用原生方法removeChild()移除節點。
                    elem.parentNode.removeChild( elem );
                }
            }
        }

        return this;
    },
    detach: function( selector ) {
        return this.remove( selector, true );            //調用remove()來實現的，參數2傳入了true
    },
})