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

在使用原生方法或者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.callArray.prototype.map.call(nodeList,i=>console.log(i))// 4、for offor(let i of nodeList){console.log(i)}// 5、 Object.valuesObject.values(nodeList).map(i=>console.log(i))//打印出来都为 dom 元素

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

Vue + Element UI——监听DOM元素高度和宽度解决方案整理（八种方法）
问题描述监听DOM元素大小的变化,在前端开发中,算是一个比较常见的需求,比如我们要制作可伸缩的图表的时候,可能需要根据DOM大小的变化,进行动态的更新图表. 解决方案方法一: 监听window变化 ...
获取DOM元素方法小结
在开发中不可避免的需要操作DOM,现在就来总结一下原生的获取DOM的API. getElementById() 该方法是最常用的通过元素的id属性来获取DOM元素的API,返回一个DOM元素. < ...
在指定的查找范围内获取DOM元素
在指定的查找范围内获取DOM元素 (1)功能描述定义两个全局变量,其$objTmp0通过$(expression,[context])方法获取DOM元素div0,另外一个变量$objTmp1通过$( ...
vue获取dom元素注意问题
mounted(){setTimeout(()=>{this.contentToggle();},1000)},methods:{contentToggle(){console.log(this ...
vue如何获取div的宽度_vue获取dom元素高度的方法
获取DOM高度: 要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作(参照生命周期钩子mounted语法:https://cn.vuejs.org/v2/api/#mo ...
Vue3--ref使用（解决ref无法获取dom元素的问题）
众所周知在vue2中,ref主要的作用还是便于快速的获取dom元素或组件,因为ref操作相比document.getElementbyId会减少dom操作的节点消耗. 具体关于vue2中ref和$re ...
Vue.js实例学习：获取DOM元素
一.获取DOM元素在Vue中获取DOM元素,我们可以用ref. 用法(和React一样): (1)在组件的DOM部分,任意标签中写上:ref="xxx" (2)通过组件对象 t ...
vue 获取dom子元素_vue获取dom元素注意事项
mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...
vue获取dom元素的几种方式
在任意标签上:ref="xx" 获取dom元素:this.$refs.xx. 如图: mounted()时才能获取this.$refs.xx 获取dom标签:this.$refs. ...

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

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

2、常用的几种遍历方法

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

最新文章

热门文章