質問: document.querySelectorAll('.top'); document.querySelector('#js').addEventListener('click', function() { Array.prototype.forEach.call(Top,function(x){ x.parentNode.insertBefore(Top, x); }); }); ```
回答: `querySelectorAll()` の戻り値は `NodeList` という型です。 > > `[NewObject] NodeList querySelectorAll(DOMString selectors);` > > > ``` interface NodeList { getter Node? item(unsigned long index); readonly attribute unsigned long length; iterable; }; ``` おっしゃる通り配列ではありません。`length` プロパティと index getter があるので、配列のように `for` でループして各要素にアクセスすることができます。 ``` var top = document.querySelectorAll('.top'); for (var i = 0; i < top.length; ++i) { var node = top[i]; // これが Node 型 ... } for (var node of document.querySelectorAll('.top')) { ... // node が Node 型 } ``` また、最近のブラウザなら `forEach` もそのまま使えます。 ``` document.querySelectorAll('.top').forEach(function(node) { ... // node が Node 型 }); ``` `Node` ではないので、`NodeList` をそのまま `insertBefore()` の引数にはできません。 もし `'.top'` にマッチする要素が1つだけと決まっているなら、`querySelectorAll('.top')[0]` とするか `querySelector('.top')` で ノードが手に入ります。