document.all与getElementById、getElementsByName、getElementsByTagName用法差异

2012-10-19

document.all与getElementById、getElementsByName、getElementsByTagName用法区别document.all与getElement

document.all与getElementById、getElementsByName、getElementsByTagName用法区别

document.all与getElementById、getElementsByName、getElementsByTagName用法区别:

1.Document.all[] 是一个多功能的类似数组的对象，它提供了对文档中所有 HTML 元素的访问理解这句话可看以下：

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

?输出结果：
代码如下:
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

2.可以通过ID，NAME或INDEX属性访问某个具体的元素

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

可以用document.all["元素名"].属性名="属性值"来动态改变元素的属性。用这条语句，可以做出许许多多动态网页效果，如：动态变换图片、动态改变文本的背景、动态改变网页的背景、动态改变图片的大小、动态改变文字的大小各颜色等等

[code]
<script language="JavaScript">
function cardClick(cardID){
var obj;
for (var i=1;i<7;i++){
obj=document.all("card"+i);
obj.style.backgroundColor="#3A6EA5";
obj.style.color="#FFFFFF";
}
obj=document.all("card"+cardID);
obj.style.backgroundColor="#FFFFFF";
obj.style.color="#3A6EA5";
for (var i=1;i<7;i++){
obj=document.all("content"+i);
obj.style.display="none";
}
obj=document.all("content"+cardID);
obj.style.display="";
}
</script>
Document.all[]是文档中所有标签组成的一个数组变量，包括了文档对象中所有元素

[/code]

document.all可以判断浏览器是否是IE
if(document.all){
alert("is IE!");
}

使用document.all注意的地方
代码1:
代码如下:
<input name=aaa value=aaa>
<input id=bbb value=bbb>
<script language=Jscript>
alert(document.all.aaa.value) //根据name取value
alert(document.all.bbb.value) //根据id取 value
</script>
代码2：
但是常常name可以相同(如:用checkbox取用户的多项爱好的情况)
代码如下:
<input name=aaa value=a1>
<input name=aaa value=a2>
<input id=bbb value=bbb>
<script language=Jscript>
alert(document.all.aaa(0).value) //显示a1
alert(document.all.aaa(1).value) //显示a2
alert(document.all.bbb(0).value) //这行代码会失败

</script>

代码3：
理论上一个页面中的id是互不相同的，如果出现不同tags有相同的id，document.all.id 就会失败,就象这样：

代码如下:
<input id=aaa value=a1>
<input id=aaa value=a2>
<script language=Jscript>
?? alert(document.all.aaa.value) //显示 undefined 而不是 a1或者a2
</script>

代码4:
对于一个复杂的页面（代码很长，或者id是由程序自动产生),或着一个
javascript初学者写的程序，很有可能出现两个tags有相同id的情况。
为了编程的时候不出错，我推荐这样的写法：

代码如下:

<input name=ddd value=ddd>
<script language=Jscript>
alert(document.all("aaa",0).value)
alert(document.all("aaa",1).value)
alert(document.all("bbb",0).value)
alert(document.all("bbb",1).value)
alert(document.all("ccc",0).value)
alert(document.all("ddd",0).value)
</script>
这样最安全.
以下是我自己的测试：
<html>
<head>
<title>
document.all test
</title>
<script language="javascript">
function view()
{
//当一页中存在两个name相同的input时不能使用上面的访问方法，因为将返回undefine,请使用下面方式访问
alert(document.all.aaa(0).value);
alert(document.all.aaa(1).value);
//安全的写法
alert(document.all("aaa",0).value);
alert(document.all("aaa",1).value);
}
</script>
</head>

从上面可以看到我们在使用document.all的时候可能会返回一个值或多个值的情况，所以使用之前一定要判断长度，要不然会出现错误。
如下面的问题：两个函数对多个checkbox进行处理，分别执行全部选中和取消全选功能如果按下面使用会出现什么问题呢？
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkall(){
var huang = document.all['huang'];
for(i = 0;i < huang.length;i++){
if(huang[i].type == "checkbox")
{
huang[i].checked = true;
}
}
}
function centerall(){
var huang = document.all['huang'];
for(i = 0;i < huang.length;i++){
huang[i].checked = false;

}
}
//-->
</SCRIPT>
<BODY>
<input type="checkbox" name="huang" value="OFF">
<input type="checkbox" name="huang" value="OFF">
<input type="checkbox" name="huang" value="OFF">
<br>
<input type="button" value = "checkall" onclick = "checkall();">
<input type="button" value = "centerall" onclick = "centerall();">
</BODY>
</HTML>

看上面的代码，当表单中有多个checkbox的时候是没有问题的，但当其中只有一个checkbox的时候就会有问题，即点全选的时候不起作用，因为当其中只有一个checkbox的时候不再用document.all["huang"][0].checked来访问，而是直接用 document.all["huang"].checked来访问了
看当只有一个checkbox的时候应改成下面代码
代码如下:

getElementsByTagName
或者使用另一种形式，使用getElementsByTagName，如下：

document.all 返回可以是一个对象，也可以是一个对象集合

getElementById? 返回是一个对象

getElementsByName 返回的是对象集合

getElementsByTagName 返回的是对象集合

热点排行

Web前端

document.all与getElementById、getElementsByName、getElementsByTagName用法差异