最近天气好热,一只蚊子落到了我身上,被烫死了,悲天悯人的我太伤心了……
天气虽然炎热,但工作依然不能停歇,整日在代码堆里摸爬滚打,却不见救世主降临,来赐我一个和谐的浏览器世界。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 + "<br/>NodeList[id].id : " + span3.id; }</script><span id="span1"></span><span id="span2"></span><span id="span3"></span><div id="info"></div>