javascript里的document.all用法收集

最新推荐文章于 2018-08-03 09:00:50 发布
最新推荐文章于 2018-08-03 09:00:50 发布
阅读量514 收藏
点赞数
文章标签： javascript button div html xhtml standards
javascript里的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"
" [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns=" [url]http://www.w3.org/1999/xhtml[/url]">
<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.

--------------------------------------------------------------------------------
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上运行)
　例2（访问一个特定元素）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
" [url]http://www.w3.org/TR/html4/loose.dtd[/url]">
<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"
" [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns=" [url]http://www.w3.org/1999/xhtml[/url]">
<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';" />//改变<h1></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;" />//改变<h1></h1>标签对中的文本内容
</form>
</body>
</html>
4、标准DOM中的访问方法
　　开头就说过document.all[]不符合WEB标准，那用什么来替代它呢？document.getElementById

Most third-party browsers are “strict standards” implementations, meaning that they implement W3C and ECMA standards and ignore most of the proprietary object models of Internet Explorer and Netscape.If the demographic for your Web site includes users likely to use less common browsers, such as Linux aficionados, it might be a good idea to avoid IE-specific features and use the W3C DOM instead. by Internet Explorer 6, we see that IE implements significant portions of the W3C DOM.
　　这段话的意思是大多数第三方浏览器只支持W3C的DOM，如果你的网站用户使用其他的浏览器，那么你最好避免使用IE的私有属性。而且IE6也开始支持W3C　DOM。
毕竟大多数人还不了解标准，在使用标准前，你还可以在你的网页中用document.all[]访问文档对象前面写到WEB标准，今天继续WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签：
　　1、getElementById()
　　getElementById()可以访问DOCUMENT中的某一特定元素，顾名思义，就是通过ID来取得元素，所以只能访问设置了ID的元素。
　　比如说有一个DIV的ID为docid：
<div id="docid"></div>
　　那么就可以用getElementById("docid")来获得这个元素。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
" [url]http://www.w3.org/TR/html4/loose.dtd[/url]">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ById</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.getElementById("docid").style.backgroundColor="#000"
}
-->
</script>
　　2、getElementsByName()
　　这个是通过NAME来获得元素，但不知大家注意没有，这个是GET　ELEMENTS，复数ELEMENTS代表获得的不是一个元素，为什么呢？
　　因为DOCUMENT中每一个元素的ID是唯一的，但NAME却可以重复。打个比喻就像人的身份证号是唯一的（理论上，虽然现实中有重复），但名字重复的却很多。如果一个文档中有两个以上的标签NAME相同，那么getElementsByName()就可以取得这些元素组成一个数组。
　　比如有两个DIV：
<div name="docname" id="docid1"></div>
<div name="docname" id="docid2"></div>
　　那么可以用getElementsByName("docname")获得这两个DIV，用getElementsByName("docname")[0]访问第一个DIV，用getElementsByName("docname")[1]访问第二个DIV。
　　下面这段话有错，请看forfor的回复，但是很可惜，IE没有支持这个方法，大家有兴趣可以在FIREFOX或NETSCAPE中调试下面这个例子。（我在NETSCAPE7.2英文版和FIREFOX1.0中调试成功。）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns=" [url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Byname,tag</title>
<style type="text/css">
<!--
#docid1,#docid2{
margin:10px;
height:400px;
width:400px;
background-color:#999;}
-->
</style>
</head>
<body>
<div name="docname" id="docid1" onClick="bgcolor()"></div>
<div name="docname" id="docid2" onClick="bgcolor()"></div>
</body>
</html>
<script language="javascript" type="text/javascript">
<!--
function bgcolor(){
var docnObj=document.getElementsByName("docname");
docnObj[0].style.backgroundColor = "black";
docnObj[1].style.backgroundColor = "black";
}
-->
</script>
　3、getElementsByTagName()
　　这个呢就是通过TAGNAME（标签名称）来获得元素，一个DOCUMENT中当然会有相同的标签，所以这个方法也是取得一个数组。
　　下面这个例子有两个DIV，可以用getElementsByTagName("div")来访问它们，用getElementsByTagName("div")[0]访问第一个DIV，用
getElementsByTagName("div")[1]访问第二个DIV。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns=" [url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Byname,tag</title>
<style type="text/css">
<!--
#docid1,#docid2{
margin:10px;
height:400px;
width:400px;
background-color:#999;}
-->
</style>
</head>
<body>
<div name="docname" id="docid1" onClick="bgcolor()"></div>
<div name="docname" id="docid2" onClick="bgcolor()"></div>
</body>
</html>
<script language="javascript" type="text/javascript">
<!--
function bgcolor(){
var docnObj=document.getElementsByTagName("div");
docnObj[0].style.backgroundColor = "black";
docnObj[1].style.backgroundColor = "black";
}
-->
</script>
 
