jQuery-1.7.2中getAll方法的疑惑

 getAll方法是私有的，在manipulation模塊中。代碼只有簡單的幾行，如下

function getAll( elem ) {
	if ( typeof elem.getElementsByTagName !== "undefined" ) {
		return elem.getElementsByTagName( "*" );

	} else if ( typeof elem.querySelectorAll !== "undefined" ) {
		return elem.querySelectorAll( "*" );

	} else {
		return [];
	}
}

 

從函數名可知該方法用來獲取傳入HTML元素的所有子元素。內部就三個分支

1. 先判斷elem是否有getElementsByTagName方法，如有使用getElementsByTagName方法獲取所有子元素后返回
2. 不支持getElementsByTagName接着判斷elem是否支持querySelectorAll方法，如支持使用querySelectorAll方法獲取元素子元素后返回
3. getElementsByTagName和querySelectorAll都不支持，返回空數組

當時看這段代碼時有的疑惑，感覺第二個分支有點多余。

1. getElementsByTagName 是DOM Level 2 中的API（較早），目前的所有瀏覽器應該都已經支持，既然都支持了，那么就不會進入第二個分支而直接返回了。后面代碼豈不是都是多余了
2. querySelectorAll 是DOM Level 3 中的API（較新），IE6/7不支持

看到這里大家是不是也覺得后面兩個分支是多余的呢？ 或者說能找出不多余的理由嗎？ 即只要找出符合以下條件的元素elem。

“elem沒有getElementsByTagName方法，但有querySelectorAll方法”

經過多方尋求，討論終於找到了答案（小牛同學發現的）。DocumentFragment滿足該條件。

var frag = document.createDocumentFragment();
alert('getElementsByTagName' in frag);
alert('querySelectorAll' in frag);

以上代碼在IE9/Chrome/Safari/Firefox/Opera中先后彈出了false，true。

到此，不解釋了。

 

注：DocumentFragment對象的幾個特殊點

1. IE6/7/8中具有createElement方法，其它瀏覽器（IE9/10/Safari/Chrome/Firefox/Opera）沒有
2. IE9/10/Firefox/Safari/Chrome/Opera中沒有getElementsByTagName方法，但有querySelectorAll方法。

 

相關：

http://www.cnblogs.com/snandy/archive/2011/03/30/1999388.html
https://developer.mozilla.org/en/DOM/document.createDocumentFragment
https://developer.mozilla.org/En/DOM/DocumentFragment
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-B63ED1A3