Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.とエラーが出る。

Question

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.とエラーが出る。

quetySeletorallで取得した配列がDOMツリー上のノードでないのでこのエラーが出るらしいのですが、初心者なのでよくわかりません。
https://tridentwebdesign.blog.fc2.com/blog-entry-578.html

おそらくノードとはDOMツリー上の要素などのことを指すのだと思いますが、受け取った配列のクラス要素はこのノードではないのですか？
それならいったい何なのでしょうか？
これをノードかする方法も教えてください。

作成中のソース。最終的にはこのクラスの要素すべてを一番下にもっていきたい

document.querySelector('#js-move-bottom').addEventListener('click', function() {
        var parent = document.querySelectorAll('.serp-wrap');
        var mysite = document.querySelectorAll('.serp--middle');
        parent[0].appendChild(mysite);
    });

おそらくforなどで要素の個数分繰り返すしかないですよね。

Comments

[defghi1977]

> おそらくforなどで要素の個数分繰り返すしかないですよね。 判ってらっしゃるではないですか

Answer 1

たとえばこう

.aqua{background-Color:aqua;}
.lime{background-Color:lime;}
.yellow{background-Color:yellow;}

window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#js-move-bottom').addEventListener('click', function() {
    var parent = document.querySelectorAll('.serp-wrap');
    var mysite = document.querySelectorAll('.serp--middle');
    Array.prototype.forEach.call(mysite,function(x){parent[0].appendChild(x);});
  });
});

<input type="button" id="js-move-bottom" value="test">
<div class="aqua">0
<div class="serp--middle">a</div>
<div class="serp--middle">b</div>
<div class="serp--middle">c</div>
</div>
<div class="serp-wrap lime">1</div>
<div class="serp-wrap yellow">2</div>

移動ではなくコピー

<style>
.aqua{background-Color:aqua;}
.lime{background-Color:lime;}
.yellow{background-Color:yellow;}
</style>
<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#js-move-bottom').addEventListener('click', function() {
    var parent = document.querySelectorAll('.serp-wrap');
    var mysite = document.querySelectorAll('.serp--middle');
    Array.prototype.forEach.call(mysite,function(x){
      Array.prototype.forEach.call(parent,function(y){
        y.appendChild(x.cloneNode(true));
      });
    });
  });
});
</script>
<input type="button" id="js-move-bottom" value="test">
<div class="aqua">0
<div class="serp--middle">a</div>
<div class="serp--middle">b</div>
<div class="serp--middle">c</div>
</div>
<div class="serp-wrap lime">1</div>
<div class="serp-wrap yellow">2</div>

※一部修正

グループごとにbを下げる

<style>
.aqua{background-Color:aqua;}
.lime{background-Color:lime;}
.yellow{background-Color:yellow;}
</style>
<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#js-move-bottom').addEventListener('click', function() {
    var mysite_b = document.querySelectorAll('.serp--middle-b');
    Array.prototype.forEach.call(mysite_b,function(x){
        x.parentNode.appendChild(x);
    });
  });
});
</script>
<input type="button" id="js-move-bottom" value="test">
<div class="aqua">0
<div class="serp--middle-a">a</div>
<div class="serp--middle-b">b1</div>
<div class="serp--middle-b">b2</div>
<div class="serp--middle-c">c</div>
</div>

<div class="lime">1
<div class="serp--middle-b">b1</div>
<div class="serp--middle-a">a</div>
<div class="serp--middle-b">b2</div>
<div class="serp--middle-c">c</div>
</div>

<div class="yellow">2
<div class="serp--middle-a">a</div>
<div class="serp--middle-b">b</div>
<div class="serp--middle-c">c</div>
</div>

Comments

[退会済みユーザー]

ありがとうございます。
難しくて初心者には理解が難しいですね。

また、うまくお伝え出来ず恐縮ですが下記のように並んでいるのでこの各種bのみcと変更したいです。

<div class="aqua">0
<div class="serp--middle">a</div>
<div class="serp--middle">b</div>
<div class="serp--middle">c</div>
</div>

