本文解决的问题是 :运用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. ubuntu下helloworld内核模块编译

    1.hello.c #include<linux/init.h> #include<linux/module.h> MODULE_LICENSE("Dual BSD/ ...

  2. 浅谈jQuery Pagination Ajax 分页插件的使用

    插件介绍 此插件是jQuery的ajax分页插件.分页切换时无刷新也无延迟,因为是一次性加载的.如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好! 插件 ...

  3. Java 简单的 socket 编程入门实战

    这个是给女朋友写的:) 首先需要知道我们每个电脑都可以成为server(服务器) 和 client(客户端) 我们需要使用java来实现客户端与服务器的数据传输 先帖上代码 注意这里两张代码处于两个j ...

  4. 【原创】08. easyui form控件,回调参数存在后缀 audio controls="controls" style="display: none;"></audio>

    版本: jQuery EasyUI 1.4.3 springmvc 3.2.6 谷歌浏览器,内核版本 chrome 56.0.2924.87 360急速浏览器,内核版本 chrome 50.0.266 ...

  5. linux下怎么卸载自带的JDK和安装想要的JDK

    linux下怎么卸载自带的JDK和安装想要的JDK   安装linux系统后,系统有自带jdk的版本,因为系统中的有些软件需要使用此环境.但时候我们安装eclipse和tomcat的时候,使用此jdk ...

  6. html+css3实现长方体效果

    网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 h ...

  7. NYOJ--水池数目

    //NYOJ--水池数目 #include<iostream> #include<cstring> }; using namespace std; void dfs(int,i ...

  8. Oracle dba_tablespace_usage_metrics 视图 查看表空间 说明

    一.DBA_TABLESPACE_USAGE_METRICS 视图的理论说明   群里一朋友说使用dba_tablespace_usage_metrics 视图查看表空间的结果不正确,如下:     ...

  9. window/mac系统关机

    window/mac系统关机 #ifdef Q_OS_WIN #include "windows.h" #endif void OnShutDown() { #ifdef Q_OS ...

  10. rtems在mini2440上的移植(ubuntu)

    第一步 建立编译环境,rtems的编译环境需要使用newlib的库,所以ubuntu自带的gcc是不可以的,我是参照下面的博客才编译成功的,之前走了好多弯路. http://blog.sina.com ...