HTMLCollection length 属性
JavaScript基础 2022-06-08 12:12:53小码哥的IT人生shichen
HTMLCollection length 属性
实例
找出文档中有多少 P 元素：
function myFunction() {
var l = document.getElementsByTagName("P").length;
alert(l);
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>HTMLCollection length 属性</h1>
<p>length 属性返回 HTMLCollection 中元素的数量。</p>
<p>单击按钮可输出此文档中 P 元素的数量：</p>
<button onclick="myFunction()">对 P 元素计数</button>
<script>
function myFunction() {
var l = document.getElementsByTagName("P").length;
alert(l);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
length 属性返回 HTMLCollection 中元素的数量。
此属性是只读的。
当您想要遍历 HTMLCollection 时，此元素很有用。
浏览器支持
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| length | 支持 | 支持 | 支持 | 支持 | 支持 |
语法
HTMLCollection.length返回值
数值，表示 HTMLCollection 中元素的数量。
更多实例
示例代码：
循环遍历所有 class="myclass" 的元素，并更改它们的背景颜色：
var x = document.getElementsByClassName("myclass");
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
完整实例：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>HTMLCollection length 属性</h1>
<p>A P element.</p>
<p class="myclass">Another P element.</p>
<p class="myclass">A third P element.</p>
<p>单击按钮为 class="myclass" 的所有元素添加背景颜色：</p>
<button onclick="myFunction()">设置颜色</button>
<script>
function myFunction() {
var x, i;
x = document.getElementsByClassName("myclass");
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
