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

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

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

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

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

　　輸出結(jié)果：

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

 
　　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（訪問一個特定元素）

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

 
<!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><div id="docid" name="docname" onClick="bgcolor()"></div> 
　　</body> 
　　</html> 
　　<script language="javascript" type="text/javascript"> 
　　<!-- 
　　function bgcolor(){ 
　　document.all[7].style.backgroundColor="#000" 
　　} 
　　--> 
　　</script> 
　　上面的這個例子讓你了解怎么訪問文檔中的一個特定元素，比如文檔中有一個DIV 
　　<div id="docid" name="docname"></div>，你可以通過這個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("div")則返回文檔中所有DIV數(shù)組，本例中只有一個DIV，所以用document.all.tags("div")[0]就可以訪問了。 

可以用document.all["元素名"].屬性名="屬性值"來動態(tài)改變元素的屬性。用這條語句，可以做出許許多多動態(tài)網(wǎng)頁效果，如：動態(tài)變換圖片、動態(tài)改變文本的背景、動態(tài)改變網(wǎng)頁的背景、動態(tài)改變圖片的大小、動態(tài)改變文字的大小各顏色等等
[code]
<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>

12 下一頁閱讀全文