现在的位置: 首页 > 综合 > 正文

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

2019年03月29日 ⁄ 综合 ⁄ 共 1508字 ⁄ 字号 评论关闭

现在学习DOM已经有一段时间了~现在把经验写出来吧~
http://www.cnblogs.com/star250/archive/2007/10/31/944206.html

先看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" onfocus="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";
}

抱歉!评论已关闭.