前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >xxx.forEach is not a function(DOM集合--类数组对象转化为数组)

xxx.forEach is not a function(DOM集合--类数组对象转化为数组)

作者头像
Rattenking
发布2021-01-29 16:05:38
2.4K0
发布2021-01-29 16:05:38
举报
文章被收录于专栏:Rattenking

1,错误:Uncaught TypeError: hdList.forEach is not a function

2,错误的原因

原生js获取的DOM集合是一个类数组对象,所以不能直接利用数组的方法(例如:forEach,map等),需要进行转换为数组后,才能用数组的方法!

3,6种解决办法(假如hdList是一个DOM集合)

(1),Array.from()方法

代码语言:javascript
复制
//将hdList用Array.from()方法转换为数组,并用list变量接收
let list = Array.from(hdList);

(2),用Array.prototype.slice.call(elems)方法转化为数组

代码语言:javascript
复制
//hdList转化为数组并用list变量接收
let list = Array.prototype.slice.call(hdList);
//添加点击事件
list.forEach((current,index) => {
	current.addEventListener('click',() => {
		animationFn(index);
	},false);
});

(3),用[ ...elems ]方法转化为数组

代码语言:javascript
复制
let list = [...hdList];//用[ ...elems ]方法转化为数组并用list接收
//添加点击事件
list.forEach((current,index) => {
	current.addEventListener('click',() => {
		animationFn(index);
	},false);
});

(4),用Array.prototype.forEach.call(elem,callback)方法

代码语言:javascript
复制
//直接对hdList集合进行循环或者map等
Array.prototype.forEach.call(hdList,function(){
//...
})
Array.prototype.map.call(hdList,function(){
//...
})

(5),用Array.prototype.forEach.apply(elem,[callback])方法

代码语言:javascript
复制
//添加点击事件
Array.prototype.forEach.apply(hdList,[(current,index) => {
	current.addEventListener('click',() => {
		animationFn(index);
	},false);
}]);

(6),用bind方法

代码语言:javascript
复制
//添加点击事件
Array.prototype.forEach.bind(hdList)((current,index) => {
	current.addEventListener('click',() => {
		animationFn(index);
	},false);
});

参考:

JavaScript中的apply()方法和call()方法使用介绍

http://www.jb51.net/article/30883.htm

1-DOM中-类数组对象遍历(转换)为数组

http://blog.csdn.net/bug_money/article/details/53148678

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/09/29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档