以前经常使用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>
<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 onclick="toggle()">click me </p>
<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 onclick="toggle()">click me </p>
</body>
</html>
延伸思考:</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
}