本文解决的问题是 :运用for..of..循环时,edge浏览器报Object doesn't support property or method 'symbol.iterator'问题 以及 符号迭代器(symbol.interator)是什么类型的问题

在ES6中新加了一种数据类型Symbol,在es5中只有六种基本数据类型(undefined number null boolean string Array)和一种复杂的数据类型(object)

简单了解:symbol的值通过symbol函数生成,symbol类型是保证每个属性的名字都是独一无二的,对于一个对象由多个模块构成的情况非常有用。

在edge浏览器中浏览代码块中含有for ..of..循环的页面时,浏览器会报错Object doesn't support property or method 'symbol.iterator'



因为通过document.querySelectorAll()和document.getElementsByTagName()或者document.getElementsByClassName()选中的元素集合,并不是标准的Array类型,通过() instanceof Array 为false可以判断,

通过在控制台打印的结果可以得到,document.querySelectorAll()得到的object.__proto__为NodeList类型,



此时,需要将Array的symbol.iterator的值赋给Node List的symbol.iterator

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

对应的通过document.getElementsByTagName或者document.getElementsByClassName()得到的object.__proto__为HTMLCollection类型



此时,需要将Array的symbol.iterator的值赋给HTMLCollection的symbol.iterator,

HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

这时就可以在edge浏览器运行了;

文章借鉴了阮一峰大神的(http://es6.ruanyifeng.com/#docs/iterator)

关于querySelector 和 document.getElementsByTagName 选中集合问题的更多相关文章

  1. js 原生 document.querySelectorAll document.getElementsByTagName document.querySelector document.getElementById的区别

    1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组). ...

  2. document.getElementsByTagName

    var elems = document.forms[form_name].getElementsByTagName("INPUT"); getElementsByTagName( ...

  3. document.getElementsByTagName()方法的返回值

    在阅读<JS DOM 编程一书>一书时,看到getElementByTagName函数返回值为数组,然后自己验证了下,发现不是数组,而是一个可遍历的HTMLCollection对象 HTM ...

  4. (转)Document对象内容集合

    原文:http://webcenter.hit.edu.cn/articles/2009/06-10/06144703.htm document 文挡对象 - JavaScript脚本语言描述 ——— ...

  5. 用document.getElementsByTagName()返回的真的是数组吗?

    document.getElementsByTagName()返回的真的是数组吗? 这是这几天开发中遇到的问题. 一个如下的HTML结构: <ul> <li> <li&g ...

  6. Document对象内容集合

    document 文挡对象 - JavaScript脚本语言描述———————————————————————注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写否则会提示你一 ...

  7. document.querySelector()和document.querySelectorAll()

    HTML5向Web API新引入了 document.querySelector()和document.querySelectorAll()两个方法,都可以接收三种类型的参数:id(#),class( ...

  8. document.querySelector()与document.querySelectorAll()

      document.querySelector()与document.querySelectorAll() CreationTime--2018年7月1日10点49分 Author:Marydon ...

  9. 详解JavaScript Document对象

    转自:http://segmentfault.com/a/1190000000660947 在浏览器中,与用户进行数据交换都是通过客户端的javascript代码来实现的,而完成这些交互工作大多数是d ...

随机推荐

  1. 终极锁实战:单JVM锁+分布式锁

    目录 1.前言 2.单JVM锁 3.分布式锁 4.总结 =========正文分割线================= 1.前言 锁就像一把钥匙,需要加锁的代码就像一个房间.出现互斥操作的场景:多人同 ...

  2. java+反射+多线程+生产者消费者模式+读取xml(SAX)入数据库mysql-【费元星Q9715234】

    java+反射+多线程+生产者消费者模式+读取xml(SAX)入数据库mysql-[费元星Q9715234] 说明如下,不懂的问题直接我[费元星Q9715234] 1.反射的意义在于不将xml tag ...

  3. Linux 系统下安装 rz/sz 命令及使用说明

    Linux 系统下安装 rz/sz 命令及使用说明 rz/sz命令,实现将本地的文件上传到服务器或者从服务器上下载文件到本地,但是很多Linux系统初始并没有这两个命令,以下为安装和使用的具体步骤: ...

  4. Redis-事务即简单锁应用

    Redis支持简单的事务, Redis允许一组命令在单一步骤中执行, 事务有两个属性 事务是一个单独的隔离操作, 事务中所有的命令都会序列化, 按照顺序执行. Redis事务是原子性的, 即要么都执行 ...

  5. Python使用openpyxl读写excel文件

    Python使用openpyxl读写excel文件 这是一个第三方库,可以处理xlsx格式的Excel文件.pip install openpyxl安装.如果使用Aanconda,应该自带了. 读取E ...

  6. 关于wordpress后台首页加载ajax.googleapis特别慢的解决办法

    通过审查元素发现,拖慢后台加载速度的主要是两个路径 1.https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js 2.h ...

  7. php并发加锁示例

    在工作项目中,会遇到一些php并发访问去修改一个数据问题,如果这个数据不加锁,就会造成数据的错误.下面我将分析一个财务支付锁的问题.希望对大家有所帮助. 1 没有应用锁机制 1.1 财务支付简化版本代 ...

  8. 一步一步学J2SE-ConcurrentHashMap原理

    ConcurrentHshMap的数据结构是由一个Segment数组和多个HashEntry数组组成,在Segement数组中包含了HashEntry数组.数据结构如下图所示: Segement数组的 ...

  9. Angular企业级开发(10)-Smart Table插件开发

    1.Smart Table内置的分页功能 Smart Table是基于AngularJS模块特性开发出来的一款优秀的表格组件,默认就支持过滤.排序等核心功能.开发者基于它也可以开发插件,满足个性化需求 ...

  10. CentOS 7 服务器配置--安装CentOS 7

    看博客园也有几年的时间了,这是第一次鼓足勇气发一下我自己的博客,不为了别的,只是最近打算学习Linux的服务器配置,就写几篇博文把我学的一点点的记录下来,方便以后自己回顾学习. 今天就先记录下我安装C ...