Document getElementsByName的用法示例

发布时间:2020-12-15编辑:脚本学堂
本文介绍下,javascript编程中,有关getElementsByName的用法,分享几个例子,供大家学习参考。

本节内容:
getElementsByName的用法实例

实例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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>getElementsByName用法-www.jb200.com</title> 
</head>
<body > 
    <p name="pr" ff="pr"> aaa </p> 
    <p name="pr" ff="pr"> bbb </p> 
    <p name="pr" ff="pr"> ccc </p> 
    <p name="pr" ff="pr"> ddd </p> 
    <p name="pr" ff="pr"> eee </p> 
    <p name="pr" ff="pr"> eee </p> 
    <p name="pr" > eee </p> 
    <p name="pr" > eee </p> 
    <input type="button" onclick="myFun()" value="按钮"/> 
</body> 
 
<script type="text/javascript" > 
    function myFun() { 
        var count = 0; 
        var pArr = document.getElementsByTagName_r("p"); 
      for(var i=0;i<pArr.length;i++) { 
            var p = pArr[i]; 
            if (p.getAttribute("ff") == "pr" ) { 
                count++;// 符合要求的p标签数目 
            } 
        } 
        alert(count); 
    } 
</script> 
</html>  
 

实例2:
 

复制代码 代码示例:

<!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=gb2312" /> 
<title>getElementsByName2[拿到name是pr的p标签对象数组]-www.jb200.com</title> 
</head> 
 
<body > 
    <p name="pr" ff="pr"> aaa </p> 
    <p name="pr" ff="pr"> bbb </p> 
    <p name="pr" ff="pr"> ccc </p> 
    <p name="pr" ff="pr"> ddd </p> 
    <p name="pr" ff="pr"> eee </p> 
    <p name="pr" > eee </p> 
    <p name="pr" > eee </p> 
    <p name="pr" > eee </p> 
    <input type="button" onclick="myFun()" value="按钮"/> 
</body> 
 
<script type="text/javascript"> 
    var getElementsByName = function(name){ 
        var rets = document.getElementsByName(name); 
        if(rets.length == 0) { 
            rets = []; 
            var alls = document.getElementsByTagName_r("*"); 
            for(var i=0;i<alls.length ; i++) { 
                if(alls[i].getAttribute("name") == name) { 
                    rets.push(alls[i]); 
                } 
            } 
        } 
        return rets; 
    }; 
    function myFun() { 
        var res = getElementsByName("pr"); 
        alert(res.length); 
    } 
</script> 
</html>

定义和用法

getElementsByName() 方法可返回带有指定名称的对象的集合。
语法document.getElementsByName(name)

该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。

另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

例子:
<html>
<head>
<script type="text/javascript">
function getElements() {
var x=document.getElementsByName("myInput");
alert(x.length);
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br /><br />
<input type="button" onclick="getElements()"value="How many elements named 'myInput'?" />
</body>
</html>

说明:
getElementById,它也是只有document对象才能使用,而且返回的是数组的第一个元素,它的方法名都写明了是getElement而不是getElements。
因此,不要搞浑了.getElementsByName返回的是所有name为指定值的所有元素的集合。

“根据 NAME 标签属性的值获取对象的集合。”集合比数组要松散的多,集合里每个子项的类型可以不同,集合只是把某些元素放在一起作为一类来使用,相比之下数组就严格多了,每个子项都是统一的类型。

document.getElementsByName、document.getElementsByTagName、document.formName.elements 这类方法所得到的结果都是集合。
用于批量更新时的数据传递。