JavaScript DOM學習第四章 getElementByTagNames
2024-05-06 14:11:28
供稿：網友
getElementByTagNames（注意是復數的names）會獲得一些tag的元素，然后按照他們的順序保存在一個數組中。這非常的有用，比如在上一章的TOCScript中，就需要獲得整個文章里面的所有的H3和H4。
我非常希望在node原型中加入這個功能，但是在IE和Safari里面不行。所以只能把他當做一個普通函數。
使用
getElementByTagNames有兩個參數：
1、一個用逗號分隔的tag名稱字符串。
2、一個可選的開始元素。如果存在則在該元素的子元素中查找這些tag，如果不存在則在整個文檔中查找。
這個函數根據要求的tag名稱返回一個數組（而不是節點列表），按照他們在源代碼中的出現順序排列。對于這個排序需要瀏覽器支持sourceIndex或者compareDocumentPosition。如果都不支持（Safari）那么就按照調用getElementByTagNames()函數時候的tag名稱的順序。
實例1
代碼如下:var headerList = getElementsByTagNames('h1,h2,h3,h4');
現在headerList就是文檔里包含H1-H4的數組，按照他們出現的順序排序。
實例2
代碼如下:
var element = document.getElementById('test');
var formFieldList = getElementsByTagNames('input,select,textarea',element);
現在formFieldList就是包含在ID為test的元素下的所有子元素中的input，select，TEXTAREA的數組，并且按照他們出現的書序排列。
代碼如下:
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;
