getElementsByName和getElementByID

最新推荐文章于 2022-12-28 10:53:25 发布

akpaul6677

最新推荐文章于 2022-12-28 10:53:25 发布

阅读量176

点赞数

原文链接：http://www.cnblogs.com/xiongeee/archive/2007/03/28/690677.html

版权

以前经常使用document.getElementByID取得html里面ID标记的属性，昨天想当然使用 document.getElementByName（注意没有s），来获取name标记的属性，结果发现浏览器报错。查了查资料，才发现没有这个函数，应该是getElementsByName。和document.getElementByID不同的是，前者返回的是一个name和ID的集合，因为 W3C是允许name属性重复的，也就是html标记可以使用同一个name名字，而后者返回了ID的第一个元素。所以 document.getElementsByName的使用方法往往是document.getElementsByName("***")[0], [1]等。document.getElementsByTagName, document.formName.elements 这类方法所得到的结果也都是集合。

<input type=checkbox value=2>2
<input type=checkbox value=1>1
<script>
var arr = document.getElementsByTagName("input"); //取得所有input,返回就是数组.
alert(arr[0].value); //取第一个input的值.
</script>

再给个例子：

一个Table中有7，8个tr，我需要动态的将其中4，5个tr display=none/block。但是我又不想给每个tr都定义一个id，所以我想到了给这4，5个tr一个共同的name然后用 getElementsByName来返回一个数组，这样用循环操作每一个tr方便点，可是后来发祥ie不支持。

如果只是 hide/show 操作的话，可以设一个独立 stylesheet，把同一 classname 的 object 设为 display:none。之后便可以透过改变这个 stylesheet 的 disabled property 改变属于这 classname 的 object 的 show/hide 状况。

<html>
<head>
<title>test</title>
</head>
<body>
<style id="abc-style">
.abc {display: none}
</style>
<h1 class='abc'>test</h1>
<script>
function toggle() {
var style = document.getElementById('abc-style');
style.disabled = !style.disabled;
}
</script>
<P οnclick="toggle()">click me </p>

</body>
</html>

延伸思考：

比如说，你想得到所有class属性是"abc"的tr，用这个就可以了：
代码:

alltr = document.evaluate("//tr[@class='abc']", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < alltr.snapshotLength; i++) {
tr = alltr.snapshotItem(i);
// do something with tr
}

转载于:https://www.cnblogs.com/xiongeee/archive/2007/03/28/690677.html