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

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

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

[/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取用戶(hù)的多項(xiàng)愛(ài)好的情況)

復(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) //這行代碼會(huì)失敗 
</script> 

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

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

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

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

復(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> 

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

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

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

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

看上面的代碼，當(dāng)表單中有多個(gè)checkbox的時(shí)候是沒(méi)有問(wèn)題的，但當(dāng)其中只有一個(gè)checkbox的時(shí)候就會(huì)有問(wèn)題，即點(diǎn)全選的時(shí)候不起作用，因?yàn)楫?dāng)其中只有一個(gè)checkbox的時(shí)候不再用document.all["huang"][0].checked來(lái)訪問(wèn)，而是直接用document.all["huang"].checked來(lái)訪問(wèn)了
看當(dāng)只有一個(gè)checkbox的時(shí)候應(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> 