如何让HTMLCollection不再是实时集合？

嘿，这个问题问得特别实用！DOM里像getElementsByTagName返回的HTMLCollection这种实时集合，会自动跟DOM的变化同步，确实有时候会打乱我们的逻辑。要让它变成静态的、不会随DOM更新的集合，有几个简单靠谱的办法：

• 用ES6的Array.from()方法：这是最直观的方式，直接把类数组的实时集合转换成真正的数组，一旦转换完成，这个数组就完全是DOM元素的静态快照了。

  var cells = Array.from(someTable.getElementsByTagName('td'));
  

  之后不管你给表格加多少新的<td>，cells的长度和内容都不会有任何变化。

• 用扩展运算符...：同样是ES6的语法，写法更简洁，原理和Array.from()一致，把实时集合里的元素一次性提取出来放到新数组中。

  var cells = [...someTable.getElementsByTagName('td')];
  

• ES5兼容写法：Array.prototype.slice.call()：如果你的项目需要兼容ES5及更早的环境，这个方法就派上用场了。slice方法会返回一个包含原集合所有元素的新数组，完全脱离实时绑定。

  var cells = Array.prototype.slice.call(someTable.getElementsByTagName('td'));
  

本质上来说，这几种方法都是把实时集合中的元素一次性拷贝到一个独立的数组里，切断了和DOM的实时关联，这样你拿到的就是一个固定不变的静态集合啦。

内容的提问来源于stack exchange，提问作者asdjfiasd