【HTML/JS】NodeListはArrayにあらず

2017年9月9日JavaScript

こんにちは、しきゆらです。

今回は、NodeListなどのArrayっぽいオブジェクトの扱いについてメモしておきます。

DOMを扱うとよく現れるNodeListなど、Arrayっぽくあるものがちょくちょくあります。

Arrayに似ているけど、concatとかArrayの便利メソッドは使えません。

このArrayっぽいものをArrayに直す方法です。

// NodeList
var divs = document.querySelectorAll("div");
// HTMLCollection
var ps = document.getElementsByTagName("p");

// Arrayに変換
divs = [].slice.call(divs);
ps = [].slice.call(ps);

[].sliceはどのブラウザでも動くようです。

IEを無視すれば、以下のものでも良さそうです。

divs = Array.from(divs); 
ps = Array.from(ps);

今回のことは、ほとんどMDNに書いてあることでした。

意外と見えていないんだなぁと。

以下のあたりを見ました。

参考

• NodeList – MDN
• HTMLCollection – MDN
• Array.prototype.slice()- MDN
• Array – MDN

今回はここまで。

おわり