getElementById和getElementsByName的细节介绍。。。

来源:互联网 发布:知与行杂志怎么样 编辑:程序博客网 时间:2024/05/16 17:07
<!--
document.getElementById(xx)
是取一些ID为xx的元素对象(DOM对象)
不过IE和FireFox里会有差距,因为IE也取name=xx的元素。。
比如下面的代码
IE和Opera里显示的是1
FireFox里显示的则是2
-->
<input name="wc" value="1" />
<div id="wc">2</div>
<input id="wc" value="3"><br />
<span id="wc">4</span><br />
<input name="wc" value="5" /><br />
<input name="wc" value="6" />
<script type="text/javascript">
var o = document.getElementById("wc");
alert(o.innerHTML || o.value); //即2
</script>
<!--
document.getElementsByName(xx)
是取一些name为xx的元素对象的集合的索引(DOM对象的索引,注意这里因为是返回索引,所以当元素发生变化时索引也跟着变化)
集合就是和数组类似的对象具有0-n属性和length属性
同上IE和FireFox里会有差距,因为IE也取id=xx的元素
-->
<script type="text/javascript">
var o = document.getElementsByName("wc");
alert(o.length); //即IE/OP = 6,FF=3 因为FF不会理睬id = wc的元素
var input = document.createElement("input");
input.id = "wc";
document.body.appendChild(document.createElement("br")); //加个换行,不用理睬:D
document.body.appendChild(input); //添加一个input元素并且该元素id = wc
alert(o.length); //即IE/OP = 7 因为id会被检测的到,FF=3
input = document.createElement("input");
input.name = "wc";
document.body.appendChild(document.createElement("br")); //加个换行,不用理睬:D
document.body.appendChild(input); //在加一个input元素并且该元素name = wc
alert(o.length); //即IE = 7 IE没有检测name属性,OP = 8 OP有检测name属性,FF = 4 FF也有检测name属性:D
//如果没有找到对象的话的情况;
alert(document.getElementById("muxrwc")); //null
alert(document.getElementsByName("muxrwc")); //object length = 0
</script>