chjshan55
关注
javascript里的document.all用法
10-25
jsDocument
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all第1/2页
09-06
本文将深入探讨`document.all`与`getElementById`、`getElementsByName`、`getElementsByTagName`这四个方法的区别和用法。 1. `document.all` `document.all` 是一个数组集合，它包含了HTML文档中所有的元素，...
document.all的用法
沧海芙蓉
03-21 6821
document.all的意思是文档的所有元素，也就是说它包含了当前网页的所有元素。它是以数组的形式保存元素的属性的，所以我们可以用document.all["元素名"].属性名="属性值"来动态改变元素的属性。用这条语句，可以做出许许多多动态网页效果，如：动态变换图片、动态改变文本的背景、动态改变网页的背景、动态改变图片的大小、动态改变文字的大小各颜色等等。你简直可以动态控制所有网页元素。 f
document.all是什么呀？
半亩方塘
02-07 1205
 问题内容：document.all是什么呀？原讨论链接：http://community.csdn.net/expert/topicview1.asp?id=1676841 所属论坛：JavaScript     审核组：WEB开发 提问者：jshao     解决者：tdl982324 感谢：xinyunyishui、tdl982324 关键字： 答案：docume
Document.all[]的用法
一直在路上
12-05 448
Document.all[]是文档中所有标签组成的一个数组变量 包括了文档对象中所有元素 自己写的一个简单例子 供参考： Document.All.html &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;...
js中document.getElementByid、document.all和document.layers区分介绍
10-28
在JavaScript的世界里，DOM（Document Object Model）是用于表示HTML或XML文档的一种树形结构，它允许编程语言与页面内容进行交互。在这个话题中，我们将深入探讨三个在JavaScript历史中起到重要作用的属性：`...
解决 firefox 不支持 document.all的方法
10-31
一种简单的方法是使用 document.getElementsByTagName("*") 替代 document.all。getElementsByTagName() 方法可以根据标签名获取所有元素的集合，"*"号表示获取所有元素，而不管它们的标签名是什么。 例如，如果你...
Document和Document.all区别分析
09-06
总结来说，`Document` 和 `Document.all` 的主要区别在于，`Document` 是现代Web开发的标准接口，提供了更安全、更高效的方法来访问和操作文档元素，而 `Document.all` 是一个遗留的属性，主要用于兼容旧版本的...
opener.document.all是什么意思（转贴）
wenqingzzz的专栏
08-20 2141
document.all代表的是ie浏览器..document.layers代表的是Netscape浏览器 比如if (!document.layers&&!document.all) 这句话判断一下用户所使用的浏览器 1、window.opener 返回的是创建当前窗口的那个窗口的引用，比如点击了a.htm上的一个链接而打开了b.htm，然后打算在b.htm上输入一个值然后赋予
JS中关于document.all的详解
10-18
JS中关于document.all的详解
document.all[]详解
10-14
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[]这个数组可以访问文档中所有元素。
document.all
u010156872的博客
08-03 230
① 利用name或id获取Html元素，取得元素对应的属性。     &lt;input name="aaa" value="aaa"&gt;     &lt;input name="bbb" value="bbb"&gt;     &lt;input id="ccc" value="ccc"&gt;     &lt;script&
document.all详解
CathyLou的博客
08-30 4668
（1）document.all是页面内所有元素的一个集合。　document.all[]这个数组可以访问文档中所有元素。document.all(0)表示页面内第一个元素 （2）document.all可以判断浏览器是否是IE if(document.all){ alert("is IE!"); } （3）也可以通过给某个元素设置id属性（id=good）,然
document.all的用法详解
weixin_30802273的博客
08-26 124
all[] 已经被 Document 接口的标准的 getElementByid() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。尽管如此，这个 all[] 数组在已有的代码中仍然使用。一.document.all是页面内所有元素的一个集合。例如： document.all(0)表示页...
document.all 的问题
xijunhu1982的专栏
11-24 456
请看下面一段js代码 [code="java"] var count="0"; if(document.getElementById("typevalue")!=null) { var obj1=document.all("typevalue"); count=obj1.length for(var i=0;i
document.all用法
sinat_32067081的博客
11-15 461
转载于：http://www.cnblogs.com/uedt/articles/1691443.htmldocument.all是页面内所有元素的一个集合。例如： document.all(0)表示页面内第一个元素document.all//可以判断浏览器是否是IE if(document.all){ alert("is IE!"); }也可以通过给某
document.all[]的用法
duxikuan的专栏
01-28 404
document.all[]的用法2007年02月10日 星期六 21:20 从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().length在ie8无法使用
进步与积累
04-13 1645
[code="java"] 无标题页 function clickA() { document.getElementById('a').innerHTML += ""; //alert(document.all('tbl_leaveDetail.dFromTime').length); } ...
深入理解JavaScript document.all 的用法与操作
在JavaScript中，`document.all` 是一个特殊的属性，它在早期版本的Internet Explorer浏览器（如IE4-IE6）中被广泛使用，而在现代浏览器中（如Chrome、Firefox、Safari等）已经不再推荐使用。`document.all` 的主要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值