Question

我正在处理需要转换为数组的HTMLCollection，以便可以拼接它。目前我正在使用Array.from（）

将Collection转换为数组

var array = Array.from(element.children)

然后我拼接阵列。

array.splice(0, index);

现在我需要将上面提到的元素的innerHTML设置为拼接数组。

element.innerHTML = array.join()

这只返回[object HTMLDivElement] [objectHTMLDivElement]

注意：这需要非常有效，这就是为什么我要避免for循环。原因是Collection将包含大约10000个div

编辑：我尝试使用Array.prototype.splice.call（element.children，arguments）仅接收错误，指出elements.length属性是只读的

Answer 1

在这种情况下，没有办法避免循环。不知何故，你需要遍历你的数组并操纵每个元素的数据，唯一的方法是使用循环。

在您的情况下，由于您为每个元素更改了某些内容而不是从每个元素中获取数据，因此我建议使用map-function。这会创建一个包含您正在寻找的结果的新数组，在您看来，我认为这是最快的方式。

let arraySplice = array.splice(0, index);
arraySplice.map( (element) => {
  // Do something with your element here
  console.log(element);
})

我怀疑，有一个更好的方法来解决你的问题，而不是在有那么多div时操纵每个div的innerHTML。通过API延迟加载和/或查询批次可能对您的情况有所帮助。

Answer 2

你不能完全避免循环。使用Element.outerHTML

＆＃13;

let element = document.getElementById("x");
var array = Array.from(element.children)

array.splice(0, 2);
element.innerHTML = array.map(e => e.outerHTML).join()

＆＃13;

<div id="x">
  <span>span 1</span>
  <span>span 2</span>
  <span>span 3</span>
</div>

＆＃13;

此外，当您尝试删除前几个元素时。你也可以试试

＆＃13;

let elements = document.querySelectorAll("#x > *");
let index = 2;
let i = 0;
while (i < index) {
  elements[i].parentNode.removeChild(elements[i]);
  i++;
}

＆＃13;

<div id="x">
  <span>span 1</span>
  <span>span 2</span>
  <span>span 3</span>
</div>

＆＃13;

如何将DIV的innerHTML分配给DIV数组

2 个答案: