浅谈for/in与 HTMLCollection
1 理解for/in
for/in只遍历对象的可枚举属性。
同时，数组也是对象，所以for/in可以用来遍历数组。
只是当我们定义的是一个普通数组，即key为数字，此时数组的属性就是数字，因此for/in返回的属性值也就是数字。
想要获得数组中每个元素的值，还需要通过array[key]获得，下面将介绍一种直接获得的方法。
举个例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>array-for-in</title> </head> <body> <script type="text/javascript"> var array = ["tom",'jerry','coco']; for( element in array){ alert(element); //返回 0,1,2 } </script> </body> </html>
2 理解HTMLCellection
HTMLCollection是HTML元素的集合，虽然它也是对象（typeof可以测试），但是集合是没有key-value对的，所以不能使用for/in遍历HTMLCollec。
NodeList同理。
如果强行使用for/in，会返回HTMLCollection长度两倍的undefined（为什么是两倍笔者现在也不知道，有知道的麻烦告知）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTMLColletion</title> </head> <body> <div>test div1</div> <div>test div2</div> <div>test div3</div> <script type="text/javascript"> var divs = document.getElementsByTagName("div"); for(div in divs){ alert(div.innerHTML); } </script> </body> </html>
正确姿势，可遍历到HTMLCollection中的每一个元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTMLColletion</title> </head> <body> <div>test div1</div> <div>test div2</div> <div>test div3</div> <script type="text/javascript"> var divs = document.getElementsByTagName("div"); for(var i=0;i<divs.length;i++){ alert(divs[i].innerHTML); } </script> </body> </html>
3 如何方便遍历数组
使用数组自带的foreach方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>foreach</title> </head> <body> <div>test div1</div> <div>test div2</div> <div>test div3</div> <script type="text/javascript"> var array = ["kerita","john","dorsun"]; array.forEach( function(element, index) { window.alert(element); }); </script> </body> </html>
HTMLCollection利用对象冒充也可以使用这种方法。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTMLColletion</title> </head> <body> <div>test div1</div> <div>test div2</div> <div>test div3</div> <script type="text/javascript"> var divs = document.getElementsByTagName("div"); [].forEach.call(divs,function(element){ alert(element.innerHTML); }); </script> </body> </html>
