Help us understand the problem. What is going on with this article?

javascriptの「配列ライク」の罠

More than 1 year has passed since last update.

javascriptのドキュメントで登場する「配列ライク」

例えば、「getElementsByClassName」メソッド。
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

与えられたクラス名で得られる要素の配列ライクのオブジェクトを返します。document オブジェクトで呼び出されたときは、ルートノードを含む、完全な文書が検索されます。任意の要素でgetElementsByClassName() を呼び出すこともできます。その場合は、与えられたクラス名を持つ指定されたルート要素下の要素だけが返ります。

なるほど、つまり、配列形式で帰ってくるんだな。確認してみる。

sample.js
 tests = document.getElementsByClassName('test')
 console.log(tests) // [<div class='test'>1</div>,<div class='test'>2</div>,...]

確かに、配列で帰ってる。(ように見える…)

だけど、

sample.js
 tests = document.getElementsByClassName('test')
 tests.forEach(...) // TypeError

とエラーになる。

配列ライクは配列ではない

言われれば当たり前だが、配列ライクは配列ではないのだ。したがって、配列(Array)に対して用意されているメソッド
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
はそのままでは使えない。

対処法

今回はforEachがやりたかったので以下の記事が参考になった。Array.prototype.forEach.call()を使うのが基本的な対処法らしい。

http://ptech.g.hatena.ne.jp/noromanba/20120521/1337639496
http://ism1000ch.hatenablog.com/entry/2014/07/30/024635

yuquitta13
言語はRubyを中心にやってます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした