栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

JavaScript DOM学习第四章 getElementByTagNames

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

JavaScript DOM学习第四章 getElementByTagNames

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        var tags = obj.getElementsByTagName(tagNames[i]);
        for (var j=0;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名称以逗号分割。用一个数组来保存结果。

复制代码 代码如下:
for (var i=0;ivar tags = obj.getElementsByTagName(tagNames[i]);
for (var j=0;jresultArray.push(tags[j]);
}
}

现在我们遍历所有的tag名称,就用最简单的getElementByTagName()方法,然后把结果传入resultArray。这里的一个要点是,因为getElementByTagName返回的是节点列表,所以我就不能使用array.concat()来建立新的数组。把元素一个一个的压入是我能找到的最好的办法。

我们得到了一个所需的tag名称的元素的指针数组存储在resultArray中,但是这些元素还是按照我们所给的tag的顺序排列的。我们需要再排个序。

复制代码 代码如下:var testNode = resultArray[0];
现在我们开始排序。我们需要知道浏览器是否支持sourceIndex或者comparedocumentPosition,然后我们对于我们的得到的原始数据做一些检测

复制代码 代码如下:if (!testNode) return [];
如果这里没有第一个节点(也就是说结果里并没有我们需要的元素),就返回一个空数组。 背景:array.sort()
array.sort()方法有一个可选函数的参数。这个函数用来比较两个元素(通常称为a和b)。如果第一个应该在前那么这个函数就返回一个负数,如果第二个应该在前那么就返回一个正值。

sourceIndex
如果浏览器支持sourceIndex,我们就根据元素的sourceIndex来排序。sourceIndex是微软的一个非常有用的扩展,可以用来知道元素在源代码中的索引值。页面种的第一个元素()的索引值就是0,第二个()就是1,等等。sourceIndex也是getElementByTagName(*)中的元素的索引值。

复制代码 代码如下:
if (testNode.sourceIndex) {
resultArray.sort(function (a,b) {
return a.sourceIndex - b.sourceIndex;
});
}

我们用第一个元素的sourceIndex值减去第二个元素的sourceIndex,如果是负值,那么第一个元素就排在前面,如果是正值,那么第二个元素排在前面。这就是sort()需要的。现在resultArray中的元素就是根据他们在文档中的位置来排序的。

comparedocumentPosition
如果浏览器支持comparedocumentPosition,那么就用这个办法来排序。comparedocumentPosition是level3的核心方法,他可以比较两个节点在文档中的位置,然后返回一个值:

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感兴趣:在前或者在后。所以我们将结果和6进行与运算,这样结果就会是2或者4(当然结果不能是6,因为一个元素不能即在一个元素之前又在一个元素之后)

如果b在a之后则返回4,但是sort()需要一个负数。如果b在a之前则返回2,但是sort()需要一个正数。为了给sort()一个正确的结果我把他们用3来减。这样就得到1或者-1,这样sort()就能对元素进行正确的排序,resultArray中的元素也按照他们在文档种的出现顺序排列。

复制代码 代码如下:
return resultArray;
}

然后我们返回resultArray给调用它的函数。记住如果浏览器不支持sourceIndex或者comparedocumentPosition数组就没有排序。

翻译地址:http://www.quirksmode.org/dom/getElementsByTagNames.html
转载请保留以下信息
作者:北玉(tw:@rehawk)
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/116694.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号