【分享】深入挖掘document.getElementsByTagName()方法的返回值
最近天气好热，一只蚊子落到了我身上，被烫死了，悲天悯人的我太伤心了……
天气虽然炎热，但工作依然不能停歇，整日在代码堆里摸爬滚打，却不见救世主降临，来赐我一个和谐的浏览器世界。OMG，生命不止，兼容问题不歇。无论我活着，还是我死了，我都会在兼容性问题堆里，吹着嗡嗡的祖拉嗡嗡的飞来飞去。
前些日子，碰到过一个比较麻烦的问题。想从 document.getElementsByTagName()方法的返回值中取出某个特定的元素。一开始以为它的返回值是一个数组，结果，大错特错。它返回的是一个 DOM 对象，可以遍历，有 length 属性，但不是数组。
证据在这里：

HTML code

<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，那么它到底是什么呢？
继续探索之：

HTML code

<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

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()方法的返回值中取值

汇总表：

注：
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]

代码：

HTML code

<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
                                                                   + &quo