JavaScript : 要素の順番を逆にする。

「見た目」だけならflexだが‥

このような⬇︎サンプルを用意しました。
上から順に、「要素１〜４」が並んでいます。

<div id = "sample"> <p>・要素１</p> <p>・要素２</p> <p>・要素３</p> <p>・要素４</p> </div>

単に「見た目」の並び順を逆転させるだけであれば、flexで囲んでdirectionを操作するという、よく見られる方法があります。

#sample { display:flex; 「「１flex-direction:column-reverse;」」 }

flex-directionで「縦方向に逆転させる」としたので、要素の並び順が逆になりました。

これだけならいいのですが‥

後からアクセスする場合。

ここで、「１番目の要素に背景色をつける」という処理をしたい場合、どうなるのでしょう。
JavaScriptでやってみます。

「「３//親要素を取得」」 const sample = document.getElementById("sample"); 「「３//1番目の要素にbgcolor」」 sample.children[0].style.backgroundColor = "yellow";

子要素の取得は、「 element.children[n] 」で行います。
結果はどうでしょうか。

ん？
1番上に表示されている「要素４」に背景色をつけるつもりが、1番下の「要素１」に施されてしまいました。


そうです。flex-directionはあくまで「見た目の並べ順」を指定しているにすぎません。
内部構造的な要素の順番は、元々の「要素１→→４」のままになっているので、このような結果になってしまうのですね。
並べ替えたあとから、個々の要素にアクセスする場合にはとても不便です💧


見た目上ではなく、内部構造的に要素を並び替えるとしたら、
どうすれば・・

insertBeforeメソッド。

親要素.insertBefore（挿入する要素,ポイントとなる要素）;

JavaScriptの「insertBefore」メソッドは、要素を任意の場所に挿入することができる、便利なものです。
実行すると、CSSの「見た目指定」ではなく内部構造レベルで要素の順番が差し変わります。

先ほどの背景色は一旦キャンセル。insertBeforeを使って、「要素２」を先頭に移してみます。

const sample = document.getElementById("sample"); 「「１sample.insertBefore(sample.children[1],sample.children[0]);」」

とりあへず、ブラウザではこのようになっています。

検証。

先ほどのflex-directionでは、見た目の並び順が変更されたに過ぎませんでした。
今回は本当に内部的に順序変更されたのでしょうか？アクセスすることで確かめてみましょう。

先ほどと同じく、「１番目の要素」に背景色を付けてみます。

sample.children[0].style.backgroundColor = "yellow";

こんどはアクセスと見た目が一致しました。
children[1]の「要素２」がchildren[0]として扱われていて、内部的にも要素の順序がちゃんと変更されていることがわかります。

for文で逆順に。

先ほどの状態から今度はchildren[2]の「要素３」を先頭にしてみます。

const sample = document.getElementById("sample"); sample.insertBefore(sample.children[1],sample.children[0]); 「「１sample.insertBefore(sample.children[2],sample.children[0]);」」

「要素３」が先頭になりました。
このようにして、「２番目以降の要素」を順に「１番目の要素の上」に移動させていくと、最終的に要素全体の並び順が逆転しますね？

〜じゃあfor文にして、ひとまとめにしてしまいましょう。
コード全体を⬇︎のように書き換えます。

並び順が完全に逆になりました。
これで要素の数に関わらず、「親要素を取得 → for文１発」で順序を逆転させることができますね！

for文１発で便利。

Jsで要素の並び順を逆にする方法。
１度配列に起こして再度子要素として追加、というのはみなさん記事にされていたのですが、意外とこのやりかたは紹介されていませんでした。
そこで今回記事を投下することに。for文１発ですぐに使えるので、とても便利だと思います。

最後までお読みくださり、ありがとうございました。フーノページではベクターソフト、SVG、webの小ワザと忙しいのですが（笑）、これからも面白い/便利なネタがあれば発信していきたいと思います。ではまた〜 🎵