HTMLCollection 是 HTML 元素的集合。
HTMLCollection 对象类似一个包含 HTML 元素的数组列表。
getElementsByTagName() 方法返回的就是一个 HTMLCollection 对象。
属性和方法
下表列出了 HTMLCollection 对象中的属性和方法：
| 属性 / 方法 | 描述 |
|---|---|
| item() | 返回 HTMLCollection 中指定索引的元素。 |
| length | 返回 HTMLCollection 中元素的数量。 |
| namedItem() | 返回 HTMLCollection 中指定 ID 或 name 属性的元素。 |
实例
DEMO1：返回所有 p 元素的集合，该集合是一个 HTMLCollection 对象。
var x = document.getElementsByTagName("p");演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(Web176.com)</title>
</head>
<body>
<h1>HTMLCollection 对象</h1>
<p>使用 getElementsByTagName() 方法获取 HTMLCollection 对象:</p>
<script>
var x = document.getElementsByTagName("P");
document.write(x);
</script>
</body>
</html>DEMO2：计算文档中 p 元素的数量。
var x = document.getElementsByTagName("P");
document.write(x.length);演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(Web176.com)</title>
</head>
<body>
<h1>HTMLCollection 对象</h1>
<p>使用 getElementsByTagName() 方法获取 HTMLCollection 对象。</p>
<p>这个页面上 p 元素是数量为：</p>
<script>
var x = document.getElementsByTagName("P");
document.write(x.length);
</script>
</body>
</html>DEMO3：循环输出 HTMLCollection 对象中的所有元素。
var x = document.getElementsByTagName("P");
document.write(x.length);演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(Web176.com)</title>
</head>
<body>
<h1>HTMLCollection 对象</h1>
<p>循环输出这个页面的所有标签：</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>作者：terry，如若转载，请注明出处：https://www.web176.com/javascriptbook/jsdom/3761.html
支付宝 
微信 