本文解决的问题是 :运用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. 初学 Python(十五)——装饰器

    初学 Python(十五)--装饰器 初学 Python,主要整理一些学习到的知识点,这次是生成器. #-*- coding:utf-8 -*- import functools def curren ...

  2. ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据

    摘要:最近在写网站,好不容易弄好了需求又变了,没错企业的门户网站硬要弄成后台管理系统一样,没办法作为小工的我只能默默的改.前台HTML页面需要提交数据到后台处理,又不能用form表单,于是乎研究了1天 ...

  3. [译] 所有你需要知道的关于完全理解 Node.js 事件循环及其度量

    原文地址:All you need to know to really understand the Node.js Event Loop and its Metrics 原文作者:Daniel Kh ...

  4. 快速排序算法的C语言实现

    #include<stdio.h> int partition(int a[],int low,int high) { int key=a[low]; while(low<high) ...

  5. Java面试容易容易出现的一些考点

    考点内容是我个人的一点看法,不代表一定是这些,后面会慢慢继续补充 请写出final.finally.finalize的区别 1.final和finally都是关键字.而finalize是一个方法,是属 ...

  6. 136. Single Number【LeetCode】异或运算符,算法,java

    Given an array of integers, every element appears twice except for one. Find that single one. Note:Y ...

  7. table之thead兼容

    今天遇到一个小bug,是关于table中thead,tbody,tfoot的兼容问题: 在开发的时候为了方便写样式,我就把表格的标题部分关于th的内容放在了thead中,当然了,我也没有写tbody和 ...

  8. 常见C++面试题及基本知识点总结(一)

    [转载请注明出处]:http://www.cnblogs.com/LUO77/p/5771237.html  1. 结构体和共同体的区别. 定义: 结构体struct:把不同类型的数据组合成一个整体, ...

  9. 绿盟RSAS配置小记

    拿到了一个漏扫的虚拟机,可是配置一直上不了网,最后是配置扫描端口网卡,并在主网卡上不做网关配置从而得到解决. 漏扫虚拟机的网络配置是这样一共七块桥接网卡,一块是主网卡,其余六块是扫描口网卡. 主网卡只 ...

  10. 2017多校第9场 HDU 6170 Two strings DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6170 题意:给了2个字符串,其中第2个字符串包含.和*两种特别字符,问第二个字符串能否和第一个匹配. ...