ドムツリーのノードになっていないと出てしまいます。

Question

https://teratail.com/questions/119471?whotofollow=
の続き

var rivalTop = document.querySelectorAll('.serp--top');
        var mysite = document.querySelectorAll('.serp--middle');
        var rivalBottom = document.querySelectorAll('.serp--bottom');

        document.querySelector('#js-move-top').addEventListener('click', function() {

            Array.prototype.forEach.call(rivalTop,function(x){

                x.parentNode.insertBefore(rivalTop, x);

                mysite[0].style.paddingTop = '2rem';
                rivalBottom[0].style.paddingTop = '2rem';
            });

としたのですが、今度もやはりドムツリーのノードになっていないと出てしまいます。

https://app.codegrid.net/entry/es5-array-1
こちらを見るとfor分で回数分繰り返して処理を行うことと同じことをしていて繰り返し回数数を指定しなくてもそれができるのかなと思ったのですがそれでよいでしょうか？

また、ここに指定してやるだけでノードに代わるのではないでしょうか？

Answer 1

parentNode.insertBefore(newNode, referenceNode);

Node.insertBefore - Web API インターフェイス | MDN

　
とあり、要求される引数はNodeですが、

x.parentNode.insertBefore(rivalTop, x);

このrivalTopにはNodeListが入っていると思われます。

Comments

[退会済みユーザー]

x.parentNode.insertBefore(rivalTop, x);で問題ないということでしょうか？

それでは初めに示したソースであっているということでしょうか？

[退会済みユーザー]

Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'というエラーが出るので配列もどきのクラスがノードになっていないと思ったのですがこのエラーはべつのいみなのですか？

[Lhankor_Mhy]

> それでは初めに示したソースであっているということでしょうか？
あっていない、ということです。

> 'Node'というエラーが出るので配列もどきのクラスがノードになっていないと思った
はい、そのように回答に書いたつもりです。繰り返しになりますが、要求される引数はNodeですが、渡しているものはNodeListです。xはNodeですが、rivalTopはNodeではありません。

Answer 2

ちゃんと把握してませんがこんな感じ？

x.parentNode.insertBefore(x,x.parentNode.firstElementChild);

それとstyleをいじるくらいなら最初からcssで指定はできないのでしょうか？

sample

念の為sampleつけときます

<style>
.aqua{background-Color:aqua;}
.lime{background-Color:lime;}
.yellow{background-Color:yellow;}
</style>
<script>
window.addEventListener('DOMContentLoaded', function(e){
  var rivalTop =document.querySelectorAll('.serp--top');
  var rivalBottom = document.querySelectorAll('.serp--bottom');
  document.querySelector('#js-move-top').addEventListener('click', function() {
    Array.prototype.forEach.call(rivalTop,function(x){
      x.parentNode.insertBefore(x,x.parentNode.firstElementChild);
    });
  });
  document.querySelector('#js-move-bottom').addEventListener('click', function() {
    Array.prototype.forEach.call(rivalBottom,function(x){
      x.parentNode.appendChild(x);
    });
  });
});
</script>

<input type="button" id="js-move-top" value="move top">
<input type="button" id="js-move-bottom" value="move bottom">
<div class="aqua">
<div class="serp--top">top</div>
<div class="serp--middle">middle</div>
<div class="serp--bottom">bottom</div>
</div>
<div class="lime">
<div class="serp--middle">middle</div>
<div class="serp--bottom">bottom</div>
<div class="serp--top">top</div>
</div>
<div class="yellow">
<div class="serp--middle">middle</div>
<div class="serp--top">top</div>
<div class="serp--bottom">bottom</div>
<div class="serp--top">top</div>
<div class="serp--bottom">bottom</div>
<div class="serp--middle">middle</div>
</div>

Comments

[退会済みユーザー]

ありがとうございます。

(function() {

var rivalTop = document.querySelectorAll('.serp--top');
var mysite = document.querySelectorAll('.serp--middle');
var rivalBottom = document.querySelectorAll('.serp--bottom');

document.querySelector('#js-move-top').addEventListener('click', function() {

Array.prototype.forEach.call(rivalTop,function(x){

x.parentNode.insertBefore(x,x.parentNode.firstElementChild);

mysite[0].style.paddingTop = '2rem';
rivalBottom[0].style.paddingTop = '2rem';
});

});
でいいのでしょうか？

[退会済みユーザー]

Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'というエラーが出るので配列もどきのクラスがノードになっていないと思ったのですがこのエラーはべつのいみなのですか？

[yambejp]

sampleを参考にしてください

[退会済みユーザー]

ありがとうございます。エラーは出なくなったのですが動きません。

(function() {

var rivalTop = document.querySelectorAll('.serp--top');
var mysite = document.querySelectorAll('.serp--middle');
var rivalBottom = document.querySelectorAll('.serp--bottom');

document.querySelector('#js-move-top').addEventListener('click', function() {

Array.prototype.forEach.call(rivalTop,function(x){
x.parentNode.insertBefore(x,x.parentNode.firstElementChild);
// x.parentNode.insertBefore(rivalTop, x);

mysite[0].style.paddingTop = '2rem';
rivalBottom[0].style.paddingTop = '2rem';

});

});

https://www.sejuku.net/blog/20257#forEach
とおなじことをやっていると考えてよいでしょうか？
なぜarray　callがこちらと違ってついているのかがよくわかりません

[yambejp]

(function() {
で始めてるのに
});
で終わっていては、宣言しているだけでは？
})();
にしないと・・・

[退会済みユーザー]

一部抜粋でしたので全体を記載します。

(function() {

var rivalTop = document.querySelectorAll('.serp--top');
var mysite = document.querySelectorAll('.serp--middle');
var rivalBottom = document.querySelectorAll('.serp--bottom');

document.querySelector('#js-move-top').addEventListener('click', function() {

Array.prototype.forEach.call(rivalTop,function(x){
x.parentNode.insertBefore(x,x.parentNode.firstElementChild);
// x.parentNode.insertBefore(rivalTop, x);

mysite[0].style.paddingTop = '2rem';
rivalBottom[0].style.paddingTop = '2rem';

});

});

document.querySelector('#js-move-bottom').addEventListener('click', function() {

Array.prototype.forEach.call(mysite,function(x){
x.parentNode.appendChild(x);

mysite[0].style.paddingTop = '2rem';
rivalBottom[0].style.paddingTop = '2rem';
});

});

})();

[yambejp]

windowが読み込まれたあとじゃないとquerySelector
（or querySelectorAll）はNode(NodeList)をつかめないですね

(function(){・・・})();
は即時関数ですから実行時点でdomがかたまってないのでしょう

私が例示したとおりwindowの
DOMContentLoadedやloadを待つ処理をいれてください

[退会済みユーザー]

これでいいはずですよね？

(function() {
window.addEventListener('DOMContentLoaded', function(e){
var rivalTop = document.querySelectorAll('.serp--top');
var mysite = document.querySelectorAll('.serp--middle');
var rivalBottom = document.querySelectorAll('.serp--bottom');

document.querySelector('#js-move-top').addEventListener('click', function() {

Array.prototype.forEach.call(rivalTop,function(x){
x.parentNode.insertBefore(x,x.parentNode.firstElementChild);
// x.parentNode.insertBefore(rivalTop, x);

mysite[0].style.paddingTop = '2rem';
rivalBottom[0].style.paddingTop = '2rem';

});

});

document.querySelector('#js-move-bottom').addEventListener('click', function() {

Array.prototype.forEach.call(mysite,function(x){
x.parentNode.appendChild(x);

mysite[0].style.paddingTop = '2rem';
rivalBottom[0].style.paddingTop = '2rem';
});

});

});

})();

確認しましたが動きませんのでhtmlも記載したほうがいいでしょうか？

[yambejp]

> これでいいはずですよね？

いやダメです。理由は前回書きましたのでよく読んで下さい
window.addEventListener('DOMContentLoaded', function(e){
});
で囲んで処理して下さい

[Lhankor_Mhy]

横ですが、即時関数の内側に window.addEventListener('DOMContentLoaded', function(e){...}); があるから、他に問題がある気が……

[yambejp]

Lhankor_Mhyさん、ご指摘ありがとうございます
すみません、完全に見間違えていました。
たしかのご指摘のとおりです。
即時関数の中に入れるのは違和感ありますが挙動はしますね

ちなみにArray.prototype.forEach.call(mysite,
をappendChildさせてはいけません。
mysiteはmiddle設定で、appendChildは後ろに移動するコマンドです
後ろにもっていくのはrivalBottomです

Answer 3

それでよいでしょうか？

いいえ、よくないです。

ここに指定してやるだけでノードに代わるのではないでしょうか？

いいえ、かわりません。

Re: spablockさん