素のJavaScriptでちょっとしたDOM操作をしようとしたところ、ハマった件について書きます。
HTML内のリンク要素をクリックしたときにとあるイベントが発火するよう、JavaScriptで全a要素に対して動的にsetAttributeをかけようとしたときのことです(この方法が良い悪いはおいておきます)。
最初、下記のように、for..in文を使って、getElementsByTagNameで取得したelementsの中の要素全てにアクセスしようとしていました。
var links = document.getElementsByTagName("a");
for( var i in links ){
links[i].setAttribute(略);
}
しかしこれをChromeなどで実行すると、一見処理は実行されているように見えても、setAttributeの行でエラーが出ます。なんかnodeではないobjectに対してsetAttributeしちゃってるかのようなエラーが出ます。
どうやら、getElementsByTagNameで返されるのは、単純なnodeの配列ではなく、HTMLCollectionというオブジェクトであり、動的なもののため、for..inやforEachは使えないんだそうな。
おとなしく、下のようにすれば良いらしい。
var links = document.getElementsByTagName("a");
for( var i = 0; i < links.length; i++ ){
links[i].setAttribute(略);
}
これだとエラーは出ません。
他の方法として、配列に変更してしまう方法などがあります。
HTMLCollectionで配列メソッドを使う