关于querySelector 和 document.getElementsByTagName 选中集合问题
本文解决的问题是 :运用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 选中集合问题的更多相关文章
- js 原生 document.querySelectorAll document.getElementsByTagName document.querySelector document.getElementById的区别
1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2.querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组). ...
- document.getElementsByTagName
var elems = document.forms[form_name].getElementsByTagName("INPUT"); getElementsByTagName( ...
- document.getElementsByTagName()方法的返回值
在阅读<JS DOM 编程一书>一书时,看到getElementByTagName函数返回值为数组,然后自己验证了下,发现不是数组,而是一个可遍历的HTMLCollection对象 HTM ...
- (转)Document对象内容集合
原文:http://webcenter.hit.edu.cn/articles/2009/06-10/06144703.htm document 文挡对象 - JavaScript脚本语言描述 ——— ...
- 用document.getElementsByTagName()返回的真的是数组吗?
document.getElementsByTagName()返回的真的是数组吗? 这是这几天开发中遇到的问题. 一个如下的HTML结构: <ul> <li> <li&g ...
- Document对象内容集合
document 文挡对象 - JavaScript脚本语言描述———————————————————————注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写否则会提示你一 ...
- document.querySelector()和document.querySelectorAll()
HTML5向Web API新引入了 document.querySelector()和document.querySelectorAll()两个方法,都可以接收三种类型的参数:id(#),class( ...
- document.querySelector()与document.querySelectorAll()
document.querySelector()与document.querySelectorAll() CreationTime--2018年7月1日10点49分 Author:Marydon ...
- 详解JavaScript Document对象
转自:http://segmentfault.com/a/1190000000660947 在浏览器中,与用户进行数据交换都是通过客户端的javascript代码来实现的,而完成这些交互工作大多数是d ...
随机推荐
- Cinnamon桌面是怎么回事儿
(linux mint 18.2 用户截图) Cinnamon的由来 在GNOME 3之前,GNOME是根据传统的桌面比拟(Desktop metaphor)而设计,到了GNOME 3便被GNOME ...
- rabbitmq重装之后无法加入原有cluster的bug解析
背景: 一台controller node,一台compute1节点 两台机器的host文件均已经进行hostname解析 两节点本已经加入了同一rabbitmq cluster 但controlle ...
- springboot启动时报错No session repository could be auto-configured.....
具体异常提示: Error starting ApplicationContext. To display the auto-configuration report re-run your appl ...
- Xamarin.Forms(二) 返回页面的数据刷新
这几天在做一个课程表的小程序,遇到了这样一个问题: app打开便是课程表的页面,如果课程表页面没有数据的话需要跳转到同步课表页面模拟登陆教务管理系统获取课表,并显示在课程表页面,这样就需要从同步课表页 ...
- 自定义Git之搭建Git服务器
在远程仓库一节中,我们讲了远程仓库实际上和本地仓库没啥不同,纯粹为了7x24小时开机并交换大家的修改. GitHub就是一个免费托管开源代码的远程仓库.但是对于某些视源代码如生命的商业公司来说,既不想 ...
- python进阶(3):模块和包
之前两天我们介绍了一些比较常用的模块,而我也说过会讲解什么是模块,今天我们就来分析分析模块和包,模块我们现阶段使用还可以而包的话现阶段我们基本很少会用到包,学的不是很清楚也没关系这些东西都是用的多了也 ...
- 用Python处理实验数据
开篇语 近来忙于考试以及应付专业课,基本很少写简书了.昨晚攻坚了三个学生工作的任务(妈妈的吻.好久没有这么疯狂工作了.还是很爽的哦!) 今天难得清静,虽然上课还是沉浸于完成任务的放纵式玩手机中,但是也 ...
- Python初学时购物车程序练习实例
不多说了,直接上代码: #Author:Lancy Wu product_list=[ ('Iphone',5800), ('Mac Pro',9800), ('Bike', 800), ('Watc ...
- 关于dfs+剪枝第一篇:hdu1010
最近进入了dfs关于剪枝方面的学习,遇到的第一道题就是hdu的1010.一道很基础的剪枝..可我不幸地wa了很多次(待会再解释wa的原因吧QAQ),首先我们来看一下题目. Problem Descri ...
- 解决百度BMR的spark集群开启slaves结点的问题
前言 最近一直忙于和小伙伴倒腾着关于人工智能的比赛,一直都没有时间停下来更新更新我的博客.不过在这一个过程中,遇到了一些问题,我还是记录了下来,等到现在比较空闲了,于是一一整理出来写成博客.希望对于大 ...