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

最新推荐文章于 2019-12-11 14:19:41 发布

luweifeng1983

最新推荐文章于 2019-12-11 14:19:41 发布

阅读量1.9k

点赞数

分类专栏： JavaScript应用篇文章标签： javascript button div 文档 input html

本文链接：https://blog.csdn.net/luweifeng1983/article/details/3549769

版权

JavaScript应用篇专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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

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

 
 <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可以判断浏览器是否是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>  
   
  这样最安全.
 

以下是我自己的测试：

 
 <html>
<head>
<title>
document.all test
</title>
<script language="javascript">
function view()
{
/*
    //通过name两种访问格式
    alert(document.all.aaa.value);
    alert(document.all["aaa"].value);
    //通过id的两种访问格式
    alert(document.all.ccc.value);
    alert(document.all["ccc"].value);
*/
    //当一页中存在两个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>
<body>
<form name="form1" id="f1">
<input type="text" name="aaa" >
<input type="text" name="aaa" id="ccc">
<input type="button" name="bbb" value="click" οnclick="view();">
</form>
</body>
</html>
 

从上面可以看到我们在使用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的时候应改成下面代码

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