42896


`document.quetySeletorall`で同じクラス名を持つ要素の集合を受け取ってそれに対してDOM操作を行いたいです。  
しかし、`document.querySelectorAll`はいわば配列もどきみたいな形で結果を受け取るようなので`Top`がDOMノードではないので使えないとエラー出てきます。

配列であればそのまま使えますが、`Top`は配列そのものではない、つまりDOMノードになっていないのでこのままでは利用できずにDOMノードに変換する必要があると聞きます。

Q1 どんな処理をすると`Top`をDOMノードに変換できるのでしょうか？

Q2 この`Top`は配列とはどう違うのでしょうか？

[code]

    var Top = document.querySelectorAll('.top');
    
    document.querySelector('#js').addEventListener('click', function() {
        Array.prototype.forEach.call(Top,function(x){
            x.parentNode.insertBefore(Top, x);
        });
    });
    
[/code]


CC BY-SA 3.0
2018-04-03T05:29:26.270
42890
2018-04-03T15:28:29.043
2018-04-03T15:28:29.043
3068
27774
question
javascript
どうすればdocument.querySelectorAllの結果をノードに変換できますか？


`querySelectorAll()` の戻り値は `NodeList` という型です。

<https://dom.spec.whatwg.org/#interface-parentnode>

> `[NewObject] NodeList querySelectorAll(DOMString selectors);`

<https://dom.spec.whatwg.org/#nodelist>

[code]

    interface NodeList {
      getter Node? item(unsigned long index);
      readonly attribute unsigned long length;
      iterable<Node>;
    };
    
[/code]

おっしゃる通り配列ではありません。`length` プロパティと index getter があるので、配列のように `for`
でループして各要素にアクセスすることができます。

[code]

    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 型
    }
    
[/code]

また、最近のブラウザなら `forEach` もそのまま使えます。

[code]

    document.querySelectorAll('.top').forEach(function(node) {
      ... // node が Node 型
    });
    
[/code]

`Node` ではないので、`NodeList` をそのまま `insertBefore()` の引数にはできません。

もし `'.top'` にマッチする要素が１つだけと決まっているなら、`querySelectorAll('.top')[0]` とするか
`querySelector('.top')` で  
ノードが手に入ります。


CC BY-SA 3.0
2018-04-03T07:49:31.223
42896
2018-04-03T08:22:41.540
2018-04-03T08:22:41.540
3475
3475
42890
answer