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()來實現的


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

更多相關文章
  • 眾所周知,JavaScript核心包含Data()構造函數,用來創建表示時間和日期的對象。 今天主要跟大家梳理一下,常用的時間、日期處理方法,方便大家使用和理解 格式化時間 老生常談,大概會這麼寫 1234567891011 var format = function (time) { var y ...
  • 代碼: <img src="images/001.jpg" alt="pic" onmouseover="this.src='images/001.jpg';" onmouseout="this.src='images/002.jpg';"/> ...
  • 作者:Dmitri Pavlutin 譯者:小維FE 原文:dmitripavlutin.com 國外文章,筆者採用意譯的方式,以保證文章的可讀性。 當執行像數據獲取這樣的I/O操作時,你必鬚髮起獲取請求,等待響應,將響應數據保存到組件的狀態中,最後渲染。非同步的數據獲取會要求額外的工作來適應Reac ...
  • 塊級作用域: ES6允許你使用塊級作用域,不過目前大多數的ES6語法只允許在嚴格模式下使用("use strict” )。 1 let關鍵字 作用:聲明變數,一個花括弧就是一個作用域(每個花括弧內就是全新變數). 特點:不在進行聲明提升,在塊作用域外無法訪問變數,和const一樣只能聲明一次. 關鍵 ...
  • 編輯表格輸入內容、根據input輸入框輸入數字動態生成表格行數、編輯表格內容提交傳給後臺數據處理 記錄自己學習做的東西,寫的小demo,希望對大家也有幫助! 代碼如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></tit ...
  • 題目描述 實現函數 makeClosures,調用之後滿足如下條件:1、返回一個函數數組 result,長度與 arr 相同2、運行 result 中第 i 個函數,即 result[i](),結果與 fn(arr[i]) 相同 示例1 1 //參考《JavaScript高級程式設計》的典型方法 2 ...
  • 眾所周知,在組件式開發中,最大的痛點就在於組件之間的通信。在 Vue 中,Vue 提供了各種各樣的組件通信方式,從基礎的 props/$emit 到用於兄弟組件通信的 EventBus,再到用於全局數據管理的 Vuex。 在這麼多的組件通信方式中,provide/inject 顯得十分阿卡林(毫無存 ...
  • var myDate = new Date();Date.now(); // 獲取當前時間 1573200670754 時間戳精確到毫秒 myDate.getYear(); //獲取當前年份(2位) myDate.getFullYear(); //獲取完整的年份(4位,2017) myDate.ge ...
一周排行
  • C 語法糖——持續更新 1. return的switch寫法 ...
  • 0. 前言 繼上一篇,以及上上篇,我們對SqlSugar有了一個大概的認識,但是這並不完美,因為那些都是理論知識,無法描述我們工程開發中實際情況。而這一篇,將帶領小伙伴們一起試著寫一個能在工程中使用的模板類。 1. 創建一個Client SqlSugar在操作的時候需要一個Client,用來管理數據 ...
  • 1 class Program 2 { 3 static void Main(string[] args) 4 { 5 //數組:長度不可變,類型單一 6 //ArrayList集合:長度可以任意改變,類型可以不單一 7 8 //創建一個ArrayList對象 9 ArrayList mylist ...
  • .NET 程式下銳浪報表 (Grid++ Report) 的綠色發佈指南 在銳浪報表官方為 CSharp 編寫的開發文檔:“在C#與VB.NET中開始使用說明.txt” 中,關於發佈項目是這麼描述的: ★發佈你的項目,用VS.NET製作安裝程式:1、先創建安裝項目:在解決方案資源管理器的根節點上點右 ...
  • 執行代碼清理時,可以點擊那個掃把小圖片,會按照預設的第一種配置文件來自動修複。也可以點擊下拉三角符合,選擇不同的配置文件,然後進行修複。或者快捷鍵Ctrl+K,Ctrl+E。 針對每一項配置的說明: 刪除不必要的using 儘可能將私有欄位設置為只讀 刪除不必要的類型轉換(針對強類型轉換),像Con ...
  • 1.概念簡述 (1)AR模型 AR 模型(auto regressive model)自回歸模型,模型參量法高解析度譜分析方法之一,也是現代譜估計中常用的模型。 用AR模型法求信具體作法是: ①選擇AR模型,在輸入是衝激函數或白雜訊的情況下,使其輸出等於所研究的信號,至少,應是對該信號的一個好的近似 ...
  • 4.元組 元組的主要特性為: 1.元組在創建之後,具有不可以更改的特性,因此不能直接給元組的元素賦值 2.元組的元素類型可以為任意類型,如字典、字元串、列表等 3.元組常用於在程式的整個生命周期中都不變的場景中 4.1 常用方法 元組大小和內容在定義賦值之後,就不可更改,常用的方法如下所示: cou ...
  • 老孟導讀:今天分享一個類似“孔雀開屏”的動畫效果,打開新的頁面時,新的頁面從屏幕右上角以圓形逐漸打開到全屏。 先來看下具體的效果 不知道這種效果大家叫什麼名字?如果有更合適的名字可以在評論處告訴我,下麵來說下如何實現此效果。 在使用Navigator進入一個新的頁面時,通常用法如下: 就包含了切換頁 ...
  • hashCode() 和equals() 方法的重要性體現在什麼地方? Java中的HashMap使用hashCode()和equals()方法設置值,根據鍵獲取值的時候也會用到這兩個方法。 怎樣 設置 的值? hashCode()獲得 hash值。而hash值用來確定hashmap中內部 Node ...
  • IDEA一些不錯的插件分享 目錄 IDEA一些不錯的插件分享 插件集合 CamelCase Translation LiveEdit MarkDown Navigator Jrebel CheckStyle IDEA Alibaba Java Coding Guidelines Ideavim Ma ...