JavaScript中的增强for遍历Dom对象出现undefined

服务内部处理异常

已于 2022-12-15 10:51:14 修改

阅读量296

点赞数 1

文章标签： javascript java html

于 2022-12-15 10:14:04 首次发布

原文链接：https://blog.csdn.net/qq_44729429/article/details/121748229

版权

Html代码如下：

<!DOCTYPE html>
<html>
 
<head>
    <title>01节点访问.html</title>
    <script type="text/javascript">
    </script>
</head>
 
<body>
    <ul id="langue">
        <li>hello</li>
        <li>java</li>
        <li>android</li>
    </ul>
    <script type="text/javascript">
      var arr = document.getElementsByTagName("li");
      for (var i in arr) {
          console.info( i, arr[i] );
      }
      for ( var i = 0; i < arr.length; i++ ) {
          console.info( arr[ i ] );
      }
    </script>
</body>
</html>

    输出：


        0

        hello

        1
        java

        2
        android

        length 3
        item function item() { [native code] }
        namedItem function namedItem() { [native code] }这里是引用

原因是因为：

    document.getElementsByTagName("li") 获取到的是一个类数组对象NodeList，
    它是一个对象而不是真正的数组， 所以，通过for/in语法遍历也会输出它继承过来的属性和方法
    你可以使用for循环来遍历数组以及类数组对象

优惠劵

服务内部处理异常

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的增强for遍历Dom对象出现undefined

JavaScript中的增强for遍历Dom对象出现undefined
复制链接

扫一扫

JavaScript权威指南(第6版)中文文字版

02-23

内容简介《JavaScript权威指南(第6版)》要讲述的内容涵盖JavaScript语言本身，以及web浏览器所实现的JavaScript API。本书第6版涵盖了 html5 和 ecmascript 5，很多章节完全重写，增加了当今 web 开发的最佳实践的内容，新增的章节包括 jQuery、服务器端 JavaScript、图形编程以及JavaScript式的面向对象。本书不仅适合初学者系统学习，也适合有经验的 JavaScript开发者随手翻阅。《JavaScript权威指南(第6版)》是程序员学习核心JavaScript语言和由WEB浏览器定义的JavaScript API的指南和综合参考手册。《JavaScript权威指南(第6版)》涵盖html5和ecmascript 5。很多章节完全重写，以便与时俱进，紧跟当今的最佳web开发实践。本书新增章节描述了jQuery和服务器端JavaScript。本书适合那些希望学习WEB编程语言的初、中级程序员和希望精通JavaScript的程序员阅读。作者简介作者：(美国)弗兰纳根(David Flanagan) 译者：淘宝前端团队弗兰纳根(David Flanagan)是一名程序员，也是一名作家，他在O’Reilly出版的其他畅销书还包括《JavaScript Pocket Reference》、《The Ruby Programming Language》、以及《Java in a Nutshell》。David毕业于麻省理工学院，获得计算机科学与工程学位。他和妻子和孩子一起生活在西雅图和温哥华之间的美国太平洋西北海岸。目录前言 1 第1章 javascript概述 5 1.1 javascript语言核心 8 1.2 客户端javascript 12 第一部分 javascript 语言核心第2章词法结构 25 2.1 字符集 25 2.2 注释 27 2.3 直接量 27 2.4 标识符和保留字 28 2.5 可选的分号 30 第3章类型、值和变量 32 3.1 数字 34 3.2 文本 38 3.3 布尔值 43 3.4 null和undefined 44 3.5 全局对象 45 3.6 包装对象 46 3.7 不可变的原始值和可变的对象引用 47 .3.8 类型转换 48 3.9 变量声明 55 3.10 变量作用域 56 第4章表达式和运算符 60 4.1 原始表达式 60 4.2 对象和数组的初始化表达式 61 4.3 函数定义表达式 62 4.4 属性访问表达式 63 4.5 调用表达式 64 4.6 对象创建表达式 64 4.7 运算符概述 65 4.8 算术表达式 69 4.9 关系表达式 74 4.10 逻辑表达式 79 4.11 赋值表达式 81 4.12 表达式计算 83 4.13 其他运算符 86 第5章语句 91 5.1 表达式语句 92 5.2 复合语句和空语句 92 5.3 声明语句 94 5.4 条件语句 96 5.5 循环 101 5.6 跳转 106 5.7 其他语句类型 113 5.8 javascript语句小结 116 第6章对象 118 6.1 创建对象 120 6.2 属性的查询和设置 123 6.3 删除属性 127 6.4 检测属性 128 6.5 枚举属性 130 6.6 属性getter和setter 132 6.7 属性的特性 134 6.8 对象的三个属性 138 6.9 序列化对象 141 6.10 对象方法 142 第7章数组 144 7.1 创建数组 144 7.2 数组元素的读和写 145 7.3 稀疏数组 147 7.4 数组长度 148 7.5 数组元素的添加和删除 149 7.6 数组遍历 149 7.7 多维数组 151 7.8 数组方法 152 7.9 ecmascript 5中的数组方法 156 7.10 数组类型 160 7.11 类数组对象 161 7.12 作为数组的字符串 163 第8章函数 165 8.1 函数定义 166 8.2 函数调用 168 8.3 函数的实参和形参 173 8.4 作为值的函数 178 8.5 作为命名空间的函数 181 8.6 闭包 182 8.7 函数属性、方法和构造函数 188 8.8 函数式编程 194 第9章类和模块 201 9.1 类和原型 202 9.2 类和构造函数 203 9.3 javascript中java式的类继承 207 9.4 类的扩充 210 9.5 类和类型 212 9.6 javascript中的面向对象技术 217 9.7 子类 230 9.8 ecmascript 5 中的类 2

