|
|
我非常希望在node原型中加入這個(gè)功能，但是在IE和Safari里面不行。所以只能把他當(dāng)做一個(gè)普通函數(shù)。
使用
getElementByTagNames有兩個(gè)參數(shù)：
1、一個(gè)用逗號(hào)分隔的tag名稱字符串。
2、一個(gè)可選的開始元素。如果存在則在該元素的子元素中查找這些tag，如果不存在則在整個(gè)文檔中查找。
這個(gè)函數(shù)根據(jù)要求的tag名稱返回一個(gè)數(shù)組（而不是節(jié)點(diǎn)列表），按照他們?cè)谠创a中的出現(xiàn)順序排列。對(duì)于這個(gè)排序需要瀏覽器支持sourceIndex或者compareDocumentPosition。如果都不支持（Safari）那么就按照調(diào)用getElementByTagNames()函數(shù)時(shí)候的tag名稱的順序。
實(shí)例1
復(fù)制代碼 代碼如下:var headerList = getElementsByTagNames('h1,h2,h3,h4');
現(xiàn)在headerList就是文檔里包含H1-H4的數(shù)組，按照他們出現(xiàn)的順序排序。
實(shí)例2
復(fù)制代碼 代碼如下:
var element = document.getElementById('test');
var formFieldList = getElementsByTagNames('input,select,textarea',element);
現(xiàn)在formFieldList就是包含在ID為test的元素下的所有子元素中的input，select，TEXTAREA的數(shù)組，并且按照他們出現(xiàn)的書序排列。
復(fù)制代碼 代碼如下:
function getElementsByTagNames(list,obj) {
if (!obj) var obj = document;
var tagNames = list.split(',');
var resultArray = new Array();
for (var i=0;i<tagNames.length;i++) {
var tags = obj.getElementsByTagName(tagNames[i]);
for (var j=0;j<tags.length;j++) {
resultArray.push(tags[j]);
}
}
var testNode = resultArray[0];
if (!testNode) return [];
if (testNode.sourceIndex) {
resultArray.sort(function (a,b) {
return a.sourceIndex - b.sourceIndex;
});
}
else if (testNode.compareDocumentPosition) {
resultArray.sort(function (a,b) {
return 3 - (a.compareDocumentPosition(b) & 6);
});
}
return resultArray;
}
解釋
復(fù)制代碼 代碼如下:
function getElementsByTagNames(list,obj)
{
if (!obj)var obj = document;
首先定義開始元素obj，如果沒有給出，那么默認(rèn)就是document。
復(fù)制代碼 代碼如下:
var tagNames = list.split(',');
var resultArray = new Array();
將這些tag名稱以逗號(hào)分割。用一個(gè)數(shù)組來保存結(jié)果。
復(fù)制代碼 代碼如下:
for (var i=0;i<tagNames.length;i++) {
var tags = obj.getElementsByTagName(tagNames[i]);
for (var j=0;j<tags.length;j++) {
resultArray.push(tags[j]);
}
}
現(xiàn)在我們遍歷所有的tag名稱，就用最簡(jiǎn)單的getElementByTagName()方法，然后把結(jié)果傳入resultArray。這里的一個(gè)要點(diǎn)是，因?yàn)間etElementByTagName返回的是節(jié)點(diǎn)列表，所以我就不能使用array.concat()來建立新的數(shù)組。把元素一個(gè)一個(gè)的壓入是我能找到的最好的辦法。
我們得到了一個(gè)所需的tag名稱的元素的指針數(shù)組存儲(chǔ)在resultArray中，但是這些元素還是按照我們所給的tag的順序排列的。我們需要再排個(gè)序。
復(fù)制代碼 代碼如下:var testNode = resultArray[0];
現(xiàn)在我們開始排序。我們需要知道瀏覽器是否支持sourceIndex或者compareDocumentPosition，然后我們對(duì)于我們的得到的原始數(shù)據(jù)做一些檢測(cè)
復(fù)制代碼 代碼如下:if (!testNode) return [];
如果這里沒有第一個(gè)節(jié)點(diǎn)（也就是說結(jié)果里并沒有我們需要的元素），就返回一個(gè)空數(shù)組。
背景：array.sort()
array.sort()方法有一個(gè)可選函數(shù)的參數(shù)。這個(gè)函數(shù)用來比較兩個(gè)元素（通常稱為a和b）。如果第一個(gè)應(yīng)該在前那么這個(gè)函數(shù)就返回一個(gè)負(fù)數(shù)，如果第二個(gè)應(yīng)該在前那么就返回一個(gè)正值。
sourceIndex
如果瀏覽器支持sourceIndex，我們就根據(jù)元素的sourceIndex來排序。sourceIndex是微軟的一個(gè)非常有用的擴(kuò)展，可以用來知道元素在源代碼中的索引值。頁面種的第一個(gè)元素（<HTML>）的索引值就是0，第二個(gè)（<head>）就是1，等等。sourceIndex也是getElementByTagName(*)中的元素的索引值。
復(fù)制代碼 代碼如下:
if (testNode.sourceIndex) {
resultArray.sort(function (a,b) {
return a.sourceIndex - b.sourceIndex;
});
}
我們用第一個(gè)元素的sourceIndex值減去第二個(gè)元素的sourceIndex，如果是負(fù)值，那么第一個(gè)元素就排在前面，如果是正值，那么第二個(gè)元素排在前面。這就是sort（）需要的。現(xiàn)在resultArray中的元素就是根據(jù)他們?cè)谖臋n中的位置來排序的。
compareDocumentPosition
如果瀏覽器支持compareDocumentPosition，那么就用這個(gè)辦法來排序。compareDocumentPosition是level3的核心方法，他可以比較兩個(gè)節(jié)點(diǎn)在文檔中的位置，然后返回一個(gè)值：
1 沒有找到
2 在前
4 在后
8 包含
16 被包含
比如，如果一個(gè)標(biāo)簽被包含并且在另一個(gè)標(biāo)簽的后面，那么就返回16+4=20。
復(fù)制代碼 代碼如下:
else if (testNode.compareDocumentPosition) {
resultArray.sort(function (a,b) {
return 3 - (a.compareDocumentPosition(b) & 6);
});
}
我們只對(duì)compareDocumentPosition的值中的2、4感興趣：在前或者在后。所以我們將結(jié)果和6進(jìn)行與運(yùn)算，這樣結(jié)果就會(huì)是2或者4（當(dāng)然結(jié)果不能是6，因?yàn)橐粋€(gè)元素不能即在一個(gè)元素之前又在一個(gè)元素之后）
如果b在a之后則返回4，但是sort()需要一個(gè)負(fù)數(shù)。如果b在a之前則返回2，但是sort()需要一個(gè)正數(shù)。為了給sort()一個(gè)正確的結(jié)果我把他們用3來減。這樣就得到1或者-1，這樣sort()就能對(duì)元素進(jìn)行正確的排序，resultArray中的元素也按照他們?cè)谖臋n種的出現(xiàn)順序排列。
復(fù)制代碼 代碼如下:
return resultArray;
}
然后我們返回resultArray給調(diào)用它的函數(shù)。記住如果瀏覽器不支持sourceIndex或者compareDocumentPosition數(shù)組就沒有排序。
翻譯地址：http://www.quirksmode.org/dom/getElementsByTagNames.html
轉(zhuǎn)載請(qǐng)保留以下信息
作者：北玉(tw:@rehawk)
JavaScript技術(shù)：JavaScript DOM學(xué)習(xí)第四章 getElementByTagNames，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
