本文解决的问题是 :运用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. Md5的加密 java实现

    百度百科对MD5的说明是: Message Digest Algorithm MD5(中文名为消息摘要算法第 五版)为计算机安全领域广泛使用的一种散列函数,用以提供消息的完整性保护. MD5即Mess ...

  2. Angularjs跳转切换至对应选项卡

    //跳转前页面 <div class="list user_order" ng-click="userOpen('userOrder',0)"> & ...

  3. 【附答案】Java 大数据方向面试题,你会几个?

    1.Collection 和 Collections的区别.   Collections是个java.util下的类,它包含有各种有关集合操作的静态方法.   Collection是个java.uti ...

  4. Unity Shader入门精要读书笔记(一)序章

    本系列的博文是笔者读<Unity Shader入门精要>的读书笔记,这本书的章节框架是: 第一章:着手准备. 第二章:GPU流水线. 第三章:Shader基本语法. 第四章:Shader数 ...

  5. opencc 繁体简体互转 (C++示例)

         繁体字通常采用BIG5编码,简体字通常采用GBK或者GB18030编码,这种情况下,直接使用iconv(linux下有对应的命令,也有对应的C API供编程调用)就行.对于默认采用utf-8 ...

  6. Github上比较流行的PHP扩展库项目

    这里列出比较常用的PHP开源扩展库项目: swoole, C扩展实现的PHP异步并行网络通信框架,可以重新定义PHP.过去PHP只能做Web项目,现在有了Swoole.任意服务器端程序都可以用PHP来 ...

  7. C/C++ 知识点---设计模式

    在软件工程中,设计模式用来描述在各种不同情况下,要怎么解决问题的一种方案.面向对象设计模式通常以类或对象来描述其中的关系和相互作用,是软件“设计”层次上的问题.使用设计模式可提高代码的重用性和可靠性, ...

  8. 剑指OFFER——调整数组顺序使奇数位于偶数前面

    输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 剑指offer书里的版本, ...

  9. mysql日期函数 当前日期 curdate() , 当前年 year(curdate()), 取date的年份 year(date) ,取date的月份 month(date)

    获取系统当前日期时间: sysdate() 获取系统当前日期:curdate() 获取系统当前时间:curtime() 获取给定日期的年份: year(date) 获取给定日期的月份:month(da ...

  10. java protected修饰符理解

    Protected类型可以在本包和子类中访问的含义.在本包中访问,顾名思义,可以在定义类的包中的任何地方申请一个包含protected修饰符的域和方法的类的对象,并通过这个对象访问被protected ...