JS中getElementsByName()的作用

发布时间:2019-09-05编辑:脚本学堂
本文介绍下,javascript编程,有关getElementsByName()用法的作用,感兴趣的朋友参考下吧。

本节内容:
JS中getElementsByName()的用法

在DHTML对象树中,可以使用document.getElementsByName来获取一个包含页面中所有指定Name元素的对象数组。

例1,Document
 

复制代码 代码示例:
<input type="text" value="米拉" name="ML" />

例2、获取name:
 

document.getElementsByName('ML')[i]所有Name为ML的对象X个,是一个数组。
注意:Name有S,即使只有一个Name='mybut',也要用document.getElementsByName("mybut")[0]代表对象

getElementsByName 

注意:getElementsByName而不是getElementByName,多一个s。
其次需要注意的是firefox浏览器下,如果用到getElementsByName必须设置id,比如
<input type=text id="test1" name="test1">.
在ie下id可以不要,但firefox下如果没有id属性,就得不到正确的结果。
document.getElementsByName得到的是标签的数组。
document.getElementId得到的是某一个标签。

比如一个radio用getElementsByName和getElementById得到的结果是不一样的。
getElementById得到的是radio的第一个元素。
而getElementsByName得到的是radio的所有元素的数组。

再例如:
 

复制代码 代码示例:
<input type="text" name="text1" value="test text">
<script>
document.getElementsByName("text1").value
document.getElementById("text1").value
</script>
 

document.getElementsByName("text1").value得到的是undefined(未定义)。
而 document.getElementById("text1").value得到的值是test text。

可见getElementsByName和getElementById的作用是不同的,不能把他们混为一谈。

getElementById的时候,会根据html元素的id属性,根据规范id应当是唯一的,用来标示一个element,比如<td>, < div> ......。所以返回唯一元素句柄或者null。对于表单控件<input><select>< textarea>等,在不指定id的时候,name也会被视作id,比如<input type="text" name= "abc" value="123">也可以用document.getElementById("abc")来获取

而getElementsByName从名字上看,就可以知道,它返回的是复数个对象。它根据name属性(name可以重复),得到所有name属性与参数相同的控件组成的数组,不存在时,返回0长度数组(.length == 0,而不是null)

例如:
 

复制代码 代码示例:

<input type="text" name="abc" value="1">
<input type="text" name="abc" value="2">
<input type="text" name="abc" value="3">

var array = document.getElementsByName("abc");
if (array.length == 0) {
alert("Error");
return;
}

for (var i = 0; i < array.length; i++) {
alert(array[i].value);