程序博客网 > ubuntu 文字界面

getElementsByTagName

来源：互联网 发布：ubuntu 文字界面 编辑：程序博客网 时间：2024/06/06 03:06
前些日子，碰到过一个比较麻烦的问题。想从 document.getElementsByTagName()方法的返回值中取出某个特定的元素。一开始以为它的返回值是一个数组，结果，大错特错。它返回的是一个 DOM 对象，可以遍历，有 length 属性，但不是数组。
证据在这里：
XML/HTML code
?
1
2
3
4
5
6
7
8
<script>
    window.onload = function() {
       var divs = document.getElementsByTagName("div");
       document.getElementById("info").innerHTML = !!(divs instanceof Array);
    }
</script>
<div></div>
<div id="info"></div>

把它当Array用的兄弟姐妹小心了。
既然不是Array，那么它到底是什么呢？
继续探索之：
XML/HTML code
?
1
2
3
4
5
6
7
8
<script>
    window.onload = function() {
       var divs = document.getElementsByTagName("div");
       document.getElementById("info").innerHTML = Object.prototype.toString.call(divs);
    }
</script>
<div></div>
<div id="info"></div>

在各浏览器中打开：
IE： [object Object]
Firefox：[object HTMLCollection]
Chrome/Safari /Opera：[object NodeList]
这个结果让人很纠结，5 个浏览器3种结果，其中 IE 和Firefox貌似不太合群。
无奈，干脆去查查标准。

W3C DOM3中 document.getElementsByTagName() 方法的返回值

getElementsByTagName() 是 W3C 从  DOM1就引进的获取拥有相同标签名称的一组元素的方法。而在 DOM2 和  DOM3 保留了这个接口。
它的返回值是一个 NodeList。
一下是它的接口说明：
C/C++ code
?
1
2
3
4
5
interface Element : Node {
   ...
   NodeList getElementsByTagName(in DOMString name);
   ...
}

DOM3中关于 getElementsByTagName接口的详细说明，请看这里：getElementsByTagName

主流浏览器中 getElementsByTagName()方法的返回值

各浏览器官方文档中对于此方法的说明也符合W3C的规定，都是返回的 NodeList类型的对象集合。
看来，Firefox跟自己矛盾了，哈哈。
关于资料，看这里
Mozilla 官方：document.getElementsByName
Safari官方 Webkit DOM：getElementsByName
MSDN官方: getElementsByName Method
那么什么是NodeList接口呢，它又有什么特性呢，接着往下看。

NodeList 接口

W3C DOM3规定，NodeList是一个有序的节点集合。

它的属性和方法：
NodeList . length
   返回集合中的对象个数。length是只读属性。
Node = NodeList . item(index)
     从集合中返回指定索引的节点。

可见，NodeList类型的对象可以使用 item()方法获取其中的节点。
在 Firefox，Chrome和Safari中，对于NodeList的定义与 W3C相同。
在 IE中，NodeList继承了Collection接口，所以，NodeList对象支持Collection接口中的方法。
Opera 没有找到相关说明。
关于 NodeList的说明资料：
W3C DOM3: Interface NodeList
Mozilla: NodeList
Safari官方Webkit DOM: NodeList
MSDN NodeList接口：NodeList Class
下面开始介绍，如何

从 document.getElementsByTagName()方法的返回值中取值

