HTMLCollection接口是一个表示HTML文档中元素的集合的类数组对象，它通常用于获取一组元素，例如通过document.getElementsByTagName()或document.getElementsByClassName()方法返回的结果。
以下是一个简单的示例代码，展示了如何使用HTMLCollection接口：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLCollection Example</title>
</head>
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<script>
// 使用 document.getElementsByClassName 获取所有具有 "item" 类的 div 元素
const items = document.getElementsByClassName('item');
// HTMLCollection 是一个类数组对象，可以使用 for 循环进行遍历
for (let i = 0; i < items.length; i++) {
console.log(items[i].textContent); // 输出每个元素的文本内容
}
// 也可以使用 forEach 方法（需要将 HTMLCollection 转换为数组）
Array.from(items).forEach(item => {
console.log(item.textContent); // 输出每个元素的文本内容
});
</script>
</body>
</html>在这个示例中：
1、我们创建了一个简单的HTML页面，其中包含四个具有相同类名item的div元素。
2、使用document.getElementsByClassName('item')方法获取所有这些元素，并将它们存储在变量items中，这个方法返回一个HTMLCollection对象。
3、我们使用for循环遍历这个HTMLCollection对象，并输出每个元素的文本内容。
4、我们还展示了如何将HTMLCollection转换为数组，然后使用forEach方法来遍历和输出每个元素的文本内容。
需要注意的是，HTMLCollection是实时的，这意味着如果DOM结构发生变化，HTMLCollection会自动更新以反映这些变化。