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

最新推荐文章于 2021-05-14 16:46:55 发布

dayanwu2842

最新推荐文章于 2021-05-14 16:46:55 发布

阅读量634

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/stephenykk/archive/2013/06/06/3121099.html

版权

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

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"
οnclick="document.all['heading1'].align='left';" />//改变<h1& gt;</h1>标签对中的align属性的值,下面的代码作用相同
<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;" /& gt;//改变<h1></h1>标签对中的文本内容
</form>
</body>
</html>

转载于:https://www.cnblogs.com/stephenykk/archive/2013/06/06/3121099.html

dayanwu2842

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
document.all的用法详解(其实也还挺方便的)

----------------------------------document.all //ie only访问页面dom元素： document.all[index/id/name] ~~ 可通过索引号 id值 name(表单元素) 访问到对应的某个DOM元素document.all.item(id/name) ~~ item()方法来获取集合中的元素docume...
复制链接

扫一扫