首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

DOM 元素循环遍历

(每个dom元素) query 方式 query 方式获取的 dom 元素,可使用==forEach、for-in、for-of、for==循环 forEach、for-of、for 循环的结果无差别...:ele 的下一个同辈节点 previousSibling:ele 的上一个同辈节点 因为 childNodes 包含看不见的空格文本,还有注释等内容,所以使用起来不是太方便 因此,js 又重新引入了元素树的概念...遍历直接子级元素 假设 html 如下,要遍历出 div 中的所有直接子级的元素节点: hello world <em...遍历所有节点 深度优先遍历:当同时有兄弟节点和子节点的时候,总是优先遍历子节点 function getChildren(parent) { // 如果当前节点是元素节点,输出当前元素 parent.nodeType...== null) { // 节点不为空,就一直循环遍历下去;直到为 null,才中断循环 console.log(currNode) } } getChildren(document.body

6K60
您找到你想要的搜索结果了吗?
是的
没有找到

JS常用的循环遍历你会几种?

这是第 100 篇不掺水的原创,想要了解更多,请戳上方蓝色字体:政采云前端团队 关注我们吧~ 本文首发于政采云前端团队博客:JS常用的循环遍历你会几种 https://www.zoo.team/article...特别是 JS,弱类型语言,非常灵活。本文带你了解常用数组遍历、对象遍历的使用,对比以及注意事项。 数组遍历 随着 JS 的不断发展,截至 ES7 规范已经有十多种遍历方法。...for ...of 直接访问的是实际元素,for 遍历数组索引,forEach 回调函数参数更丰富,元素、索引、原数组都可以获取。 for ...of 与 for 如果数组中存在空元素,同样会执行。...some 若某一元素满足条件,返回 true,循环中断。所有元素不满足条件,返回 false。 every 与 some 相反,若有一元素不满足条件,返回 false,循环中断。...常用遍历的终止、性能表格对比 是否可终止 **** break continue return 性能(ms) for 终止 ✅ 跳出本次循环 ✅ ❌ 2.42 forEach ❌ ❌ ❌ 3.12

2.1K20

【Python】元组 tuple ③ ( 元组中 列表类型 元素值可修改 | 元组 while 循环遍历 | 元组 for 循环遍历 )

1、while 循环遍历元组 将 元组 容器 中的数据元素 , 依次逐个取出进行处理的操作 , 称为 元组的遍历 ; 使用 while 循环 遍历 元组容器 : 元素访问方式 : 使用 下标索引 访问...元组中的元素 ; 循环控制 : 循环控制变量 : 用于指示当前循环的 下标索引 ; 循环条件 : 设置为 循环控制变量 ( 下标索引 ) < 列表长度 ; while 循环遍历元组 语法如下 : #...# 处理元素 # 下标索引变量 ( 循环控制变量 ) 自增 1 index += 1 2、代码示例 - 使用 while 循环遍历元组 代码示例 : """ while / for 循环遍历 元组...Jerry 2 . [18, 'Tom', False, 3.1415926] 三、使用 for 循环遍历元组 1、for 循环遍历元组 for 循环 语法 : 在 for 循环中 , 将 数据元素 从...不能进行无限循环 , 其循环次数受 容器 数据个数限制 , 容器中有多少个元素 , 就能循环几次 ; 使用场景 : while 循环可应用于任意场景 ; for 循环 只 适用于 遍历数据容器

22040

前端系列 |原生JS和jQuery循环遍历函数

前言 之前总是不清楚原生JS和jQuery中有哪些循环遍历函数,而且有时候还总是把原生JS方法当成jQuery方法来用,以致于项目总是报错,并且还不知道是什么原因。...原生JS循环遍历函数 1.for() for循环得知道数组的长度才能循环。它比较常用,这里就不多说了。 2.forEach () 不需要知道数组长度,也可以对数组中每一个元素进行操作。...{ return m>2; } console.log(arr.filter(filterNum)); //结果为:[4,6] 7.for(var x in arr/obj) for in 既可以循环遍历数组...,也可以循环遍历对象 (1)遍历数组 var arr = [2,4,6,1]; for(var x in arr){ console.log(x); //数组索引 结果为:0,1,2,3 console.log...jQuery循环遍历函数 1.each() var arr = ["x","y","z"]; $(arr).each(function (index,item) { console.log(index)

6.6K20

riot.js教程【六】循环、HTML元素标签

前文回顾 riot.js教程【五】标签嵌套、命名元素、事件、标签条件 riot.js教程【四】Mixins、HTML内嵌表达式 riot.js教程【三】访问DOM元素、使用jquery、mount...输入参数、riotjs标签的生命周期; riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法; riot.js教程【一】简介; 循环 可以通过each属性来达到标签循环,如下: <todo...,会被重复N次,N等于items数组的元素数量; 当你通过push,slice,splice改变数组数量的时候,DOM元素也会随之变化 上下文 所有被循环元素,都拥有自己的上下文,请看如下代码: <todo...="{ this }"把当前标签的实例传递给todo-item的实例 简单数组循环 循环的数组元素不一定是对象,如下: {...,不推荐使用; riotjs是通过JSON.stringify来判断对象是否有变更,以此来决定是否要更新HTML元素 key属性 你可以在循环标签的时候,使用key属性

3.2K80

【Python】列表 List ⑦ ( 列表遍历 | 使用 while 循环遍历列表 | 使用 for 循环遍历列表 | while 循环 与 for 循环对比 )

一、使用 while 循环遍历列表 1、while 循环遍历列表 将 列表 容器 中的数据元素 , 依次逐个取出进行处理的操作 , 称为 列表的遍历 ; 使用 while 循环 遍历 列表容器 : 元素访问方式...: 使用 下标索引 访问 列表中的元素 ; 循环控制 : 循环控制变量 : 用于指示当前循环的 下标索引 ; 循环条件 : 设置为 循环控制变量 ( 下标索引 ) < 列表长度 ; while 循环遍历列表...[index] # 处理元素 # 下标索引变量 ( 循环控制变量 ) 自增 1 index += 1 2、代码示例 - 使用 while 循环遍历列表 代码示例 : """ while / for...Jack 二、使用 for 循环遍历列表 1、for 循环遍历列表 for 循环 语法 : 在 for 循环中 , 将 数据元素 从 数据容器 中取出来 , 赋值给 临时变量 , 每次循环都对 临时变量..., 容器中有多少个元素 , 就能循环几次 ; 使用场景 : while 循环可应用于任意场景 ; for 循环 只 适用于 遍历数据容器 , 或者 固定循环次数 的循环 ; for 循环使用受限

40820

JS遍历循环方法性能对比:forwhilefor infor ofmapforeachevery

遍历数组性能分析 对数组的遍历大家最常用的就是for循环,ES5的话也可以使用forEach,ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight...for in 注意事项 index索引为字符串型数字,不能直接进行几何运算 遍历顺序有可能不是按照实际数组的内部顺序 for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。...for...in for...in 循环遍历可枚举属性(包括它的原型链上的可枚举属性)。...循环遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性(更接近原型链中对象的属性覆盖原型属性)。...for of不可以遍历普通对象,想要遍历对象的属性,可以用for in循环, 或内建的Object.keys()方法。 for循环与ES5新增的foreach/map 等方法有何区别?

2.8K20

JAVA|循环遍历

1 前言 众所周知循环遍历是一个程序的核心,不管你是什么程序、什么语言编写的程序,基本都离不开循环遍历。所以今天小编就在本文中给大家整理了Java中的循环遍历。...:"+a); } }} 输出结果: 这是for循环:1这是for循环:2这是for循环:3这是for循环:4这是for循环:5 3遍历 相比循环遍历在程序中使用更加频繁。...可遍历的对象也很多,比如字符串、数组等可迭代对象。也是使用关键字for,可以说是for循环的变体。...语法结构为: for (变量声明语句:可迭代对象){ 语句块 } 其中变量声明语句表示声明一个新的局部变量,其类型必须与数组元素的类型相同。...:"+a); } }} 输出结果: 这是遍历数组:1这是遍历数组:2这是遍历数组:3这是遍历数组:4这是遍历数组:5 END 主 编 | 王文星 责 编 |

98830
领券