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

本節說一下DOM操作模塊里的刪除元素模塊，該模塊用於刪除DOM里的某個節點，也可以理解為將該節點從DOM樹中卸載掉，如果該節點有綁定事件，我們可以選擇保留或刪除這些事件，刪除元素的介面有如下三個: empty() ;移除匹配元素的所有子元素。 ;先移除所有後代元素關聯的數據和事件，以避免記憶體泄漏。然 ...

本節說一下DOM操作模塊里的刪除元素模塊，該模塊用於刪除DOM里的某個節點，也可以理解為將該節點從DOM樹中卸載掉，如果該節點有綁定事件，我們可以選擇保留或刪除這些事件，刪除元素的介面有如下三個:

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

說直接一點，

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

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.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元素增加一個點擊事件

        //以下給三個按鈕都會實現將h1、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，，點擊輸出如下:

另外不管點擊測試1、測試2還是測試3，都會將h1和p元素從DOM樹中卸載並插入到body子節點的最前面，如下:

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

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

源碼分析

講解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
    },
})

remove()方法會根據selector來選擇匹配元素，並將該匹配元素從DOM樹中卸載，如果有傳入keepData則保存數據，否則將數據刪除，對於detach來說，就是調用remove()來實現的

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

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