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

来源:https://www.cnblogs.com/greatdesert/archive/2019/11/08/11813539.html

本節說一下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()來實現的


您的分享是我們最大的動力!

更多相關文章
  • CSS的引入 在早期,如果要去定義一個H1的標題的顏色、字體、大小和其他的顯示特征,就需要用到HTML中的font或其他樣式的指令,H1只是一個結構指令所以光有它是不夠的。因此如果有多個標簽要去進行處理,就會造成樣式的重覆,後期維護的困難。 那CSS的出現就解決了這一類的問題,CSS(Cascadi ...
  • 如何插入樣式表? 代碼應該寫到什麼地方呢? 代碼分為三種插入方式,接下來筆者給園友們介紹有哪些插入方式: 嵌入式、外鏈式、行內式。 嵌入式 什麼是嵌入式? 嵌入式就是將寫好的 代碼嵌入到 文件中,嵌入式是通過 中的 標簽將 代碼嵌入到 網頁當中的。 語法規則如下: 如果我們使用的是 的文檔, 標簽中 ...
  • 彈性盒子flex: 對於客戶端的佈局非常有用,不管是平均分配space-around這個屬性還是兩端對齊space-betwee在頁面佈局的時候都會有很好的表現。 對於部分內容區域中,具有很多大致內容相同的幾個區塊的佈局都可以使用到它,將父級設置為display:flex;父級就會變成容器,子級就會 ...
  • 1.首先引用jquery以及table2excel <script type="text/javascript" src="js/jquery.table2excel.min.js"></script> <script type="text/javascript" src="js/jquery.mi ...
  • HTML解釋: HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫,他是一種製作萬維網頁面標準語言(標記)。相當於定義統一的規則(W3C),大家都來遵守他,這樣就可以讓瀏覽器根據標記語言的規則去解釋它。 瀏覽器負責將標簽翻譯成用戶“看得懂”的格式,呈現給用戶 ...
一周排行
  • 1. 運行效果 在 "使用GetAlphaMask和ContainerVisual製作長陰影(Long Shadow)" 這篇文章里我介紹了一個包含長陰影的番茄鐘,這個番茄鐘在狀態切換時用到了翻轉動畫,效果如上所示,還用到了彈簧動畫,可以看到翻轉後有點回彈。本來打算自己這個動畫效果寫的,但火火已經寫 ...
  • 接上一篇,es部署很簡單,很快就弄好了。 但是還是有很多不玩美。 比如說:主機是本地的IP或機器名,埠是固定的9200. 而且是只有一個節點,我要在一臺機器上部署多個節點呢。 經過一段時間的摸索,做起來也很簡單,但過程切實很痛苦。 具體做法是:你想部署多少個節點,你就重覆多少次上一步的做法。啟動就 ...
  • 在項目中,需要為所有的Button、TextBox設置一個預設的全局樣式,一個個的為多個控制項設置相同的樣式顯然是不明智的。在WPF中可以通過資源設置全局樣式,主要有倆種方法: 1.第一種就是先寫好按鈕的樣式,不寫Key,然後在App.xaml中引用。 <ResourceDictionary xmln ...
  • 說明:該篇隨筆的代碼內容並非出自本人,是在其他網站搜尋的,出處已經不記得了,本次隨筆只為記錄,目的幫助自己,幫助他人。 實現的原理也不做多的贅述,直接上代碼。 第一個類是需要用到的Windows API public class Win32Api { [StructLayout(LayoutKind ...
  • 前言 在ASP.Net Core2.X調用的CreateWebHostBuilder和3.X的主要區別在於WebHost的調用,CreateDefaultBuilder被Host替換,另一個區別是對ConfigureWebHostDefaults()的調用; 由於新的主機生成器是通用主機生成器,因此 ...
  • 對於開發人員來說,常常需要在不藉助任何Microsoft Office及其他第三方軟體的情況下,打開、創建、修改、轉換、列印、瀏覽(Word、Excel、PowerPoint和PDF等)文檔,以及將數據從數據源轉換為常用的文檔格式,甚至一些其他的文檔操作。 在這裡,小編調查了業內許多開發人員,為大家 ...
  • 這次的目標是實現通過標註Attribute實現緩存的功能,精簡代碼,減少緩存的代碼侵入業務代碼。 緩存內容即為Service查詢彙總的內容,不做其他高大上的功能,提升短時間多次查詢的響應速度,適當減輕資料庫壓力。 在做之前,也去看了EasyCaching的源碼,這次的想法也是源於這裡,AOP的方式讓 ...
  • 例如想獲取尾碼名為.txt的文件 第一種方法獲取到的是對應的文件路徑 第二種方法可以獲取到文件的一些詳細信息 類似於"*.txt" 要與路徑中的文件名匹配的搜索字元串。這個參數可以包含有效的文本路徑和通配符(*和?)的組合人物,但它不支持正則表達式。 我是參照此路徑編寫的博客,用於自己查詢快速 ht ...
  • 我們在開發中Json傳輸數據日益普遍,有很多關於Json字元串的序列化和反序列化的文章大多都告訴你怎麼用,但是卻不會告訴你用什麼更高效。因為有太多選擇,人們往往會陷入選擇難題。 相比.NET Framework有三種選擇而.net core下已經沒有JavaScriptSerializer,但是大家 ...
  • c#微信公眾號開發 基本設置 參考微信官方文檔 https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html 開發→基本配置 公眾號開發信息 註:1.記錄好開發者密碼,會在程式中驗證過程 ...
x