摘要：函數(shù)源碼下面是和的源碼，看了之后肯定有話要說(shuō)函數(shù)回調(diào)函數(shù)好吧，我承認(rèn)，又是同樣的套路，先交給函數(shù)來(lái)處理，然后函數(shù)，我猜這個(gè)時(shí)候函數(shù)肯定是采用方式使綁定當(dāng)前。

歡迎來(lái)我的專欄查看系列文章。

上一章談到了 dom 的幾個(gè)插入操作，雖然插入的方式多種多樣，但只要在懂了原生方法等基礎(chǔ)上，代碼看起來(lái)都不是很復(fù)雜。比較有意思的一個(gè)函數(shù)就是 buildFragment 方法，用來(lái)將 html 字符串轉(zhuǎn)換成 dom 碎片。本章來(lái)看一下 dom 的其它方法。

說(shuō)到 elem 的操作，就必然要提一下 elem 的類(lèi)型。NodeType，一個(gè)節(jié)點(diǎn)的 nodeType 為 1 表示元素節(jié)點(diǎn)，為 3 表示 text 文字節(jié)點(diǎn)，為 9 表示 document，11 表示 documentFragment，就是上一章所說(shuō)的文檔碎片。大概知道這幾個(gè)就可以了。

原生的 elem 方法包括 innerHTML，outerHTML，innerText，outerText，然而，在開(kāi)始本章之前，一定要對(duì)這幾個(gè)方法很常熟練才行。解密jQuery內(nèi)核 DOM操作方法（二）html,text,val。

innerHTML 和 outerHTML 一個(gè)顯著的差異性就是 outer 會(huì)把當(dāng)前 elem 也一起算進(jìn)去并獲得 html 字符串，inner 不會(huì)。

innerText 和 outerText 獲取時(shí)候沒(méi)有顯著差異，但是 set 情況下(設(shè)置)的時(shí)候，outer 會(huì)把當(dāng)前 elem 也給刪掉，使用還是要謹(jǐn)慎。

有時(shí)候因?yàn)闉g覽器的兼容問(wèn)題，可以用 textContent 替代 innerText。

下面是jQuery.fn.html 和 text 的源碼，看了之后肯定有話要說(shuō)：

jQuery.fn.extends( {
  html: function( value ) {
    return access( this, function( value ) {
      ... // callback 函數(shù)
    }, null, value, arguments.length )
  }),
  text: function( value ) {
    return access( this, function( value ) {
      ...// 回調(diào)函數(shù)
    }, null, value, arguments.length)
  })
} );

好吧，我承認(rèn)，又是同樣的套路，先交給 access 函數(shù)來(lái)處理，然后 callback 函數(shù)，我猜這個(gè)時(shí)候 callback 函數(shù)肯定是采用 call 方式使 this 綁定當(dāng)前 elem。這個(gè)套路似曾相識(shí)，對(duì)，就是 domManip 函數(shù)。

其實(shí) access 前面已經(jīng)介紹了過(guò)了，不過(guò)還是值得來(lái)重現(xiàn)介紹一下。

像 html、text、css 這些函數(shù)的功能，都有一個(gè)特點(diǎn)，就是可以帶參數(shù)，也可以不帶參數(shù)，先用 access 函數(shù)對(duì)參數(shù)校正，執(zhí)行回調(diào)。

var access = function( elems, fn, key, value, chainable, emptyGet, raw ) {
  var i = 0,
    len = elems.length,
    bulk = key == null;

  // key values 多種情況
  if ( jQuery.type( key ) === "object" ) {
    chainable = true;
    for ( i in key ) {
      access( elems, fn, i, key[ i ], true, emptyGet, raw );
    }

  // Sets 情況
  } else if ( value !== undefined ) {
    chainable = true;
    // value 為函數(shù)，不知道這是一種什么情況
    if ( !jQuery.isFunction( value ) ) {
      raw = true;
    }

    if ( bulk ) {

      // 執(zhí)行回調(diào)
      if ( raw ) {
        fn.call( elems, value );
        fn = null;

      // ...except when executing function values
      } else {
        bulk = fn;
        fn = function( elem, key, value ) {
          return bulk.call( jQuery( elem ), value );
        };
      }
    }

    // css 走這一步
    if ( fn ) {
      for ( ; i < len; i++ ) {
        fn(
          elems[ i ], key, raw ?
          value :
          value.call( elems[ i ], i, fn( elems[ i ], key ) )
        );
      }
    }
  }
  // chainable 表示參數(shù)長(zhǎng)度 0 或 1
  if ( chainable ) {
    return elems;
  }

  // Gets
  if ( bulk ) {
    return fn.call( elems );
  }

  return len ? fn( elems[ 0 ], key ) : emptyGet;
};

