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" 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";
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章