JS .children返回一个对象,想要一个数组(ES6)

Question

根据其w3schools页面(我知道每个人最喜欢的资源),该.children物业返回

一个实时HTMLCollection对象,表示元素节点的集合

这个对象可以循环,好像它是一个像这样的数组:

var elements = document.getElementById('test').children;

for (var i=0; i < elements.length; i++) {
  console.log(elements[i]);
}

<div id="test">
  <p>paragraph 1</p>
  
  <p>paragraph 2</p>
  
  <p>paragraph 3</p>
</div>

但是,尝试使用该.map函数会引发错误:

var elements = document.getElementById('test').children;

var x = elements.map((element, index) => {
  console.log(element);
});

<div id="test">
  <p>paragraph 1</p>

  <p>paragraph 2</p>

  <p>paragraph 3</p>
</div>

有没有更好的方法来获取子DOM元素数组,或者我是否必须遍历该对象并手动创建一个数组才能使用数组方法,如.map()？注意,我不想使用jQuery.提前致谢.

Answer 1

.map期待一个数组.您需要将此类数组对象(HTMLCollection)转换为实数数组.有几种方法,但我最喜欢的是ES6传播,而阵列来自.

Array.from(document.getElementById('test').children).map

或传播

[...document.getElementById('test').children].map

如果您不想使用ES6,可以切片并强制进行数组转换,或者[].slice.call(document.getElementById('test').children)我相信也会进行转换.

帕特里克在评论中说:[] .slice.call,而不是[] .call.可能还想提到更多罗嗦的Array.prototype.slice.call,因为它没有初始化一个未使用的空数组

这里的关键是HTMLCollection是一个对象,其中map是一个Array函数.