LoginSignup
7
7

More than 5 years have passed since last update.

NodeListとは?

Posted at

同僚がはまっていました。
私も早合点してはまった事があるので書いておこうと思います。

これは何?

Nodeの集合です。
lengthなどがあるので配列と早合点しそうになりますが(恥ずかしながらしました)、配列とは異なります。

querySelectorAll()の返値や、Node.childNodesのプロパティとして取得できます。

特徴

  • 静的な場合と動的な場合がある。querySelectorAll()の場合は静的なので、取得後に変化があっても変更されません。しかし、Node.childNodesの場合は動的になります。
  • メソッドとしてforEach()をもっているので反復処理が可能です。(https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach)
  • IEやEdgeでは動作しないメソッドがあるので、要注意です。

*NodeListは静的な場合と動的な場合があるので、ここを理解していないと予期しない問題を発生させると思います。
後は私自身にも言い聞かせますが、配列とは異なります。

参考

NodeList
https://developer.mozilla.org/ja/docs/Web/API/NodeList

IEで NodeList を forEach するとエラーになる問題の対処方
https://qiita.com/snjssk/items/8d179566b023703c0663

7
7
0

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
7