您的位置：首页 > 其它

document.all的用法详解(其实也还挺方便的)

2013-06-06 14:27 337 查看

----------------------------------

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">



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

</style>
</head>
<body><div id="docid" name="docname" onClick="bgcolor()"></div>
</body>
</html>
<script language="javascript" type="text/javascript">

</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>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航