document.all與getElementById、getElementsByName、getElementsByTagName用法區別

來源：懂視網責編：小采時間：2020-11-27 20:40:53

document.all與getElementById、getElementsByName、getElementsByTagName用法區別

document.all與getElementById、getElementsByName、getElementsByTagName用法區別:理解這句話可看以下：例1（這個可以讓你理解文檔中哪些是對象） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona

推薦度：

點擊下載本文 文檔為doc格式

導讀document.all與getElementById、getElementsByName、getElementsByTagName用法區別:理解這句話可看以下：例1（這個可以讓你理解文檔中哪些是對象） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona

理解這句話可看以下：
例1（這個可以讓你理解文檔中哪些是對象）

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
　　<html xmlns="http://www.w3.org/1999/xhtml"> 
　　<head> 
　　<title>Document.All Example</title> 
　　<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
　　</head> 
　　<body> 
　　<h1>Example Heading</h1> 
　　<hr /> 
　　<p>This is a <em>paragraph</em>. It is only a <em>paragraph.</em></p> 
　　<p>Yet another <em>paragraph.</em></p> 
　　<p>This final <em>paragraph</em> has <em id="special">special emphasis.</em></p> 
　　<hr /> 
　　<script type="text/javascript"> 
　　<!-- 
　　var i,origLength; 
　　origLength = document.all.length; 
　　document.write('document.all.length='+origLength+"[br /]"); 
　　for (i = 0; i < origLength; i++) 
　　{ 
　　document.write("document.all["+i+"]="+document.all[i].tagName+"[br /]"); 
　　} 
　　//--> 
　　</script> 
　　</body> 
　　</html>

輸出結果

Example Heading 
　　This is a paragraph. It is only a paragraph. 
　　Yet 
another paragraph. 
　　This final paragraph has special emphasis. 
　　document.all.length=18 
　　document.all[0]=! 
　　document.all[1]=HTML 
　　document.all[2]=HEAD 
　　document.all[3]=TITLE 
　　document.all[4]=META 
　　document.all[5]=BODY 
　　document.all[6]=H1 
　　document.all[7]=HR 
　　document.all[8]=P 
　　document.all[9]=EM 
　　document.all[10]=EM 
　　document.all[11]=P 
　　document.all[12]=EM 
　　document.all[13]=P 
　　document.all[14]=EM 
　　document.all[15]=EM 
　　document.all[16]=HR 
　　document.all[17]=SCRIPT

可以通過ID，NAME或INDEX屬性訪問某個具體的元素
例2（訪問一個特定元素）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
　　"http://www.w3.org/TR/html4/loose.dtd"> 
　　<html> 
　　<head> 
　　<meta http-equiv="Content-Type" content="text/html; 
charset=gb2312"> 
　　<title>單擊DIV變色</title> 
　　<style 
type="text/css"> 
　　<!-- 
　　#docid{ 
　　height:400px; 
　　width:400px; 
　　background-color:#999;} 
　　--> 
　　</style> 
　　</head> 
　　<body><p id="docid" 
name="docname" onClick="bgcolor()"></p> 
　　</body> 
　　</html> 
　　<script language="javascript" 
type="text/javascript"> 
　　<!-- 
　　function bgcolor(){ 
　　document.all[7].style.backgroundColor="#000" 
　　} 
　　--> 
　　</script> 
　　上面的這個例子讓你了解怎么訪問文檔中的一個特定元素，比如文檔中有一個DIV 
　　<p 
id="docid" name="docname"></p>，你可以通過這個DIV的ID，NAME或INDEX屬性訪問這個DIV： 
　　document.all["docid"] 
　　document.all["docname"] 
　　document.all.item("docid") 
　　document.all.item("docname") 
　　document.all[7] 
　　document.all.tags("p")則返回文檔中所有DIV數組，本例中只有一個DIV，所以用document.all.tags("p")[0]就可以訪問了。

可以用document.all["元素名"].屬性名="屬性值"來動態改變元素的屬性。用這條語句，可以做出許許多多動態網頁效果，如：動態變換圖片、動態改變文本的背景、動態改變網頁的背景、動態改變圖片的大小、動態改變文字的大小各顏色等等

<script language="JavaScript"> 
function cardClick(cardID){ 
var 
obj; 
for (var i=1;i<7;i++){ 
obj=document.all("card"+i); 
obj.style.backgroundColor="#3A6EA5"; 
obj.style.color="#FFFFFF"; 
} 
obj=document.all("card"+cardID); 
obj.style.backgroundColor="#FFFFFF"; 
obj.style.color="#3A6EA5"; 

for (var i=1;i<7;i++){ 
obj=document.all("content"+i); 
obj.style.display="none"; 
} 
obj=document.all("content"+cardID); 
obj.style.display=""; 
} 
</script>

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) 
//根據name取value 
alert(document.all.bbb.value) //根據id取 value 
</script>

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

<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是互不相同的，如果出現不同tags有相同的id

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:
對于一個復雜的頁面（代碼很長，或者id是由程序自動產生),或著一個
javascript初學者寫的程序，很有可能出現兩個tags有相同id的情況。
為了編程的時候不出錯，我推薦這樣的寫法：

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

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

 
<html> 
<head> 
<title> 
document.all test 
</title> 
<script language="javascript"> 
function view() 
{ 
/* 
//通過name兩種訪問格式 
alert(document.all.aaa.value); 
alert(document.all["aaa"].value); 
//通過id的兩種訪問格式 
alert(document.all.ccc.value); 
alert(document.all["ccc"].value); 
*/ 
//當一頁中存在兩個name相同的input時不能使用上面的訪問方法，因為將返回undefine,請使用下面方式訪問 
alert(document.all.aaa(0).value); 
alert(document.all.aaa(1).value); 
//安全的寫法 
alert(document.all("aaa",0).value); 
alert(document.all("aaa",1).value); 
} 
</script> 
</head> 
<body> 
<form name="form1" id="f1"> 
<input type="text" name="aaa" > 
<input type="text" name="aaa" id="ccc"> 
<input type="button" name="bbb" value="click" onclick="view();"> 
</form> 
</body> 
</html>

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

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

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

<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，如下：

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com