Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

HTMLCollection 也应该是 Iterator

  在 Web 前端中最常见的拟数组无非就是 HTMLCollection 和 NodeList,但是目前规范中并没有直接用 ES6 的 Iterator 概念来定义它,而实际上这些拟数组非常适合使用 Iterator 来实现。目前 Firefox 自己已经支持了这种实现方式,我觉得这个特性将来很可能被规范吸收。
  下面这个代码 Firefox 是原生支持的: <script> onload = () => { for(var element of document.getElementsByTagName('*')) { console.log(element); } }; </script>   这样遍历 DOM 元素显然比传统的 for 循环要方便许多。但是这个代码在 Chrome 46 上会抛出异常 Uncaught TypeError: document.getElementsByTagName is not a function   Chrome 的这个错误提示信息本身就是错误的,document.getElementsByTagName 显然是一个函数,这里抛出异常的原因实际上是 HTMLCollection 的原型上没有定义 Symbol.iterator。我们只要为其定义一个 Symbol.iterator 就不会再抛出异常了。但 Chrome 46 还没有原生支持 Generator,我们可以从 Array 上把它的 Symbol.iterator 借用过来。比如下面代码就可以在 Chrome 46 上正常工作 <script> HTMLCollection.prototype[Symbol.iterator] = [][Symbol.iterator]; onload = () => { for(var element of document.getElementsByTagName('*')) { console.log(element); } }; </script>   最后还要注意 querySelectorAll 的结果是 NodeList 而不是 HTMLCollection,所以对 NodeList 可能也要做一次这样的处理。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^