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

< 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 />"); } //--> document.all.length=318
document.all[0]=!
document.all[1]=HTML
document.all[2]=HEAD
document.all[3]=TITLE
document.all[4]=META
document.all[5]=META
document.all[6]=META
document.all[7]=META
document.all[8]=META
document.all[9]=META
document.all[10]=LINK
document.all[11]=LINK
document.all[12]=LINK
document.all[13]=!
document.all[14]=META
document.all[15]=META
document.all[16]=META
document.all[17]=META
document.all[18]=META
document.all[19]=META
document.all[20]=META
document.all[21]=!
document.all[22]=BODY
document.all[23]=FORM
document.all[24]=DIV
document.all[25]=INPUT
document.all[26]=!
document.all[27]=STYLE
document.all[28]=SCRIPT
document.all[29]=DIV
document.all[30]=SCRIPT
document.all[31]=LINK
document.all[32]=DIV
document.all[33]=TABLE
document.all[34]=TBODY
document.all[35]=TR
document.all[36]=TD
document.all[37]=A
document.all[38]=TD
document.all[39]=A
document.all[40]=TD
document.all[41]=A
document.all[42]=TD
document.all[43]=A
document.all[44]=TD
document.all[45]=A
document.all[46]=TD
document.all[47]=A
document.all[48]=TD
document.all[49]=A
document.all[50]=TD
document.all[51]=A
document.all[52]=TD
document.all[53]=A
document.all[54]=TD
document.all[55]=A
document.all[56]=TD
document.all[57]=A
document.all[58]=TD
document.all[59]=A
document.all[60]=TD
document.all[61]=A
document.all[62]=TD
document.all[63]=A
document.all[64]=TD
document.all[65]=A
document.all[66]=TD
document.all[67]=A
document.all[68]=TD
document.all[69]=A
document.all[70]=!
document.all[71]=DIV
document.all[72]=DIV
document.all[73]=!
document.all[74]=DIV
document.all[75]=DIV
document.all[76]=SPAN
document.all[77]=DIV
document.all[78]=DIV
document.all[79]=P
document.all[80]=A
document.all[81]=DIV
document.all[82]=SPAN
document.all[83]=DIV
document.all[84]=P
document.all[85]=DIV
document.all[86]=SPAN
document.all[87]=DIV
document.all[88]=DIV
document.all[89]=P
document.all[90]=A
document.all[91]=IMG
document.all[92]=P
document.all[93]=A
document.all[94]=IMG
document.all[95]=P
document.all[96]=A
document.all[97]=IMG
document.all[98]=P
document.all[99]=A
document.all[100]=IMG
document.all[101]=P
document.all[102]=A
document.all[103]=IMG
document.all[104]=P
document.all[105]=A
document.all[106]=IMG
document.all[107]=P
document.all[108]=A
document.all[109]=IMG
document.all[110]=!
document.all[111]=DIV
document.all[112]=H5
document.all[113]=DIV
document.all[114]=UL
document.all[115]=LI
document.all[116]=A
document.all[117]=IMG
document.all[118]=SPAN
document.all[119]=A
document.all[120]=P
document.all[121]=LI
document.all[122]=A
document.all[123]=IMG
document.all[124]=SPAN
document.all[125]=A
document.all[126]=P
document.all[127]=LI
document.all[128]=A
document.all[129]=IMG
document.all[130]=SPAN
document.all[131]=A
document.all[132]=P
document.all[133]=DIV
document.all[134]=H5
document.all[135]=DIV
document.all[136]=UL
document.all[137]=LI
document.all[138]=A
document.all[139]=IMG
document.all[140]=SPAN
document.all[141]=A
document.all[142]=P
document.all[143]=LI
document.all[144]=A
document.all[145]=IMG
document.all[146]=SPAN
document.all[147]=A
document.all[148]=P
document.all[149]=LI
document.all[150]=A
document.all[151]=IMG
document.all[152]=SPAN
document.all[153]=A
document.all[154]=P
document.all[155]=!
document.all[156]=DIV
document.all[157]=SPAN
document.all[158]=DIV
document.all[159]=DIV
document.all[160]=TABLE
document.all[161]=TBODY
document.all[162]=TR
document.all[163]=TD
document.all[164]=A
document.all[165]=IMG
document.all[166]=TD
document.all[167]=A
document.all[168]=IMG
document.all[169]=HR
document.all[170]=UL
document.all[171]=A
document.all[172]=LI
document.all[173]=A
document.all[174]=LI
document.all[175]=A
document.all[176]=LI
document.all[177]=A
document.all[178]=LI
document.all[179]=A
document.all[180]=LI
document.all[181]=A
document.all[182]=LI
document.all[183]=A
document.all[184]=LI
document.all[185]=A
document.all[186]=A
document.all[187]=LI
document.all[188]=A
document.all[189]=A
document.all[190]=LI
document.all[191]=A
document.all[192]=LI
document.all[193]=A
document.all[194]=A
document.all[195]=P
document.all[196]=A
document.all[197]=A
document.all[198]=!
document.all[199]=!
document.all[200]=DIV
document.all[201]=SCRIPT
document.all[202]=!
document.all[203]=DIV
document.all[204]=DIV
document.all[205]=H5
document.all[206]=DIV
document.all[207]=P
document.all[208]=BR
document.all[209]=BR
document.all[210]=DIV
document.all[211]=P
document.all[212]=A
document.all[213]=A
document.all[214]=DIV
document.all[215]=P
document.all[216]=SELECT
document.all[217]=OPTION
document.all[218]=OPTION
document.all[219]=OPTION
document.all[220]=OPTION
document.all[221]=OPTION
document.all[222]=INPUT
document.all[223]=SPAN
document.all[224]=IMG
document.all[225]=IMG
document.all[226]=IMG
document.all[227]=IMG
document.all[228]=IMG
document.all[229]=SPAN
document.all[230]=A
document.all[231]=A
document.all[232]=A
document.all[233]=A
document.all[234]=SPAN
document.all[235]=DIV
document.all[236]=P
document.all[237]=DIV
document.all[238]=P
document.all[239]=DIV
document.all[240]=STRONG
document.all[241]=STRONG
document.all[242]=SPAN
document.all[243]=BR
document.all[244]=BR
document.all[245]=STRONG
document.all[246]=SPAN
document.all[247]=STRONG
document.all[248]=SPAN
document.all[249]=BR
document.all[250]=DIV
document.all[251]=STRONG
document.all[252]=SPAN
document.all[253]=BR
document.all[254]=BR
document.all[255]=STRONG
document.all[256]=SPAN
document.all[257]=DIV
document.all[258]=STRONG
document.all[259]=SPAN
document.all[260]=BR
document.all[261]=BR
document.all[262]=DIV
document.all[263]=BR
document.all[264]=BR
document.all[265]=BR
document.all[266]=BR
document.all[267]=STRONG
document.all[268]=SPAN
document.all[269]=BR
document.all[270]=BR
document.all[271]=BR
document.all[272]=BR
document.all[273]=BR
document.all[274]=BR
document.all[275]=BR
document.all[276]=BR
document.all[277]=BR
document.all[278]=BR
document.all[279]=BR
document.all[280]=BR
document.all[281]=BR
document.all[282]=STRONG
document.all[283]=SPAN
document.all[284]=BR
document.all[285]=STRONG
document.all[286]=SPAN
document.all[287]=BR
document.all[288]=BR
document.all[289]=BR
document.all[290]=STRONG
document.all[291]=SPAN
document.all[292]=STRONG
document.all[293]=SPAN
document.all[294]=BR
document.all[295]=BR
document.all[296]=BR
document.all[297]=BR
document.all[298]=BR
document.all[299]=DIV
document.all[300]=DIV
document.all[301]=DIV
document.all[302]=STRONG
document.all[303]=FONT
document.all[304]=DIV
document.all[305]=HR
document.all[306]=DIV
document.all[307]=EM
document.all[308]=EM
document.all[309]=DIV
document.all[310]=EM
document.all[311]=DIV
document.all[312]=EM
document.all[313]=EM
document.all[314]=DIV
document.all[315]=HR
document.all[316]=P
document.all[317]=SCRIPT
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>
posted on 2010-03-18 14:54  GT_Andy  阅读(201)  评论(0)  编辑  收藏  举报

Copyright © 2024 GT_Andy
Powered by .NET 8.0 on Kubernetes Powered By博客园