access 中出現(xiàn)了一種 value 為函數(shù)的情況，沒(méi)有碰到過(guò)，暫不知道什么意思。access 函數(shù)基本沒(méi)有做太大的變化處理看，看起來(lái)也不是很難。(哈哈，找到了，后面 css 操作的時(shí)候，key 可以為 object)

現(xiàn)在就是主要來(lái)看這個(gè)回調(diào)函數(shù)了，當(dāng)前的 this 使指向 jQuery 對(duì)象的，并沒(méi)有指向多帶帶的 elem 元素，html 肯定要進(jìn)行判斷：

jQuery.fn.extends( {
  html: function( value ) {
    return access( this, function( value ) {
      var elem = this[ 0 ] || {},
        i = 0,
        l = this.length;
      // 參數(shù)為空的情況，get
      if ( value === undefined && elem.nodeType === 1 ) {
        return elem.innerHTML;
      }

      // set 操作
      if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
        !wrapMap[ ( rtagName.exec( value ) || [ "", "" ] )[ 1 ].toLowerCase() ] ) {

        value = jQuery.htmlPrefilter( value );

        try {
          for ( ; i < l; i++ ) {
            elem = this[ i ] || {};

            // Remove element nodes and prevent memory leaks
            if ( elem.nodeType === 1 ) {

              // cleanData 是清除 dom 綁定 cache 的數(shù)據(jù)
              jQuery.cleanData( getAll( elem, false ) );
              elem.innerHTML = value;
            }
          }

          elem = 0;

        // If using innerHTML throws an exception, use the fallback method
        } catch ( e ) {}
      }

      if ( elem ) {
        this.empty().append( value );
      }
    }, null, value, arguments.length );
  }
} );

下面是 text 源碼，關(guān)于 html 和 text 在開(kāi)頭已經(jīng)介紹了，算是比較基礎(chǔ)的 dom 操作吧，直接來(lái)看源碼吧：

jQuery.fn.extends( {
  text: function( value ) {
    return access( this, function( value ) {
      // 前面已經(jīng)說(shuō)了，回調(diào)函數(shù)里的 this 指向 jQuery 對(duì)象
      return value === undefined ?
        // get
        jQuery.text( this ) :
        // set
        this.empty().each( function() {
          if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            this.textContent = value;
          }
        } );
    }, null, value, arguments.length );
  }
} );

先來(lái)看看 set 的情況，這里有個(gè) empty 函數(shù)，源碼在下面，兩個(gè)功能，先清空 dom 內(nèi)容，在刪除 data cache 中保存的數(shù)據(jù)。這里沒(méi)有用 innerText 方法，而是使用 textContent 方法，貌似就 set 來(lái)說(shuō)，textContent 兼容性更好。

jQuery.fn.extends( {
  empty: function() {
    var elem,
      i = 0;

    for ( ; ( elem = this[ i ] ) != null; i++ ) {
      if ( elem.nodeType === 1 ) {

        // Prevent memory leaks
        jQuery.cleanData( getAll( elem, false ) );

        // 清空
        elem.textContent = "";
      }
    }

    return this;
  },
} );

set 的方法知道了，那么 get 呢？get 首先調(diào)用了 jQuery.text 方法，找了半天才找到它在哪里，原來(lái)調(diào)用的是 Sizzle 中的方法：

jQuery.text = Sizzle.getText;

var getText = Sizzle.getText = function( elem ) {
  var node,
    ret = "",
    i = 0,
    nodeType = elem.nodeType;

  if ( !nodeType ) {
    // elem 是一個(gè) dom 數(shù)組
    while ( (node = elem[i++]) ) {
      // 分步來(lái)搞
      ret += getText( node );
    }
  } else if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
    // innerText usage removed for consistency of new lines (jQuery #11153)
    // 依然使用 textContent 方法
    if ( typeof elem.textContent === "string" ) {
      return elem.textContent;
    } else {
      // Traverse its children
      for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
        ret += getText( elem );
      }
    }
  // 3 (text)或 4 (4 貌似被移除)直接返回 nodeValue
  } else if ( nodeType === 3 || nodeType === 4 ) {
    return elem.nodeValue;
  }

  return ret;
};

我自己在瀏覽器上面測(cè)試，發(fā)現(xiàn) textContent 方法并不會(huì)把空白符給刪了，而且 jQuery 的 text 方法也沒(méi)有做過(guò)濾，每個(gè)瀏覽器的解析也不一樣，就可能導(dǎo)致瀏覽器帶來(lái)的差異，實(shí)際使用的時(shí)候，還是要小心點(diǎn)好，多長(zhǎng)個(gè)心眼。

Node.NodeType
解密jQuery內(nèi)核 DOM操作方法（二）html,text,val

本文在 github 上的源碼地址，歡迎來(lái) star。

歡迎來(lái)我的博客交流。