汇总表：
[img=https://lh6.googleusercontent.com/_RMajOid94m4gGaf92o36i2wawsFPzrr3wNCHh3Zw6Avo6-eVAUTp-KtIoTA7SbzEIBkbaWIrdzP2-6zqlJla3fMOSzI0nW5lVhOMrBQ4EdziQag][/img]
注：
1. 红色代表不支持，绿色代表支持。
2. 对于 NodeList[name]、NodeList(name) 和 NodeList.namedItem(name)这 3行，IE的支持情况跟其他支持该方式的浏览器之间也存在差异，当document,getElementsByTagName()的返回值中存在相同 name 的元素时，IE返回一组元素，而其他支持的浏览器只返回符合的第一个元素。

可见，在IE和Opera 中，getElementsByTagName()返回值更像一个HTMLcollection；而在Firefox中，介于HTMLcollection和 NodeList之间。

NodeList[index]和 NodeList[id]

代码：
XML/HTML code
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
   window.onload = function() {
       var spans = document.getElementsByTagName("span");
       var span2 = spans[1];
       var span3 = spans["span3"];
       document.getElementById("info").innerHTML = "<br/>NodeList[index].id : " + span2.id
                                                                   + "<br/>NodeList[id].id : " + span3.id;
   }
</script>
<span id="span1"></span>
<span id="span2"></span>
<span id="span3"></span>
 
<div id="info"></div>

测试结果在各浏览器中都相同：
NodeList[index].id : span2
NodeList[name].id : span3

NodeList[name]

测试代码：
XML/HTML code
?
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
    window.onload = function() {
       var inputs = document.getElementsByTagName("input");
       var input_1 = inputs["input1"];
       document.getElementById("info").innerHTML += "<br/>NodeList[name].id : " + input_1.id;
    }
</script>
<input id="ipt1" name="input1">
<input id="ipt2" name="input2">
<input id="ipt3" name="input3">
 
<div id="info"></div>

结果：
Firefox、Opera和IE，都输出的是：NodeList[name].id : ipt1
Chrome 和Safari报错，它们不支持这种方式。

另外，Firefox和Opera中，此方法存在差异，因为 name 属性可以相同，当存在多个相同 name 的元素时，Firefox和Opera中取出的还是第一个，而IE取出的则是一个组。
看代码：
XML/HTML code
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    window.onload = function() {
       var inputs = document.getElementsByTagName("input");
       var input_1 = inputs["input1"];
       document.getElementById("info").innerHTML += "NodeList[name].id : " + input_1.id+
               "<br/>NodeList[name].length : " + input_1.length;
    }
</script>
<input id="ipt1" name="input1">
<input id="ipt2" name="input1">
<input id="ipt3" name="input3">
 
<div id="info"></div>

在Firefox和Opera中输出：
NodeList[name].id : ipt1
NodeList[name].length : undefined
IE 中：
NodeList[name].id : undefined
NodeList[name].length : 2


NodeList(index)

测试用例代码：
XML/HTML code
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
   window.onload = function() {
       var spans = document.getElementsByTagName("span");
       try {
           var span2 = spans(1);
           document.getElementById("info").innerHTML = "NodeList(index).id: " + span2.id;
       } catch(err) {
           document.getElementById("info").innerHTML = "NodeList(index) : " + err;
       }
   }
</script>
<span id="span1"></span>
<span id="span2"></span>
 
<div id="info"></div>

以上代码，只有在Firefox中报错：TypeError: spans is not a function
其他浏览器中的输出：NodeList(index).id: span2


NodeList(id)

测试代码：
XML/HTML code
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
    window.onload = function() {
        var spans = document.getElementsByTagName("span");
        try {
            var span2 = spans("span2");
            document.getElementById("info").innerHTML = "NodeList(id).id: " + span2.id;
        } catch(err) {
            document.getElementById("info").innerHTML = "NodeList(id) : " + err;
        }
    }
</script>
<span id="span1"></span>
<span id="span2"></span>
 
<div id="info"></div>

Firefox、 Chrome和Safari报错，IE 和 Opera 依然支持。

NodeList(name)

看测试用例代码：
XML/HTML code
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    window.onload = function() {
       var inputs = document.getElementsByTagName("input");
       var input_1 = inputs("input1");
       document.getElementById("info").innerHTML += "NodeList(name).id : " + input_1.id+
               "<br/>NodeList(name).length : " + input_1.length;
    }
</script>
<input id="ipt1" name="input1">
<input id="ipt2" name="input1">
<input id="ipt3" name="input3">
 
<div id="info"></div>

以上代码，IE和Opera都支持。但是，支持情况也有差异，同 NodeList[name]。
Firefox和Webkit浏览器都不支持。

NodeList.item(index)

看测试用例代码：
XML/HTML code
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
    window.onload = function() {
        var spans = document.getElementsByTagName("span");
        try {
            var span2 = spans.item(1);
            document.getElementById("info").innerHTML = "NodeList.item(idx).id: " + span2.id;
        } catch(err) {
            document.getElementById("info").innerHTML = "NodeList.item(idx) : " + err;
        }
    }
</script>
<span id="span1"></span>
<span id="span2"></span>
 
<div id="info"></div>

经过测试，各浏览器都支持这种方式。

NodeList.namedItem(id)

测试用例代码：
XML/HTML code
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
    window.onload = function() {
        var spans = document.getElementsByTagName("span");
        try {
            var span2 = spans.namedItem("span2");
            document.getElementById("info").innerHTML = "NodeList.namedItem(name).id: " + span2.id;
        } catch(err) {
            document.getElementById("info").innerHTML = "NodeList.namedItem(name) : " + err;
        }
    }
</script>
<span id="span1"></span>
<span id="span2"></span>
 
<div id="info"></div>

Chrome和Safari不支持此方法，报错。
其他浏览器输出：NodeList.namedItem(id).id: span2

NodeList.namedItem(name)

测试用例代码：
XML/HTML code
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    window.onload = function() {
       var inputs = document.getElementsByTagName("input");
       var input_1 = inputs.namedItem("input1");
       document.getElementById("info").innerHTML += "inputs.namedItem(name).id : " + input_1.id+
               "<br/>inputs.namedItem(name).length : " + input_1.length;
    }
</script>
<input id="ipt1" name="input1">
<input id="ipt2" name="input1">
<input id="ipt3" name="input3">
 
<div id="info"></div>

Chrome 和 Safari 不支持这个方法。
Firefox、 Opera和IE都支持，但存在差异，情况跟NodeList[name]相同。

使用document.getElementsByTagName()的误差

在利用getElementsByTagName()方法取同一类对象时，浏览器插件生成的标签也会被计算在内。例如，在document.getElementsByTagName("div")的返回值中，包括Firebug插件的div标签。所以，如果利用index取值，可能会跟预想的结果不同。

总结

这个方法真不让人省心啊，既然兼容性问题这么多，那么，应该怎样避免此类问题的发生呢？其实，很简单，用上面表里，所有浏览器都支持的方法就好。少用 index 取元素，不够准确。另外，没有特殊需求而仅仅为了获取元素，请使用document.getElmentById()。
0 0
ubuntu 文字界面 ubuntu 文字界面
原创粉丝点击
热门IT博客
数据分析师考试时间数据分析师考试时间
js json数组转字符串js json数组转字符串
淘宝服装修图步骤
js计算购物车总金额
python筛选excel数据
雅马哈摩托 知乎
安知我意txt百度云
千牛mac版教程
excel数据统计分析方法
淘宝真丝针织背心
免费的儿童教育软件
互联网专线和数据专线
淘宝商品被下架怎么办
java buffer
淘宝金币怎么提现
网络用语比格意思
网络系统工程师简历
英译汉软件下载
穿淘宝爆款
mac电脑excel如何换行
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 上海振华重工 陆振华一家靠什么收入 振华科技股票 无锡振华轿车员工被压死 岳振华之子岳兵 张家港秦振华孙子事件 岳振华之子岳兵简历 烟台振华国际广场 岳振华夫人李德序简历 振华重工股吧 振华中学取景在哪里 八月长安振华三部曲 振华股份股吧 陆振华扮演者 华兴会黄振华 603067振华股份 000733振华科技 000733 拳王97安卓 拳皇97安卓版下载 拳皇十周年加强版安卓 振型 袁振威 王振威 广州振威国际展览有限公司 振威可视门铃 江西振威生物科技有限公司 振宇 振宇英语网 振宇红木家具 振幅 振幅是什么意思 股票振幅是什么意思 股票振幅 股票振幅多少算正常 振幅公式 混凝土振捣 振捣 混凝土振捣要求 混凝土振捣器 振捣棒价格

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里