<div class="aqua">0
<div class="serp--middle">a</div>
<div class="serp--middle">b</div>
<div class="serp--middle">c</div>
</div>

<div class="aqua">0
<div class="serp--middle">a</div>
<div class="serp--middle">b</div>
<div class="serp--middle">c</div>
</div>

[yambejp]

ごめんなさい、追記部分「各種bのみcと変更したい」の意味がわかりません
私の提示した移動処理ではなく、コピーすればいいのでしょうか？
一応そのソースは追記しておきました

[退会済みユーザー]

恐縮です。もう少しソースを具体的にしてみました。

// freeNumber
<div class="aqua">0
<div class="serp--middle-a">a</div>
<div class="serp--middle-b">b</div>
<div class="serp--middle-c">c</div>
</div>

<div class="aqua">0
<div class="serp--middle-a">a</div>
<div class="serp--middle-b">b</div>
<div class="serp--middle-c">c</div>
</div>

<div class="aqua">0
<div class="serp--middle-a">a</div>
<div class="serp--middle-b">b</div>
<div class="serp--middle-c">c</div>
</div>

この状態で、真ん中の要素を下にずらすボタンをついかしてそれを押すと三つの塊すべて変更されるようにしたいです。

つまり下記のようになります。
<div class="aqua">0
<div class="serp--middle-a">a</div>
<div class="serp--middle-c">c</div>
<div class="serp--middle-b">b</div>
</div>

<div class="aqua">0
<div class="serp--middle-a">a</div>
<div class="serp--middle-c">c</div>
<div class="serp--middle-b">b</div>
</div>

<div class="aqua">0
<div class="serp--middle-a">a</div>
<div class="serp--middle-c">c</div>
<div class="serp--middle-b">b</div>
</div>

このように真ん中の要素を上や下に自由にいっぺんにずらせるようにしたいです。

[yambejp]

グループごとにbを下に下げる処理でよいのでしょうか？
追記しておきました

[退会済みユーザー]

ありがとうございます。まさにこんな感じです。

Answer 2

document.querySelectorAllメソッドは(HTMLElementとかの)オブジェクトの配列っぽい)NodeListオブジェクトを返します.
一方appendChildメソッドは引数としてNode(HTMLElement)オブジェクトを要求します.

従って, NodeListの中身のHTMLElement群をappendChildしたいのであれば, ループで一つずつHTMLElementを追加して下さい.

---

NOTE:
当初HTMLCollectionとしていましたが, 正しくはNodeListでした.

Comments

[think49]

> document.querySelectorAllメソッドは(HTMLElementオブジェクトの配列っぽい)HTMLCollectionオブジェクトを返します.
querySelectorAll の返り値は「NodeList」になります。
https://dom.spec.whatwg.org/#interface-parentnode

後続質問では、本件と同じ問題ではまっていますね…。
https://teratail.com/questions/119521

[defghi1977]

ご指摘ありがとうございます

[defghi1977]

> 後続質問では、本件と同じ問題ではまっていますね…。
だからjQueryが優れているのか, 優れているからDOMインターフェースへの理解が進まないのか
どしたもんだろ

[think49]

To: defghi1977 さん
釣り方よりも魚を追い求めるタイプなのかもしれません。
https://teratail.com/questions/39089

昔、同じような質問者がいらっしゃって、その方は退会されましたが、同じ匂いを感じます。
彼は釣り方を求めますが、自分が分からないと思えるレベルの釣り方を教えて貰った時には「難しいですね。初心者なのでもっと優しく説明して下さい」と要求をし、高レベルな回答(と彼は思っている)は早々に理解を諦める傾向がありました。
最終的には、他の回答で魚を得れば、そこで妥協して質問を閉じます(彼が本当の意味で心から理解する事はありませんでした)。
理解できないのならもっと基礎的な部分から学習するよう促すべきと考え、何度かそうしましたが、彼は聞く耳持たずでしたので手の打ちようがありませんでした。