本文介绍JavaScript中getElementsByName方法,用于根据name属性查找所有匹配元素并返回节点集合。该方法返回的对象集合具有length属性,可按数组方式遍历操作。由于HTML中name属性不唯一,方法名使用复数形式。文章包含完整HTML示例代码,展示如何获取元素、遍历集合及绑定点击事件。
getElementsByName方法概述
该方法用于查找具有指定name属性的所有HTML元素,并返回一个节点集合(也称为对象集合)。
返回的集合可以像数组一样使用,通过length属性可以获取集合中元素的数量。
由于在HTML页面中,name属性值可能对应多个元素,无法唯一确定单个元素,因此该方法命名为getElementsByName(复数形式)而非getElementByName。
完整代码示例
<!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>无标题文档</title>
</head>
<body>
<p>
<input type="text" name="luck" value="我中奖了,中了一个亿" onclick="aa()" id="luck1" />
</p>
<p>
<input type="text" name="luck" value="我交了女朋友" id="luck2" />
</p>
<p>
<input type="text" name="luck" value="我升迁了" id="luck3" />
</p>
<p>
<input type="text" name="luck" value="我买房了" id="luck4" />
</p>
<script>
/*
1、获取每一个文本框的值
2、获取每一个文本框的类型
3、为每一个文本框增加点击事件
*/
/*
第一步 获取name属性为luck值得对象数组(节点数组)
*/
var luckElements = document.getElementsByName("luck");
/*
第二步 遍历节点数组
*/
for(var i=0;i<luckElements.length;i++){
//获取元素的value值
alert(luckElements[i].value);
//获取元素的type值
alert(luckElements[i].type);
//为每一个元素的onclick属性赋值即为文本框增加点击事件
luckElements[i].onclick=function(){
alert(this.value);
}
}
</script>
</body>
</html>
由于在HTML页面中,name属性值可能对应多个元素,无法唯一确定单个元素,因此该方法命名为getElementsByName(复数形式)而非getElementByName。
以上内容即为JavaScript中通过getElementsByName方法访问name集合对象的完整介绍,感谢阅读。