管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　理解这句话可看以下：

　　例1（这个可以让你理解文档中哪些是对象）

　　

　　 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　输出结果：

　　

复制代码 代码如下:

　　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

　　可以通过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>

　　[/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 id=aaa value=aaa1>

　　<input id=aaa value=aaa2>

　　<input name=bbb value=bbb>

　　<input name=bbb value=bbb2>

　　<input id=ccc value=ccc>

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

　　这样最安全.

　　以下是我自己的测试：

　　

　　 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　从上面可以看到我们在使用document.all的时候可能会返回一个值或多个值的情况，所以使用之前一定要判断长度，要不然会出现错误。

　　如下面的问题：两个函数对多个checkbox进行处理，分别执行全部选中和取消全选功能如果按下面使用会出现什么问题呢？

　　

　　 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

　　看当只有一个checkbox的时候应改成下面代码

　　

复制代码 代码如下:

　　<HTML>

　　<SCRIPT LANGUAGE="JavaScript">

　　<!--

　　function checkall(){

　　var huang = document.all['huang'];

　　if(huang.length){

　　for(i = 0;i < huang.length;i++){

　　if(huang[i].type == "checkbox")

　　{

　　huang[i].checked = true;

　　}

　　}

　　}else{

　　huang.checked = true;

　　}

　　}

　　function centerall(){

　　if(huang.length){

　　for(i = 0;i < huang.length;i++){

　　if(huang[i].type == "checkbox")

　　{

　　huang[i].checked = false;

　　}

　　}

　　}else{

　　huang.checked = false;

　　}

　　}

　　//-->

　　</SCRIPT>

　　<BODY>

　　<input type="checkbox" name="huang" value="OFF">

　　[br]

　　<input type="button" value = "checkall" onclick = "checkall();">

　　<input type="button" value = "centerall" onclick = "centerall();">

　　</BODY>

　　</HTML>

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

　　

复制代码 代码如下:

　　<HTML>

　　<SCRIPT LANGUAGE="JavaScript">

　　<!--

　　function checkall()

　　{

　　var huang = document.getElementsByTagName("input");

　　for(i = 0;i < huang.length;i++){

　　if(huang[i].type == "checkbox")

　　{

　　huang[i].checked = true;

　　}

　　}

　　}

　　function centerall()

　　{

　　var huang = document.getElementsByTagName("input");

　　for(i = 0;i < huang.length;i++){

　　if(huang[i].type == "checkbox")

　　{

　　huang[i].checked = false;

　　}

　　}

　　}

　　//-->

　　</SCRIPT>

　　<BODY>

　　<input type="checkbox" name="huang" value="OFF">

　　[br]

　　<input type="button" value = "checkall" onclick = "checkall();">

　　<input type="button" value = "centerall" onclick = "centerall();">

　　</BODY>

　　</HTML>

教程首页 更多教程