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.
从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.
IE’s document.all collection exposes all document elements.This array provides access to every element in the document.
document.all[]这个数组可以访问文档中所有元素。
例1(这个可以让你理解文档中哪些是对象)
例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>
"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.
<script type=text/javascript>
</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>
"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:
<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]就可以访问了。
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"
οnclick=" document.all['heading1'].align='left';" />
<input type="button" value="Align Center"
οnclick=" document.all['heading1'].align='center';" />
<input type="button" value="Align Right"
οnclick=" document.all['heading1'].align='right';" />
<br /><br />
<input type="button" value="Bigger"
οnclick=" document.all['heading1'].style.fontSize='xx-large';" />
<input type="button" value="Smaller"
οnclick=" document.all['heading1'].style.fontSize='xx-small';" />
<br /><br />
<input type="button" value="Red"
οnclick=" document.all['heading1'].style.color='red';" />
<input type="button" value="Blue"
οnclick=" document.all['heading1'].style.color='blue';" />
<input type="button" value="Black"
οnclick=" document.all['heading1'].style.color='black';" />
<br /><br />
<input type="text" name="userText" id="userText" size="30" />
<input type="button" value="Change Text"
οnclick=" document.all['heading1'].innerText=document.testform.userText.value;" />
</form>
</body>
</html>
"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"
οnclick=" document.all['heading1'].align='left';" />
<input type="button" value="Align Center"
οnclick=" document.all['heading1'].align='center';" />
<input type="button" value="Align Right"
οnclick=" document.all['heading1'].align='right';" />
<br /><br />
<input type="button" value="Bigger"
οnclick=" document.all['heading1'].style.fontSize='xx-large';" />
<input type="button" value="Smaller"
οnclick=" document.all['heading1'].style.fontSize='xx-small';" />
<br /><br />
<input type="button" value="Red"
οnclick=" document.all['heading1'].style.color='red';" />
<input type="button" value="Blue"
οnclick=" document.all['heading1'].style.color='blue';" />
<input type="button" value="Black"
οnclick=" document.all['heading1'].style.color='black';" />
<br /><br />
<input type="text" name="userText" id="userText" size="30" />
<input type="button" value="Change Text"
οnclick=" document.all['heading1'].innerText=document.testform.userText.value;" />
</form>
</body>
</html>