网络编程
位置：首页>> 网络编程>> JavaScript>> document.all与WEB标准

document.all与WEB标准

　　发布时间：2008-03-16 14:28:00　

标签：dom,document,标准,web,javascript

1、DOM

WEB标准现在可真是热门中热门，不过下面讨论的是一个不符合标准的document.all[]。DOM－－DOCUMENT　OBJECT　MODEL文档对象模型，提供了访问文档对象的方法.例如文档中有一个table,你要改变它的背景颜色，那就可以在javascript中用document.all[]访问这个TABLE。但DOM也有所不同，因为浏览器厂商之间的竞争，各浏览器厂商都开发了自己的私有DOM，只能在自己的浏览器上正确运行，document.all[]就是只能运行在 IE是的微软的私有DOM。为了正确理解DOM，给出IE4的DOM

下载：苏沈小雨htmlDOM方法中文手册chm

　　2、理解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）。
　　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>



　　例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]就可以访问了。

　　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';" />
<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>

1
2 3 下一页
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com