7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScriptのfor..in文でDOM操作しようとしてハマった件

Last updated at Posted at 2018-01-22

素の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で配列メソッドを使う

7
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?