v-for循环空数组返回undefined

szbszb1的博客

10-03

4361

本文章采用 1.1版本的vue.js和 2.6版本的vue.js进行解决该问题 1.1版本的vue.js 1.1版本的vue.js不存在v-for循环空数组或空对象返回undefined的问题且该版本的vue.js还可以使用$index,$key HTML代码 <div id="box"> <ul> <li v-for="item in myData">{{item}}{{$index}}</li> </ul>

参与评论您还未登录，请先登录后发表或查看评论

js中使用for...in...遍历对象属性值出现undefined

gjiawan的博客

08-26

1338

for...in... 循环可以遍历对象自身的属性和继承自原型链的属性，前提是该属性是可遍历的，即属性描述对象中enumerable值为true，但是在循环体内，属性值的读取只能使用['k']形式，不能使用.k形式，因为.k形式会被处理为['k'], 这里的k是字符串，当对象没有k属性的时候，返回值就是undefined，如果有k属性，遍历的所有属性值都将是obj.k。将name改为k，观察结果。...

vue的“$index” is undefined错误

OHRadiance的专栏

10-25

2987

vue1.0中获取v-for的index时，通过隐式声明的变量$index。根据最新文档vue已经移除$index。官方文档传送门简单点说，可以这样获取index。v-for="(item, index) in items"

删除当当购物车商品javascript 当当购物车 js实战简易javascript项目 js作业

qq_50896685的博客

12-16

1098

废话不多说，直接上代码。CSS文件：cartStyle.css；js文件：shopping.js；html文件：shopping.html。删除当当购物车的商品，javascript作业

解决循环中的点击事件传item，打印为undefined的问题

weixin_45066790的博客

10-17

379

记录Bug

vue获取dom节点后打印undefined

love_weiai的博客

12-03

1052

