javascript里的document.all用法

1 、理解document.all[]

　　从IE4开始IE的object model才增加了document.all[],来看看document.all[]的Description:
Array of all HTML tags  in  the document.Collection of all elements contained by the  object .
　　也就是说document.all[]是文档中所有标签组成的一个数组变量，包括了文档对象中所有元素（见例1）。

　　IE’s document.all collection exposes all document elements.This array provides access to every element  in  the document.
　　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

　　例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 >< 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 ]就可以访问了。
　　 2 、使用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'; "   />
< 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; "   />
</ form >
</ body >
</ html >