同僚がはまっていました。
私も早合点してはまった事があるので書いておこうと思います。
これは何?
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