DOM HTMLCollection
JavaScript基础 2022-05-13 16:49:07小码哥的IT人生shichen
DOM HTMLCollection
HTMLCollection 对象
HTMLCollection 对象是 HTML 元素的类似数组的列表。
诸如 getElementsByTagName() 之类的方法会返回 HTMLCollection。
属性和方法
可以在 HTMLCollection 对象上使用以下属性和方法：
| 属性 / 方法 | 描述 |
|---|---|
| item() | 返回 HTMLCollection 中指定索引处的元素。 |
| length | 返回 HTMLCollection 中的元素数。 |
| namedItem() | 返回 HTMLCollection 中有指定 ID 或名称的元素。 |
实例
示例代码：
获取 HTMLCollection：
var x = document.getElementsByTagName("P");
// 返回文档中所有 P 元素的集合
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>HTMLCollection 对象</h1>
<p>使用 getElementsByTagName() 方法来返回 HTMLCollection：</p>
<script>
var x = document.getElementsByTagName("P");
document.write(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
输出文档中 <p> 元素的数量：
var x = document.getElementsByTagName("P");
document.write(x.length);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>HTMLCollection 对象</h1>
<p>使用 getElementsByTagName() 方法来返回 HTMLCollection。</p>
<p>此页面上 P 元素的数量：</p>
<script>
var x = document.getElementsByTagName("P");
document.write(x.length);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
循环遍历 HTMLCollection 中的每个元素：
x = document.getElementsByTagName("*");
l = x.length;
for (i = 0; i < l; i++) {
document.write(x[i].tagName + "<br>");
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>HTMLCollection 对象</h1>
<p>循环遍历此页面上的每个 HTML 元素，并输出其标记名称：</p>
<script>
var x, i, l;
x = document.getElementsByTagName("*");
l = x.length;
for (i = 0; i < l; i++) {
document.write(x[i].tagName + "<br>");
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
