----------------------------------
document.all //ie only
訪問頁面dom元素： document.all[index/id/name] ~~ 可通過索引號 id值 name(表單元素) 訪問到對應的某個DOM元素
document.all.item(id/name) ~~ item()方法來獲取集合中的元素
document.all.tags("div") ~~~ tags()方法返回某個標簽的元素數組
--------------------------------------
document.layers和document.all的用法是一樣的，功能也是相同的。所在我就只介紹一種用法:
document.all的意思是文檔的所有元素，也就是說它包含了當前網頁的所有元素。它是以數組的形式保存元素的屬性的，所以我們可以用 document.all["元素名"].屬性名="屬性值"來動態改變元素的屬性。用這條語句，可以做出許許多多動態網頁效果，如：動態變換圖片、動態 改變文本的背景、動態改變網頁的背景、動態改變圖片的大小、動態改變文字的大小各顏色等等。你簡直可以動態控制所有網頁元素。
document.all[]這個數組可以訪問文檔中所有元素。
例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
(注意它只可以在IE上運行)
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數組，本例中只有一個DIV，所以用 document.all.tags("div")[0]就可以訪問了。
3、使用document.all[]
例3
<!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 #2</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<!-- Works in Internet Explorer and compatible -->
<h1 id="heading1" align="center" style="font-size: larger;">DHTML Fun!!!</h1>
<form name="testform" id="testform" action="#" method="get">
<br /><br />
<input type="button" value="Align Left"
onclick="document.all['heading1'].align='left';" />//改變<h1& gt;</h1>標簽對中的align屬性的值,下面的代碼作用相同
<input type="button" value="Align Center"
onclick="document.all['heading1'].align='center';" />
<input type="button" value="Align Right"
onclick="document.all['heading1'].align='right';" />
<br /><br />
<input type="button" value="Bigger"
onclick="document.all['heading1'].style.fontSize='xx-large';" />
<input type="button" value="Smaller"
onclick="document.all['heading1'].style.fontSize='xx-small';" />
<br /><br />
<input type="button" value="Red"
onclick="document.all['heading1'].style.color='red';" />
<input type="button" value="Blue"
onclick="document.all['heading1'].style.color='blue';" />
<input type="button" value="Black"
onclick="document.all['heading1'].style.color='black';" />
<br /><br />
<input type="text" name="userText" id="userText" size="30" />
<input type="button" value="Change Text"
onclick="document.all['heading1'].innerText=document.testform.userText.value;" /& gt;//改變<h1></h1>標簽對中的文本內容
</form>
</body>
</html>