关于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 ...
随机推荐
- 初学 Python(十五)——装饰器
初学 Python(十五)--装饰器 初学 Python,主要整理一些学习到的知识点,这次是生成器. #-*- coding:utf-8 -*- import functools def curren ...
- ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据
摘要:最近在写网站,好不容易弄好了需求又变了,没错企业的门户网站硬要弄成后台管理系统一样,没办法作为小工的我只能默默的改.前台HTML页面需要提交数据到后台处理,又不能用form表单,于是乎研究了1天 ...
- [译] 所有你需要知道的关于完全理解 Node.js 事件循环及其度量
原文地址:All you need to know to really understand the Node.js Event Loop and its Metrics 原文作者:Daniel Kh ...
- 快速排序算法的C语言实现
#include<stdio.h> int partition(int a[],int low,int high) { int key=a[low]; while(low<high) ...
- Java面试容易容易出现的一些考点
考点内容是我个人的一点看法,不代表一定是这些,后面会慢慢继续补充 请写出final.finally.finalize的区别 1.final和finally都是关键字.而finalize是一个方法,是属 ...
- 136. Single Number【LeetCode】异或运算符,算法,java
Given an array of integers, every element appears twice except for one. Find that single one. Note:Y ...
- table之thead兼容
今天遇到一个小bug,是关于table中thead,tbody,tfoot的兼容问题: 在开发的时候为了方便写样式,我就把表格的标题部分关于th的内容放在了thead中,当然了,我也没有写tbody和 ...
- 常见C++面试题及基本知识点总结(一)
[转载请注明出处]:http://www.cnblogs.com/LUO77/p/5771237.html 1. 结构体和共同体的区别. 定义: 结构体struct:把不同类型的数据组合成一个整体, ...
- 绿盟RSAS配置小记
拿到了一个漏扫的虚拟机,可是配置一直上不了网,最后是配置扫描端口网卡,并在主网卡上不做网关配置从而得到解决. 漏扫虚拟机的网络配置是这样一共七块桥接网卡,一块是主网卡,其余六块是扫描口网卡. 主网卡只 ...
- 2017多校第9场 HDU 6170 Two strings DP
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6170 题意:给了2个字符串,其中第2个字符串包含.和*两种特别字符,问第二个字符串能否和第一个匹配. ...