JS forEach()方法不能用于HTMLCollection NodeList等类似于数组但又不是真正的数组。JS遍历数组，通常是for循环实现，ECMASCRIPT 5为数组增加了forEach()方法，通过这个方法可以轻松遍历数组，需要传入一个回调函数，回调函数第一个参数代表每次读取到的数组元素，第二个参数为可选参数，代表当前元素的索引值。
HTMLCollection NodeList forEach支持实现方法
方法一：以HTMLCollection为例，人为增加一个将类数组对象转成数组的方法。将以下代码放到JS代码最前端。- <script>
- /*
- * JS实现类数组对象调用forEach()方法
- * @author 吴先成 www.wuxiancheng.cn
- */
- HTMLCollection.prototype.toArray=function(){
- return [].slice.call(this);
- };
- document.getElementsByTagName('meta').toArray().forEach(function(e, i){
- console.log(e + '->' + i);
- });
- </script>
- <script>
- /*
- * JS实现类数组对象调用forEach()方法
- * @author 吴先成 www.wuxiancheng.cn
- */
- HTMLCollection.prototype.forEach=function(callback){
- [].slice.call(this).forEach(callback);
- };
- document.getElementsByTagName('meta').forEach(function(e, i){
- console.log(e + '->' + i);
- });
- </script>
- <script>
- /*
- * JS实现类数组对象调用forEach()方法
- * @author 吴先成 www.wuxiancheng.cn
- */
- Array.from(document.getElementsByTagName('meta')).forEach(function(e, i){
- console.log(e + '->' + i);
- });
- </script>
- <script>
- /*
- * JS实现类数组对象数组遍历
- * @author 吴先成 www.wuxiancheng.cn
- */
- for(var element of document.getElementsByTagName('meta')){
- console.log(element);
- }
- </script>
|
|
