JavaScript DOM学习第四章：getElementByTagNames

核心提示：getElementByTagNames（注意是复数的names）会获得一些tag的元素，然后按照他们的顺序保存在一个数组中，JavaScript DOM学习第四章：getElementByTagNames，这非常的有用，比如在上一章的TOCScript中，select，TEXTAREA的数组，就需要获得整个文章里面的

getElementByTagNames（注意是复数的names）会获得一些tag的元素，然后按照他们的顺序保存在一个数组中。这非常的有用，比如在上一章的TOCScript中，就需要获得整个文章里面的所有的H3和H4。

我非常希望在node原型中加入这个功能，但是在IE和Safari里面不行。所以只能把他当做一个普通函数。

使用

getElementByTagNames有两个参数：

1、一个用逗号分隔的tag名称字符串。

2、一个可选的开始元素。如果存在则在该元素的子元素中查找这些tag，如果不存在则在整个文档中查找。

这个函数根据要求的tag名称返回一个数组（而不是节点列表），按照他们在源代码中的出现顺序排列。对于这个排序需要浏览器支持 sourceIndex或者compareDocumentPosition。如果都不支持（Safari）那么就按照调用 getElementByTagNames()函数时候的tag名称的顺序。

实例1

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

现在headerList就是文档里包含H1-H4的数组，按照他们出现的顺序排序。

实例2

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

现在formFieldList就是包含在ID为test的元素下的所有子元素中的input，select，TEXTAREA的数组，并且按照他们出现的书序排列。

代码

01　function　getElementsByTagNames(list,obj)　{
02　　　　　if　(!obj)　var　obj　=　document;
03　　　　　var　tagNames　=　list.split(',');
04　　　　　var　resultArray　=　new　Array();
05　　　　　for　(var　i=0;i<tagNames.length;i++)　{
06　　　　　　　　　var　tags　=　obj.getElementsByTagName(tagNames[i]);
07　　　　　　　　　for　(var　j=0;j<tags.length;j++)　{
08　　　　　　　　　　　　　resultArray.push(tags[j]);
09　　　　　　　　　}
10　　　　　}
11　　　　　var　testNode　=　resultArray[0];
12　　　　　if　(!testNode)　return　[];
13　　　　　if　(testNode.sourceIndex)　{
14　　　　　　　　　resultArray.sort(function　(a,b)　{
15　　　　　　　　　　　　　　　　　return　a.sourceIndex　-　b.sourceIndex;
16　　　　　　　　　});
17　　　　　}
18　　　　　else　if　(testNode.compareDocumentPosition)　{
19　　　　　　　　　resultArray.sort(function　(a,b)　{
20　　　　　　　　　　　　　　　　　return　3　-　(a.compareDocumentPosition(b)　&　6);
21　　　　　　　　　});
22　　　　　}
23　　　　　return　resultArray;
24　}

编缉推荐阅读以下文章

• JavaScript DOM学习第六章：表单实例
• JavaScript DOM学习第五章：表单简介
• JavaScript DOM学习第三章：内容表格
• JavaScript DOM学习第二章：编辑文本
• JavaScript DOM学习第一章：W3C DOM简介
• javaScript DOM方法与属性摘要