关于querySelector 和 document.getElementsByTagName 选中集合问题

2024-05-06 13:25:06

本文解决的问题是 :运用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)

转载于:https://www.cnblogs.com/oxiaojiano/p/7503960.html

关于querySelector 和 document.getElementsByTagName 选中集合问题相关推荐

document.getElementsByTagName()方法的返回值
document.getelementsbytagname()方法的返回值 /* document.getelementsbytagname()方法的返回值中取出某个特定的元素.一开始以为它的返回值是 ...
document.getElementsByTagName()返回值
1. 常见问题 document.getElementsByTagName()返回值样式是[-,-,-],很多人误以为是数组,进而对它调用数组方法如sort(),但是这样会报错:TypeError:x ...
document.getElementsByTagName
MDN: 返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection. 整个文件结构都会被搜索,包括根节点.返回的 HTML集合是动态的, 意味着它可以自动更新自己来保持和 DOM ...
Document对象内容集合
document 文挡对象 - JavaScript脚本语言描述 ------------------------------------------------------------------- ...
document.getElementsByName , document.getElementsByTagName ,document.createElement
document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用.其中,appendChild() 方法在节点的子节 ...
【一句话博客】SyntaxError: Failed to execute ‘querySelector’ on ‘Document’: “xxx” is not a valid selector.
出现了报错 SyntaxError: Failed to execute 'querySelector' on 'Document': "xxx" is not a valid s ...
最全介绍Document对象内容集合
document 文挡对象 - JavaScript脚本语言描述 ----------------------- 注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写否则会提 ...
Web APIs - 总结笔记
Web APIs - 语法 DOM - 文档对象模型 1. 页面获取元素 1.1 获取单个元素 document.querySelector('选择器') document.body // 选中bod ...
Web前端开发面试考点指南
Web 前端面试指南与高频考题解析指南第一章面试准备:简历编写和面试前准备一般来说,跳槽找工作要经历投递简历.准备面试.面试和谈 offer 四个阶段.其中面试题目会因你的等级和职位而异,从入门 ...

最新文章

热门文章