获取DOM元素后，对NodeList的遍历的几种方法

最新推荐文章于 2023-02-08 15:23:40 发布

CAICANY

最新推荐文章于 2023-02-08 15:23:40 发布

阅读量7.4k

点赞数 2

分类专栏： javascript 文章标签： javascript dom html

本文链接：https://blog.csdn.net/chenlincc/article/details/107531420

版权

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文解析了NodeList对象与数组之间的差异，强调NodeList并非真正的数组，仅具备部分数组特性。同时，提供了五种有效遍历NodeList的方法，包括for循环、forEach、Array.prototype.map.call、for...of以及Object.values结合map，帮助开发者更好地操作DOM元素集合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用原生方法或者jquery方法获取DOM元素后，想像正常使用数组的方法对其遍历时，发现一些数组的遍历方法使用不了，如map ，push ， pop等方法。使用后报错：.map is not a function

1、NodeList 对象在某些方面和数组非常相似，看上去可以直接使用从 Array.prototype 上继承的方法。然而，除了 forEach 方法，NodeList 没有这些类似数组的方法。通过一下方法判断NodeList 不是数组。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
	 <li>1</li>
	 <li>2</li>
	 <li>3</li>
	 <li>4</li>
</body>
</html>
<script>
const nodeList= document.querySelectorAll('li');

console.log(nodeList instanceof Object) // true 
console.log(nodeList instanceof Array) // false
console.log(Array.isArray(nodeList)) // false

//JavaScript 的继承机制是基于原型的,数组元素之所以有一些数组方法（比如 map和 push ），是因为它的原型链上有这些方法.
//通过下面的方法:
let rest = Object.getPrototypeOf(nodeList) //获取nodeList的原型
while(rest !== null ){
	console.log(rest)
	rest = Object.getPrototypeOf(rest)
}

console.log(rest)
</script>
//---------------------------------------------

可以得到 nodeList 的原型链是这样的：
nodeList–> NodeList.prototype --> Object.prototype --> null

而数组为：
myArray --> Array.prototype --> Object.prototype --> null

可以得出NodeList不是一个数组，而是一个类数组

2、常用的几种遍历方法

// 1、for 
	for(let i = 0;i<nodeList.length;i++){
		console.log(nodeList[i])
	}

// 2、forEach  
	nodeList.forEach(i=>console.log(i))

// 3、Array.prototype.map.call
	Array.prototype.map.call(nodeList,i=>console.log(i))

// 4、for of
	for(let i of nodeList){console.log(i)}
	
// 5、 Object.values
	Object.values(nodeList).map(i=>console.log(i))

//打印出来都为 dom 元素