将HTMLCollection转换为JavaScript数组

9 浏览
0 Comments

将HTMLCollection转换为JavaScript数组

我想获取所有具有"class"为"Box"的HTML元素，并将该集合转换为数组，以便通过位置访问每个元素。

这是我写的代码：

function BoxAppearence() {
    var BoxCollection = document.getElementsByClassName("Box");
    console.log(BoxCollection)
    var Box = Array.from(BoxCollection);
    console.log(Box)
    console.log(Box[12])
}
BoxAppearence();

0

1 答案

0 Comments

将HTMLCollection转换为JavaScript数组的原因是为了能够使用数组的方法和属性对集合进行操作。HTMLCollection是一个类数组对象，它包含了DOM元素的集合，但它没有提供数组的方法，如push、pop、forEach等。因此，如果我们想要对集合进行数组操作，就需要将HTMLCollection转换为JavaScript数组。

解决方法是使用Array.from()方法将HTMLCollection转换为数组。Array.from()方法接受一个可迭代对象，并返回一个新的数组实例。在上面的代码示例中，我们使用了Array.from()方法将BoxCollection转换为BoxArray数组。

以下是示例代码：

function BoxAppearence() {
  var BoxCollection = document.getElementsByClassName("Box");
  var BoxArray = Array.from(BoxCollection);
  console.log("### BoxCollection ###");
  console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection));
  console.log(BoxCollection);
  console.log(BoxCollection[12])
  console.log('\n\n');
  console.log("### BoxArray ###");
  console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray));
  console.log(BoxArray);
  console.log(BoxArray[12]);
}
BoxAppearence();


box1


box2


box3


box4


box5


box6


box7


box8


box9


box10


box11


box12


box13

上述代码中，我们首先使用document.getElementsByClassName()方法获取到class为"Box"的元素集合，然后使用Array.from()方法将其转换为数组BoxArray。最后，我们通过console.log()方法打印了BoxCollection和BoxArray，并使用索引访问了其中的元素。

通过这种方式，我们可以使用数组的方法和属性对集合进行操作，实现了HTMLCollection到JavaScript数组的转换。

0