mounted挂载之后获取dom节点出现undefined， 1.使用this.$nextTick（），在这个函数方法中调用 2.因为页面使用v-if、v-show、v-for，原因获取不到dom节点，这时候需要在updated函数中调用 updated() { this.$nextTick(function(){ //调用需要执行的方法 }) }, ...

JavaScript笔记

09-28

遍历：for(var i=0;i;i++)--等同Java Array倒转：arr.reverse();用于颠倒数组中元素的顺序 17.Array元素操作： |--arr.push(x);向数组增加1个新元素x（位于数组最后位置） |--arr.splice(开始位置，删除几个[,...

JavaScript 权威指南（第四版）.pdf

10-12

　9.6 JavaScript中的面向对象技术217 　9.7 子类230 　9.8 ECMAScript 5 中的类239 　9.9 模块248 　第10章正则表达式的模式匹配253 　10.1 正则表达式的定义253 　10.2 用于模式匹配的String方法261 　10.3 ...

javascript入门笔记

05-15

2、文档对象模型(Document Object Model) - DOM 允许让 JS 与 HTML 文档打交道 3、浏览器对象模型(Browser Object Model) - BOM 允许让 JS 与浏览器进行交互 JS是一款基于对象的编程语言 2、JS的基础语法 1...

JavaScript权威指南（第6版）

09-20

9.6 JavaScript中的面向对象技术 9.7 子类 9.8 ECMAScript 5 中的类 9.9 模块第10章正则表达式的模式匹配 10.1 正则表达式的定义 10.2 用于模式匹配的String方法 10.3 RegExp对象第11章 JavaScript的子集和扩展 ...

JavaScript八：数组，其中有增强for循环

小枯林的博客

12-28

2070

数组的使用率比较高，与后台交互数据时经常用到数组；数组的创建： // 数组的创建 var arr1 = new Array(); // 创建数组并指定长度 var arr2 = new Array(5); // 创建数组并初始化 var arr3 = new Array(2,5,"dd","d",8); var arr4 = [2,5,"dd","d",8]; // 简写形式 var arr5 = []; 数组的遍历： var arr1 = [2,5,"dd","d",8]; //

增强for 循环

fourous的博客

03-31

496

增强for循环增强for循环的作用：简化迭代器的书写格式（增强for循环的底层还是使用了迭代器遍历）增强for循环的适用范围：如果是实现了Iterable接口的对象或者数组对象都可以使用增强for 循环这里注意：１：增强for 循环底层使用迭代器获取，只不过获取迭代器由jvm完成，不需要获取迭代器，所以使用增强for循环变量元素不准使用集合对象对集合元素个数进行修改． 2. 迭代...

for循环增强

weixin_43055166的博客

11-09

508

增强for循环：增强for循环原理就是迭代原理 JDK1.5之后新增的一个特性高级for循环【for each】格式： for(元素的数据类型变量： Collection集合或者数组){ 操作代码 } 注：在迭代过程中不要对集合元素进行删除和添加操作举例： //这是个Collection集合 Collection coll = new ArrayList<>(); coll.add(“小明”); coll.add(“小刘”); coll.add(“小王”); coll

面试题34：JS中数组有几种循环方法

qq_51066068的博客

05-13

379

js中数组的几种循环方式 for for循环最基本的循环方式，不多说。这种最基本的循环才是速度最快的，效率最高的。 for(var i = 0;i<5;i++){ console.log(i) } 优化：使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显 var arr = [1, 2, 3, 4, 5, 6] var len = arr.length for(var i = 0; i < len; i++) { console.

使用JS打印99乘法表提升逻辑思维增强for循环的运用

weixin_74535649

08-02

2104

【代码】使用JS打印99乘法表提升逻辑思维增强for循环的运用。

js中的for循环--效率提升

mameng1988的博客

07-22

2700

1、常用写法： for(var i=0;i<arr.length;i++){ console.log(arr[i]); } 每次都需要读取一次arr.length,进行判断 2、数组的长度先缓存起来 for(var i=0,len=arr.length;i<len;i++){ console.log(arr[i]); } 变量定义完整，不用再从数组中取...

获取 DOM 元素的几种方式

qq_45729353的博客

06-10

1062

获取 DOM 元素的几种方式 get 方式： getElementById getElementsByTagName getElementsByClassName getElementsByName 返回类型 HTMLCollection[] query 方式： querySelector querySelectorAll 返回类型 NodeList[] 获取 dom 元素的详细介绍：https://ainyi.com/31 获取元素首先用两种方式获取元素 let a = document.getElem

for of 遍历DOM对象

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交