快捷導(dǎo)航

document.all與getElementById、getElementsByName、getElementsByTagName用法區(qū)別-document.all第2/2頁

更新時間：2008年12月19日 13:06:54 作者：

Document.all[]是文檔中所有標(biāo)簽組成的一個數(shù)組變量，包括了文檔對象中所有元素

[/code]
document.all可以判斷瀏覽器是否是IE
if(document.all){
alert("is IE!");
}
使用document.all注意的地方
代碼1:

 
<input name=aaa value=aaa> 
<input id=bbb value=bbb> 
<script language=Jscript> 
alert(document.all.aaa.value) //根據(jù)name取value 
alert(document.all.bbb.value) //根據(jù)id取 value 
</script> 

代碼2：
但是常常name可以相同(如:用checkbox取用戶的多項愛好的情況)

復(fù)制代碼代碼如下:

 
<input name=aaa value=a1> 
<input name=aaa value=a2> 
<input id=bbb value=bbb> 
<script language=Jscript> 
alert(document.all.aaa(0).value) //顯示a1 
alert(document.all.aaa(1).value) //顯示a2 
alert(document.all.bbb(0).value) //這行代碼會失敗 
</script> 

代碼3：
理論上一個頁面中的id是互不相同的，如果出現(xiàn)不同tags有相同的id

復(fù)制代碼代碼如下:

 
document.all.id 就會失敗,就象這樣： 
<input id=aaa value=a1> 
<input id=aaa value=a2> 
<script language=Jscript> 
alert(document.all.aaa.value) //顯示 undefined 而不是 a1或者a2 
</script> 

代碼4:
對于一個復(fù)雜的頁面（代碼很長，或者id是由程序自動產(chǎn)生),或著一個
javascript初學(xué)者寫的程序，很有可能出現(xiàn)兩個tags有相同id的情況。
為了編程的時候不出錯，我推薦這樣的寫法：

復(fù)制代碼代碼如下:

 
<input id=aaa value=aaa1> 
<input id=aaa value=aaa2> 
<input name=bbb value=bbb> 
<input name=bbb value=bbb2> 
<input id=ccc value=ccc> 
<input name=ddd value=ddd> 
<script language=Jscript> 
alert(document.all("aaa",0).value) 
alert(document.all("aaa",1).value) 
alert(document.all("bbb",0).value) 
alert(document.all("bbb",1).value) 
alert(document.all("ccc",0).value) 
alert(document.all("ddd",0).value) 
</script> 

這樣最安全.
以下是我自己的測試：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

從上面可以看到我們在使用document.all的時候可能會返回一個值或多個值的情況，所以使用之前一定要判斷長度，要不然會出現(xiàn)錯誤。
如下面的問題：兩個函數(shù)對多個checkbox進行處理，分別執(zhí)行全部選中和取消全選功能如果按下面使用會出現(xiàn)什么問題呢？

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

看上面的代碼，當(dāng)表單中有多個checkbox的時候是沒有問題的，但當(dāng)其中只有一個checkbox的時候就會有問題，即點全選的時候不起作用，因為當(dāng)其中只有一個checkbox的時候不再用document.all["huang"][0].checked來訪問，而是直接用document.all["huang"].checked來訪問了
看當(dāng)只有一個checkbox的時候應(yīng)改成下面代碼

復(fù)制代碼代碼如下:

 
<HTML> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function checkall(){ 
var huang = document.all['huang']; 
if(huang.length){ 
for(i = 0;i < huang.length;i++){ 
if(huang[i].type == "checkbox") 
{ 
huang[i].checked = true; 
} 
} 
}else{ 
huang.checked = true; 
} 
} 
function centerall(){ 
if(huang.length){ 
for(i = 0;i < huang.length;i++){ 
if(huang[i].type == "checkbox") 
{ 
huang[i].checked = false; 
} 
} 
}else{ 
huang.checked = false; 
} 
} 
//--> 
</SCRIPT> 
<BODY> 
<input type="checkbox" name="huang" value="OFF"> 
[br] 
<input type="button" value = "checkall" onclick = "checkall();"> 
<input type="button" value = "centerall" onclick = "centerall();"> 
</BODY> 
</HTML> 

或者使用另一種形式，使用getElementsByTagName，如下：

復(fù)制代碼代碼如下:

 
<HTML> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function checkall() 
{ 
var huang = document.getElementsByTagName("input"); 
for(i = 0;i < huang.length;i++){ 
if(huang[i].type == "checkbox") 
{ 
huang[i].checked = true; 
} 
} 
} 
function centerall() 
{ 
var huang = document.getElementsByTagName("input"); 
for(i = 0;i < huang.length;i++){ 
if(huang[i].type == "checkbox") 
{ 
huang[i].checked = false; 
} 
} 
} 
//--> 
</SCRIPT> 
<BODY> 
<input type="checkbox" name="huang" value="OFF"> 
[br] 
<input type="button" value = "checkall" onclick = "checkall();"> 
<input type="button" value = "centerall" onclick = "centerall();"> 
</BODY> 
</HTML> 