网站地图
【www.gdgbn.com--Dom教程】
document.getelementsbytagname()方法的返回值中取出某个特定的元素。一开始以为它的返回值是一个数组，结果，大错特错。它返回的是一个 dom 对象，可以遍历，有 length 属性，但不是数组。
证据在这里：
html code<script>
window.onload = function() {
var divs = document.getelementsbytagname("div");
document.getelementbyid("info").innerhtml = !!(divs instanceof array);
}
</script>
把它当array用的兄弟姐妹小心了。
既然不是array，那么它到底是什么呢？
继续探索之：
html code<script>
window.onload = function() {
var divs = document.getelementsbytagname("div");
document.getelementbyid("info").innerhtml = object.prototype.tostring.call(divs);
}
</script>
在各浏览器中打开：
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++ codeinterface 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/网页特效">
window.onload = function() {
var spans = document.getelementsbytagname("span");
var span2 = spans[1];
var span3 = spans["span3"];
document.getelementbyid("info").innerhtml = "
nodelist[index].id : " + span2.id
+ "
nodelist[id].id : " + span3.id;
}
</script>
测试结果在各浏览器中都相同：
nodelist[index].id : span2
nodelist[name].id : span3
nodelist[name]
测试代码：
html code<script type="text/网页特效">
window.onload = function() {
var inputs = document.getelementsbytagname("input");
var input_1 = inputs["input1"];
document.getelementbyid("info").innerhtml += "
nodelist[name].id : " + input_1.id;
}
</script>
结果：
firefox、opera和ie，都输出的是：nodelist[name].id : ipt1
chrome 和safari报错，它们不支持这种方式。
另外，firefox和opera中，此方法存在差异，因为 name 属性可以相同，当存在多个相同 name 的元素时，firefox和opera中取出的还是第一个，而ie取出的则是一个组。
看代码：
html code<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+
"
nodelist[name].length : " + input_1.length;
}
</script>
在firefox和opera中输出：
nodelist[name].id : ipt1
nodelist[name].length : undefined
ie 中：
nodelist[name].id : undefined
nodelist[name].length : 2
nodelist(index)
测试用例代码：
html code<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>
以上代码，只有在firefox中报错：typeerror: spans is not a function
其他浏览器中的输出：nodelist(index).id: span2
nodelist(id)
测试代码：
html code<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>
firefox、 chrome和safari报错，ie 和 opera 依然支持。
nodelist(name)
看测试用例代码：
html code<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+
"
nodelist(name).length : " + input_1.length;
}
</script>
以上代码，ie和opera都支持。但是，支持情况也有差异，同 nodelist[name]。
firefox和webkit浏览器都不支持。
nodelist.item(index)
看测试用例代码：
html code<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>
经过测试，各浏览器都支持这种方式。
nodelist.nameditem(id)
测试用例代码：
html code<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>
chrome和safari不支持此方法，报错。
其他浏览器输出：nodelist.nameditem(id).id: span2
nodelist.nameditem(name)
测试用例代码：
html code<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+
"
inputs.nameditem(name).length : " + input_1.length;
}
</script>
chrome 和 safari 不支持这个方法。
firefox、 opera和ie都支持，但存在差异，情况跟nodelist[name]相同。
使用document.getelementsbytagname()的误差
在利用getelementsbytagname()方法取同一类对象时，浏览器插件生成的标签也会被计算在内。例如，在document.getelementsbytagname("div")的返回值中，包括firebug插件的div标签。所以，如果利用index取值，可能会跟预想的结果不同。
总结
这个方法真不让人省心啊，既然兼容性问题这么多，那么，应该怎样避免此类问题的发生呢？其实，很简单，用上面表里，所有浏览器都支持的方法就好。少用 index 取元素，不够准确。另外，没有特殊需求而仅仅为了获取元素，请使用document.getelmentbyid()。