jQuery 源碼解析(二十五) DOM操做模塊 html和text方法的區別

時間 2019-11-18

標籤 jquery 源碼解析二十五 dom 模塊 html text 方法區別欄目 JQuery 简体版

原文原文鏈接

html和text均可以獲取和修改DOM節點裏的內容，方法以下:html

html(value) ;獲取匹配元素集合中的一個元素的innerHTML內容，或者設置每一個元素的innerHTML內容， ;value可選，能夠是html代碼或返回html代碼的函數,若是沒有參數則獲取匹配元素集合中第一個元素的innerHTML內容
text(text) ;獲取匹配元素集合中全部元素合併後的文本內容，或者設置每一個元素的文本內容，封裝了createTextNode方法

writer by:大沙漠 QQ:22969969node

舉個栗子: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>
    <div>Hello World!</div>
    <button id="b1">按鈕1</button>
    <button id="b2">按鈕2</button>
    <script>
        $('#b1').click(()=>{
            $('div').html('<p>Hello jQuery!</p>')             //使用html()設置值
        })
        $('#b2').click(()=>{
            $('div').text('<p>Hello jQuery!</p>')             //使用text()設置值
        })
    </script>
</body>
</html>

渲染以下:瀏覽器

點擊按鈕1將使用html()設置值，此時渲染以下:app

點擊按鈕2將使用text()設置值，此時渲染以下:函數

能夠看到對於html()來講，就把裏面的標籤的含義解析出來，而對於text()來講，只是單純的展現出來，這是由於前者是經過設置innerHTML來實現的，後者是經過createTextNode建立的文本節點來實現的源碼分析

源碼分析this

對於html來講，它是經過innerHTML來實現的，實現以下:spa

jQuery.fn.extend({
    html: function( value ) {                //獲取匹配元素集合中第一個元素的HTML內容，或者設置每一個元素的HTML內容。經過讀取、設置innerHTML來實現。value可選，能夠是html代碼或返回html代碼的函數。
        if ( value === undefined ) {                            //若是沒有傳入參數，則讀取第一個匹配元素的HTML內容
            return this[0] && this[0].nodeType === 1 ?            //若是this[0]存在且是一個元素節點
                this[0].innerHTML.replace(rinlinejQuery, "") :         //讀取innerHTML屬性
                null;

        // See if we can take a shortcut and just use innerHTML
        } else if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&                //html是代碼代碼且不含有script或style標籤。
            (jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) &&        //瀏覽器不會忽略前導空白負，或者html代碼不以空白符開頭。
            !wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) {            //html代碼中的標籤不須要包裹父標籤就能夠正確的被序列化

            value = value.replace(rxhtmlTag, "<$1></$2>");                                    //修正自閉標籤

            try {
                for ( var i = 0, l = this.length; i < l; i++ ) {                            //遍歷當前匹配元素
                    // Remove element nodes and prevent memory leaks
                    if ( this[i].nodeType === 1 ) {                                                //若是該節點是一個元素節點
                        jQuery.cleanData( this[i].getElementsByTagName("*") );                        //先移除全部後代元素關聯的數據和事件    
                        this[i].innerHTML = value;                                                    //嘗試直接設置屬性innerHTML插入HTML內容。
                    }
                }

            // If using innerHTML throws an exception, use the fallback method
            } catch(e) {
                this.empty().append( value );                                                //若是在設置innerHTML時跑出了異常，則先調用empty()移除後代元素關聯的數據和事件、移除子元素，而後調用.append()插入新內容。
            }

        } else if ( jQuery.isFunction( value ) ) {                //若是value是函數，則遍歷匹配元素集合，在每一個元素上執行該函數，並取其返回值做爲新html內容，迭代調用.html(vlue)。
            this.each(function(i){
                var self = jQuery( this );

                self.html( value.call(this, i, self.html()) );
            });

        } else {
            this.empty().append( value );
        }

        return this;                                            //最後返回this,以支持鏈式操做
    },
})

對於text來講，它是經過createTextNode建立的文本節點來實現的，以下:3d

jQuery.fn.extend({
    text: function( text ) {                //獲取匹配元素集合中全部元素合併後的文本內容，或者設置每一個元素的文本內容，設置時是經過createText()方法建立文本節點並append()進去的。
        if ( jQuery.isFunction(text) ) {        //若是text是函數，則在每一個匹配元素上執行該函數，並取其返回值做爲新文本內容，迭代調用.text(text)方法。
            return this.each(function(i) {
                var self = jQuery( this );

                self.text( text.call(this, i, self.text()) );    //調用函數時，設置關鍵字this執行當前元素，傳入了兩個參數:當前元素在集合中的下標位置、當前元素的舊文本內容。
            });
        }

        if ( typeof text !== "object" && text !== undefined ) {    //若是參數text不是對象，也不是undefined,便可能是字符串、數字或布爾值。
            return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );    //先清空內容，而後建立文本節點，並插入每一個匹配元素中
        }

        return jQuery.text( this );                //若是沒有傳入參數或者參數text不合法(對象)，則調用jQuery.text(elem)獲取全部匹配元素合併後的文本內容(sizzle選擇器中)。
    },
})