建站教学网,让你建站更便捷和轻松!
您当前的位置:首页 > 网页制作 > Javascript/Ajax
document.getElementsByTagName()方法的返回值
来源:建站教学网  时间:2010-07-11 14:29:41

document.getelementsbytagname()方法的返回值
/*
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++ 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 = "<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>

测试结果在各浏览器中都相同:

责任编辑:admin

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
CopyRight 2008-2009, chenwenguang.cn, Inc. All Rights Reserved
皖ICP备09015033号