• 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>
  • 相关阅读:
    2019 SDN阅读作业
    第10组 Alpha冲刺(4/6)
    第10组 Alpha冲刺(3/6)
    2019 SDN上机第3次作业
    团队Beta4
    团队Beta3
    团队Beta2
    团队Beta1
    tuandui last
    团队Arpha6
  • 原文地址:https://www.cnblogs.com/mxw09/p/1709653.html
Copyright © 2020-2023  润新知