JS中all Collection 的几个方法

1.length属性:

返回集合中元素的个数。

2.item(vIndex [, iSubindex])方法
 一、如果只有一个参数(参数为整型):
(1)如果参数是整数,根据索引返回子元素
(2)如果参数是字符串,根据name或者id返回一个集合或者子元素

 二、如果有两个参数(第一个参数为字符串,第二个参数为整型)
(1)第一个参数是name,返回name为第一个参数的值的一个集合中索引为第二个的值的元素
(2)第一个参数是id,第二个参数必须为0则返回id为第一个参数的元素

3.namedItem(sName)方法(参数为字符串)
参数是字符串,根据name或者id返回一个集合或者子元素

4.tags方法
参数是字符串,根据一个HTML标签名称返回一个集合


如果使用namedItem方法,参数既是几个HTML元素的name,又是一个HTML元素的id,结果会怎么样?


补充:
1.document.getElementById('MYTXT')和document.getElementsByName('MYTXT')方法的参数在IE中不区分大小写,但是在火狐中区分,例子:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>    
    <input type="text" id="MyTxt"/>
</body>

</html>
<script type="text/javascript">        
        alert(document.getElementById('MyTxt'))//在IE中弹出“[object]”,在火狐中弹出“[object HTMLInputElement]”
    alert(document.getElementById('MYTXT'))//在IE中弹出“[object]”,在火狐中弹出“null”
</script>

2.关于document.getElementById()和document.getElementsByName()在IE和火狐中的区别:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <input type="button"  value="1" name="MyBtn" id="btn1"/>
    <input type="button"  value="2" name="MyBtn" id="btn2"/>
    <input type="button"  value="3" name="MyBtn" id="btn3"/>
    <input type="button"  value="4" name="btn2" id="MyBtn"/>    
</body>

</html>
<script type="text/javascript">    
    alert(document.getElementById('MyBtn').value)//在iE中弹出“1”,在火狐中弹出“4”(IE的Bug,所以最好不要将两个不同的HTML标签的name和id设置成一样)
    alert(document.getElementsByName('MyBtn').length)//在iE中弹出“4”,在火狐中弹出“3”(IE的Bug,所以最好不要将两个不同的HTML标签的name和id设置成一样)
</script>

3.在IE6中测试的代码:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <input type="button"  value="1" name="MyBtn" id="btn1"/>
    <input type="button"  value="2" name="MyBtn" id="btn2"/>
    <input type="button"  value="3" name="MyBtn" id="btn3"/>
    <input type="button"  value="4" name="btn2" id="MyBtn"/>    
</body>

</html>
<script type="text/javascript">    
    var arr=document.all.namedItem("MyBtn");    
    for(var i=0;i<arr.length;i++)
    {
        alert(arr[i].id);//依次弹出“btn1”,“btn2”,“btn3”,“MyBtn”
    }
</script>

4.再添一个在IE6中测试的代码:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <input type="button"  value="1" name="MyBtn" id="btn1"/>
    <input type="button"  value="2" name="MyBtn" id="btn2"/>
    <input type="button"  value="3" name="MyBtn" id="btn3"/>
    <input type="button"  value="4" name="btn2" id="MyBtn"/>    
</body>

</html>
<script type="text/javascript">    
    var arr=document.all.namedItem("MyBtn");
    var list=[];        
    for(list[list.length] in arr)
    {
        //alert(list[list.length-1]);//依次弹出“length”,“MyBtn”,“MyBtn”,“MyBtn”,“btn2”(找到了id为MyBtn的button,但是存储的是这个button的name)
        //alert(list[list.length-1]+"\t"+arr[list[list.length-1]])
    }    
    //alert(arr[list[1]]==arr[list[2]] && arr[list[1]]==arr[list[3]] && arr[list[2]]==arr[list[3]])//弹出true
    //alert(arr[list[1]].length)//弹出4
    /*

    alert(arr[list[1]][0].id)//弹出 btn1
    alert(arr[list[1]][1].id)//弹出 btn2
    alert(arr[list[1]][2].id)//弹出 btn3
    alert(arr[list[1]][3].id)//弹出 MyBtn(这里居然也存储了id为MyBtn的button,但是这里是用索引的方式存储的)
    
    alert(arr[list[1]].btn1.id);//弹出 btn1,可见arr[list[1]]可以按id方式取值
    alert(arr[list[1]].btn3.id)//弹出 btn3
    alert(arr[list[1]].MYBTN.id)
    */

    
    alert(list[4]+"\t"+arr[list[4]])//弹出 “btn2    [object]”
    alert(arr[list[4]].length)//弹出 2,发现arr[list[4]]存储的是一个id或者name为btn2的集合
    alert(arr[list[4]][0].id)//弹出 btn2
    alert(arr[list[4]][1].id)//弹出 MyBtn
</script>
原文地址:https://www.cnblogs.com/mxw09/p/1709653.html