getElementsByName用法（附实例）

最新推荐文章于 2022-08-17 09:25:15 发布

夜光寒

最新推荐文章于 2022-08-17 09:25:15 发布

阅读量9.1k

点赞数

分类专栏： JavaScript 文章标签：浏览器 javascript ie firefox button function

JavaScript 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

getElementsByName可以根据元素的name或id属性值来查找或获取元素．然后对元素进行某些操作．getElementsByName与 getElementById都是用来在网页内查找获取元素．但他们是有区别的．getElementById是根据元素的id属性值进行查找，并且只获取唯一的．比如你网页中有n个元素的id值属性是一样的，getElementById只获取其中一个．
而getElementsByName是根据元素的name或id属性值来查找，并且可以获取多个元素，．如果你的网页中有5个元素的name和id属性值是一样的．那么getElementsByName将全部获取，并以数组的方式来返回对这5个元素的引用．
上面对getElementsByName的解释是根据W3C标准而言．实际应用中在IE浏览器里表现很不正常，强烈建议使用FF(FireFox)浏览器运行下面实例．

语法：

arr=document.getElementsByName(oName)

返回值：

arr:数组类型．返回一组网页内据有同一name属性的元素．

参数

document:文档网页的根.
oName:被查找元素的name属性或id属性值．

getElementsByName实例

<html>
<head>
<title>Dom:getElementsByName实例演示</title>
</head>
<body>
<h2>该实例将把网页内name属性值b的元素．添加一个边框．请用FF浏览器运行该例．</h2>
<div id="b">该属性只有id值．所以不会被获取改变,但在IE浏览器里只有该元素会被添加边框，</div>
<div name="b">该div的name属性为b,点击按扭添加一个边框，在IE里看不到效果，</div>
<span name="b">该span的name属性为b,点击按扭添加一个边框，在IE里看不到效果</span>
<br/>
<input type="button" value="添加边框" οnclick="get_element()"/>
<script language="javascript">
function get_element(){
var arr = document.getElementsByName("b");
for(var i=0; i<arr.length; i++){
arr[i].style.border="1px solid";
}
}
</script>
</body>
</html>

浏览器兼容及W3C标准：

经测试getElementsByName至少兼容以下浏览器:IE, Firefox
W3C标准：是