使用javascript将htmlcollection转换为数组

y3bcpkx1  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(507)

我想用类“box”获取所有html元素,然后该集合将其转换为数组,这样我就可以通过位置访问每个元素。
这是我写的代码:

  1. function BoxAppearence() {
  2. var BoxCollection = document.getElementsByClassName("Box");
  3. console.log(BoxCollection)
  4. var Box = BoxCollection.split("");
  5. console.log(Box)
  6. console.log(Box[12])
  7. }
  8. BoxAppearence();
0sgqnhkj

0sgqnhkj1#

如注解中所述,您可以使用 Array.from() .
无论如何,如果将集合转换为数组的唯一原因是能够通过其索引/位置访问元素,如下面的代码段所示,那么也可以使用html集合(尽管实际上使用的是对象“键”而不是索引)。

  1. function BoxAppearence() {
  2. var BoxCollection = document.getElementsByClassName("Box");
  3. var BoxArray = Array.from(BoxCollection);
  4. console.log("### BoxCollection ###");
  5. console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection));
  6. console.log(BoxCollection);
  7. console.log(BoxCollection[12])
  8. console.log('\n\n');
  9. console.log("### BoxArray ###");
  10. console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray));
  11. console.log(BoxArray);
  12. console.log(BoxArray[12]);
  13. }
  14. BoxAppearence();
  1. <div class="Box">box1</div>
  2. <div class="Box">box2</div>
  3. <div class="Box">box3</div>
  4. <div class="Box">box4</div>
  5. <div class="Box">box5</div>
  6. <div class="Box">box6</div>
  7. <div class="Box">box7</div>
  8. <div class="Box">box8</div>
  9. <div class="Box">box9</div>
  10. <div class="Box">box10</div>
  11. <div class="Box">box11</div>
  12. <div class="Box">box12</div>
  13. <div class="Box">box13</div>
展开查看全部

相关问题