快捷導航

JavaScript DOM學習第四章 getElementByTagNames

更新時間：2010年02月19日 13:24:28 作者：

HTML有一些相關(guān)有不同tag名字的相關(guān)元素，比如H1-H6或者input，select和TEXTAREA。getElementByTagName只能取得那些有相同tag名稱的元素，所以你不能用他來取得所有的標題或者整個表單內(nèi)容。

getElementByTagNames（注意是復數(shù)的names）會獲得一些tag的元素，然后按照他們的順序保存在一個數(shù)組中。這非常的有用，比如在上一章的TOCScript中，就需要獲得整個文章里面的所有的H3和H4。
我非常希望在node原型中加入這個功能，但是在IE和Safari里面不行。所以只能把他當做一個普通函數(shù)。

使用
getElementByTagNames有兩個參數(shù)：
1、一個用逗號分隔的tag名稱字符串。
2、一個可選的開始元素。如果存在則在該元素的子元素中查找這些tag，如果不存在則在整個文檔中查找。
這個函數(shù)根據(jù)要求的tag名稱返回一個數(shù)組（而不是節(jié)點列表），按照他們在源代碼中的出現(xiàn)順序排列。對于這個排序需要瀏覽器支持sourceIndex或者compareDocumentPosition。如果都不支持（Safari）那么就按照調(diào)用getElementByTagNames()函數(shù)時候的tag名稱的順序。
實例1

復制代碼代碼如下:

var headerList = getElementsByTagNames('h1,h2,h3,h4');

現(xiàn)在headerList就是文檔里包含H1-H4的數(shù)組，按照他們出現(xiàn)的順序排序。
實例2

復制代碼代碼如下:

 
var element = document.getElementById('test'); 
var formFieldList = getElementsByTagNames('input,select,textarea',element); 

現(xiàn)在formFieldList就是包含在ID為test的元素下的所有子元素中的input，select，TEXTAREA的數(shù)組，并且按照他們出現(xiàn)的書序排列。

復制代碼代碼如下:

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; 
}

解釋

復制代碼代碼如下:

 
function getElementsByTagNames(list,obj) 
{ 
if (!obj)var obj = document; 

首先定義開始元素obj，如果沒有給出，那么默認就是document。

復制代碼代碼如下:

 
var tagNames = list.split(','); 
var resultArray = new Array(); 

將這些tag名稱以逗號分割。用一個數(shù)組來保存結(jié)果。

復制代碼代碼如下:

 
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名稱，就用最簡單的getElementByTagName()方法，然后把結(jié)果傳入resultArray。這里的一個要點是，因為getElementByTagName返回的是節(jié)點列表，所以我就不能使用array.concat()來建立新的數(shù)組。把元素一個一個的壓入是我能找到的最好的辦法。

我們得到了一個所需的tag名稱的元素的指針數(shù)組存儲在resultArray中，但是這些元素還是按照我們所給的tag的順序排列的。我們需要再排個序。

復制代碼代碼如下:

var testNode = resultArray[0];

現(xiàn)在我們開始排序。我們需要知道瀏覽器是否支持sourceIndex或者compareDocumentPosition，然后我們對于我們的得到的原始數(shù)據(jù)做一些檢測

復制代碼代碼如下:

if (!testNode) return [];

如果這里沒有第一個節(jié)點（也就是說結(jié)果里并沒有我們需要的元素），就返回一個空數(shù)組。

背景：array.sort()
array.sort()方法有一個可選函數(shù)的參數(shù)。這個函數(shù)用來比較兩個元素（通常稱為a和b）。如果第一個應(yīng)該在前那么這個函數(shù)就返回一個負數(shù)，如果第二個應(yīng)該在前那么就返回一個正值。

sourceIndex
如果瀏覽器支持sourceIndex，我們就根據(jù)元素的sourceIndex來排序。sourceIndex是微軟的一個非常有用的擴展，可以用來知道元素在源代碼中的索引值。頁面種的第一個元素（<HTML>）的索引值就是0，第二個（<head>）就是1，等等。sourceIndex也是getElementByTagName(*)中的元素的索引值。

復制代碼代碼如下:

 
if (testNode.sourceIndex) { 
resultArray.sort(function (a,b) { 
return a.sourceIndex - b.sourceIndex; 
}); 
} 

我們用第一個元素的sourceIndex值減去第二個元素的sourceIndex，如果是負值，那么第一個元素就排在前面，如果是正值，那么第二個元素排在前面。這就是sort（）需要的?，F(xiàn)在resultArray中的元素就是根據(jù)他們在文檔中的位置來排序的。

compareDocumentPosition
如果瀏覽器支持compareDocumentPosition，那么就用這個辦法來排序。compareDocumentPosition是level3的核心方法，他可以比較兩個節(jié)點在文檔中的位置，然后返回一個值：

1 沒有找到

2 在前

4 在后

8 包含

16 被包含

比如，如果一個標簽被包含并且在另一個標簽的后面，那么就返回16+4=20。

復制代碼代碼如下:

 
else if (testNode.compareDocumentPosition) { 
resultArray.sort(function (a,b) { 
return 3 - (a.compareDocumentPosition(b) & 6); 
}); 
} 

我們只對compareDocumentPosition的值中的2、4感興趣：在前或者在后。所以我們將結(jié)果和6進行與運算，這樣結(jié)果就會是2或者4（當然結(jié)果不能是6，因為一個元素不能即在一個元素之前又在一個元素之后）

如果b在a之后則返回4，但是sort()需要一個負數(shù)。如果b在a之前則返回2，但是sort()需要一個正數(shù)。為了給sort()一個正確的結(jié)果我把他們用3來減。這樣就得到1或者-1，這樣sort()就能對元素進行正確的排序，resultArray中的元素也按照他們在文檔種的出現(xiàn)順序排列。

復制代碼代碼如下:

 
return resultArray; 
} 

然后我們返回resultArray給調(diào)用它的函數(shù)。記住如果瀏覽器不支持sourceIndex或者compareDocumentPosition數(shù)組就沒有排序。

翻譯地址：http://www.quirksmode.org/dom/getElementsByTagNames.html
轉(zhuǎn)載請保留以下信息
作者：北玉(tw:@rehawk)