javascript - 如何将 HTML 集合转换为数组，该数组根据 DOM 进行更新

Question

我正在通过 JS 动态创建 DOM 元素，并试图在创建它们后将它们注销。然后我想将它们转换为数组。

但是在尝试时，当我将 DOM 记录为 HTML 集合时，它会显示一个非空集合，但是当我使用不同的方法将它转换为数组时，它会显示一个空数组。

这是我的代码：

console.log('Collection ', elements.selectButtons);
console.log('Collection Length ', elements.selectButtons.length);
console.log('Object values ', Object.values(elements.selectButtons));
console.log('Object entries ', Object.entries(elements.selectButtons));
console.log('Object keys ', Object.keys(elements.selectButtons));
console.log('Array Converting ', [...elements.selectButtons]);
console.log('JSON Stringify', JSON.stringify(elements.selectButtons));
console.log('Collection', elements.selectButtons);

这是输出：

有人可以告诉，如何将动态更新的 HTML 集合转换为非空数组。

Answer 1

这看起来像一个时间问题。

console.logs 在记录“活动”对象时会自动更新。例如

let nestedArr = {arr: []};
console.log(nestedArr); // {arr: [5]}
nestedArr.arr.push(5);

但这不适用于原语或临时对象：

let nestedArr = {arr: []};
console.log(nestedArr.arr.length); // 0
console.log([...nestedArr.arr]); // []
nestedArr.arr.push(5);

用您的示例进行演示：

let parent = document.querySelector('#parent');
let children = parent.children;
let addChild = () => parent.append(document.createElement('span'));

console.log('children ', children);
console.log('children length ', children.length);
console.log('Object values ', Object.values(children));
console.log('Object entries ', Object.entries(children));
console.log('Object keys ', Object.keys(children));
console.log('Array  ', [...children]);
console.log('JSON stringify', JSON.stringify(children));
console.log('children', children);

addChild();
addChild();
addChild();
addChild();
addChild();

<div id="parent"></div>

当然，这是浏览器控制台的一项功能，并不是所有浏览器和 cli 的行为都相同。上面的示例在 chrome 中工作，因此请确保在运行时打开浏览器控制台。