getElementsByClassName的返回对象

一直以为getElementsByClassName返回的是一个数组，日常使用上也经常会直接给结果加一个下标直接提取。某天学习一段代码，原代码使用querySelectorAll获取元素，然后利用forEach命令为每个元素添加了一个点击事件。

page=document.getElementsByClassName('menu-item');
page.forEach(function (o){
     console.log(o.classList);
});

反正是获取数组，想当然的用getElementsByClassName获取结果，结果到forEach这里就报错了。

Uncaught TypeError: page.forEach is not a function

querySelectorAll返回的是一个标准的数组，而getElementsByClassName则是返回一个HTMLCollection，是HTML元素的集合，HTMLCollection对象类似一个包含HTML元素的数组列表。关键人家只是类似。

将结果转为数组

要将结果转为数组，可以使用“Array.from()”命令，它可以将一个类数组对象或者可遍历对象转换成一个真正的数组。

page=document.getElementsByClassName('menu-item');
page=Array.from(page);
page.forEach(function (o){
     console.log(o.classList);
});

当然也可以直接使用querySelectorAll来选择元素，这样就避免了后期的数组转化过程。