javascript - 如何打乱 HTMLCollection

Question

我有一个页面加载由 1000 个元素组成的 HTMLCollection。

我想要实现的是，一旦页面加载，我希望 HTMLCollection 立即被打乱。 (我无法控制如何从服务器接收数据)

我不知道最好的方法来做到这一点。我应该将 HTMLCollection 复制到另一个临时变量中，删除现有 HTMLCollection 中的所有项目(在 DOM 上)，随机播放该临时变量并显示它 - 在这种情况下，如何删除 HTMLCollection 项目？

或者是否可以按原样操作 HTMLCollection 和 DOM - 在这种情况下如何完成？

我会使用以下方法收集 HTML 集合:

let allImageTiles = document.getElementsByClassName('locationImage');

Answer 1

Should I copy the HTMLCollection into another temp variable, remove all items in the existing HTMLCollection (on the DOM), shuffle that temp and display it ...

是的，绝对是。直接对 DOM 进行的每个操作都很繁重，因为它必须立即反射(reflect)到用户看到的内容，或者换句话说:页面必须重新渲染，并且您不想在不必要的情况下频繁地执行此操作。

in which case how does one remove HTMLCollection items?

有ChildNode.remove() 。但是，您也可以将元素附加到树中另一个位置，这会自动将它们从之前的位置删除。