【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
 
 
今回はここまで。
おわり

Posted by しきゆら