getElementById;getElementsByName;getElementsByTagName获取对象的区别

 

getElementById;getElementsByName;getElementsByTagName获取对象的区别

getElementById;getElementsByName;getElementsByTagName获取对象的区别

现在学习DOM已经有一段时间了~现在把经验写出来吧~


先看Document
<a href="http://www.miaoqiyuan.cn" id="link">苗启源的主页</a>
<a href="http://hi.baidu.com/%C3%E7%C6%F4%D4%B4" id="link">苗启源的空间</a>
<input type="text" value="苗启源" name="mybut"/>
<input type="text" value="苗启源" id="isbut" />

获取
获取方式   ID                                                                           Name                                                         TagName
获取方法   document.getElementById("link");     document.getElementsByName("mybut")[i];     document.getElementsByTagName("input")[i];
获取结果    第一个Link对应的对象                         所有Name为mybut的对象                                   所有Input对象
结果个数    1个                                                          X个，是一个数组                                                  X个，是一个数组

直接可以用Object.value;Object.href;改变对象的值~
注意:Name有S,即使只有一个Name='mybut',也要用document.getElementsByName("mybut")[0]代表对象

我看网上的很多教程都不对~比如蓝色理想中有一段代码（ http://bbs.blueidea.com/viewthread.php?tid=2690329 ）：

document.getElementByTagName?
<input type="text" value="Flickr" οnfοcus="chgclr()" />
<input type="text" value="Flickr" />
<script type="text/javascript">
function chgclr()
{
document.getElementByTagName("input").style.background="#CCCCCC"
}
</script>



这样运行会提示不正确
1.对象不支持此属性或方法，原因：getElementByTagName中没有s
2.修正1后，会提示：document.getElementsByTagName("...").style，原因：获取的是一个数组，最后应该改为：

document.getElementsByTagName("input")[0].style.background="#CCCCCC"

for(i=0;i<document.getElementsByTagName.length;i++){
document.getElementsByTagName("input")[i].style.background="#CCCCCC";
}