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分で回数分繰り返して処理を行うことと同じことをしていて繰り返し回数数を指定しなくてもそれができるのかなと思ったのですがそれでよいでしょうか?
また、ここに指定してやるだけでノードに代わるのではないでしょうか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
parentNode.insertBefore(newNode, referenceNode);
Node.insertBefore - Web API インターフェイス | MDN
とあり、要求される引数はNode
ですが、
js
1x.parentNode.insertBefore(rivalTop, x);
このrivalTop
にはNodeList
が入っていると思われます。
投稿2018/03/29 11:43
総合スコア36104
0
ちゃんと把握してませんがこんな感じ?
javascript
1x.parentNode.insertBefore(x,x.parentNode.firstElementChild);
それとstyleをいじるくらいなら最初からcssで指定はできないのでしょうか?
sample
念の為sampleつけときます
javascript
1<style> 2.aqua{background-Color:aqua;} 3.lime{background-Color:lime;} 4.yellow{background-Color:yellow;} 5</style> 6<script> 7window.addEventListener('DOMContentLoaded', function(e){ 8 var rivalTop =document.querySelectorAll('.serp--top'); 9 var rivalBottom = document.querySelectorAll('.serp--bottom'); 10 document.querySelector('#js-move-top').addEventListener('click', function() { 11 Array.prototype.forEach.call(rivalTop,function(x){ 12 x.parentNode.insertBefore(x,x.parentNode.firstElementChild); 13 }); 14 }); 15 document.querySelector('#js-move-bottom').addEventListener('click', function() { 16 Array.prototype.forEach.call(rivalBottom,function(x){ 17 x.parentNode.appendChild(x); 18 }); 19 }); 20}); 21</script> 22 23<input type="button" id="js-move-top" value="move top"> 24<input type="button" id="js-move-bottom" value="move bottom"> 25<div class="aqua"> 26<div class="serp--top">top</div> 27<div class="serp--middle">middle</div> 28<div class="serp--bottom">bottom</div> 29</div> 30<div class="lime"> 31<div class="serp--middle">middle</div> 32<div class="serp--bottom">bottom</div> 33<div class="serp--top">top</div> 34</div> 35<div class="yellow"> 36<div class="serp--middle">middle</div> 37<div class="serp--top">top</div> 38<div class="serp--bottom">bottom</div> 39<div class="serp--top">top</div> 40<div class="serp--bottom">bottom</div> 41<div class="serp--middle">middle</div> 42</div> 43
投稿2018/03/29 11:40
編集2018/03/30 01:18総合スコア114829
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/03/29 14:01
2018/03/30 01:19
退会済みユーザー
2018/03/30 03:24
2018/03/30 03:28
退会済みユーザー
2018/03/30 03:48
2018/03/30 03:54 編集
退会済みユーザー
2018/03/30 04:18
2018/03/30 04:23
2018/03/30 05:40
2018/03/30 05:48
0
それでよいでしょうか?
いいえ、よくないです。
ここに指定してやるだけでノードに代わるのではないでしょうか?
いいえ、かわりません。
Re: spablockさん
投稿2018/03/29 13:18
編集2018/03/29 14:09退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/03/29 13:57
退会済みユーザー
2018/03/29 14:00
2018/03/30 00:36