javascriptのfor-in文でハマる

for-in文とnodeList

最近java書いてて拡張for文と同じノリでjavascriptのfor-in文使ったらハマったのでメモ。
言いたいことは

に書いてある通りなんだけど、for-in文は配列の反復処理をするんじゃなくて、オブジェクトの反復処理を行うということ。

そもそもquerySelectorAllやgetElementsByTagName等で取得するのは配列じゃなくてnodeList。

にも同じことが書いてある。

結論としては、参考にさせてもらったブログでも言ってるけど、素直にfor文で回すのが吉。

サンプルを書くまでもないけどとりあえず。

<html>
<head> 
<title>for-in and nodeList</title> 
</head>
<body>
<ul id="oreimo">
<li>ラブリー</li>
<li>マイエンジェル</li>
<li>あやせたん</li>
</ul>
<script type="text/javascript">
(function(){
 var li = document.getElementsByTagName('li');
 for(var i=0; i < li.length; i++){
 alert(li[i].innerHTML);
 }
 })();
</script>
</body>
</html>

ちなみにレファレンスには配列に対して反復するときには、伝統的なforループ使えってちゃんと書いてある(はじめに読め)