JavaScript基础教程（六十七）HTML DOM之集合(Collection)：活着的节点清单，深度剖析JavaScript DOM集合的《鱿鱼游戏》-优快云博客

什么是DOM集合？

当使用getElementsByClassName()、getElementsByTagName()或querySelectorAll()等方法选择元素时，返回的就是一个DOM集合。它不是真正的数组，而是一个"类数组"对象。

集合的动态特性

// 获取所有div元素
const divs = document.getElementsByTagName('div');
console.log(divs.length); // 初始数量

// 添加新div后
const newDiv = document.createElement('div');
document.body.appendChild(newDiv);

console.log(divs.length); // 数量自动更新！

操作DOM集合的实用技巧

// 转换为真实数组的多种方法
const divArray1 = Array.from(divs);
const divArray2 = [...divs];
const divArray3 = Array.prototype.slice.call(divs);

// 遍历集合并添加事件监听
Array.from(divs).forEach(div => {
  div.addEventListener('click', () => {
    console.log('Div被点击了!');
  });
});

// 筛选特定元素
const redDivs = Array.from(divs).filter(div => {
  return div.classList.contains('red');
});

完整示例：动态列表管理

<ul id="myList">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

<button onclick="addItem()">添加项目</button>

<script>
function addItem() {
  const list = document.getElementById('myList');
  const items = list.getElementsByTagName('li');
  const newItem = document.createElement('li');
  
  newItem.textContent = `项目${items.length + 1}`;
  list.appendChild(newItem);
  
  // 实时更新：items.length已自动增加
  console.log(`现在有${items.length}个项目`);
}
</script>

掌握DOM集合的动态特性，能够帮助开发者写出更加高效的前端代码。记住：DOM集合是"活的"，总是反映文档的当前状态，这一特性既是优势也是需要警惕的陷阱。