【JavaScript】ul要素の子要素であるli要素から各li要素の子要素であるa要素を取得してli要素と入れ替える

このスクリプトは、ul要素の子要素であるli要素から、各li要素の子要素であるa要素を取得して、li要素と入れ替えるものです。

各li要素の子要素であるa要素を取得して、li要素と入れ替える

このスクリプトを実行することで、特定のクラス名の配下にあるul要素の子要素であるli要素内にあるa要素が、li要素と入れ替わることになります。

<script>
// ul要素を取得
const ul = document.querySelector('ul');

// 全てのli要素を取得
const liItems = ul.querySelectorAll('li');

// 各li要素の子要素であるa要素を取得し、li要素と入れ替える
liItems.forEach(li => {
  const a = li.querySelector('a');
  li.parentNode.insertBefore(a, li);
  li.appendChild(a);
});
</script>

具体的には、ul要素を取得し、その中のli要素を取得し、各li要素の子要素であるa要素を取得して、li要素とa要素を入れ替える処理を行っています。

HTML文書内のul要素を取得

const ul = document.querySelector('ul');

documentオブジェクトのquerySelectorメソッドを使用して、ul要素を取得しています。ここではセレクターとして、タグ名を指定しています。

全てのli要素を取得

const liItems = ul.querySelectorAll('li');

取得したul要素内の全てのli要素を、querySelectorAllメソッドを使用して取得しています。ここでもセレクターとして、タグ名を指定しています。

各li要素の子要素であるa要素を取得し、li要素と入れ替える

liItems.forEach(li => {
  const a = li.querySelector('a');
  li.parentNode.insertBefore(a, li);
  li.appendChild(a);
});

liItemsに対して、forEachメソッドを使用して、li要素ごとに以下の処理を実行します。

• 各li要素内のa要素を取得し、a変数に代入します。
• li要素の親ノードであるul要素の直前に、a要素を挿入します。これにより、a要素とli要素の順番が入れ替わります。
• li要素の末尾に、a要素を追加します。これにより、a要素がli要素内に残り、li要素とa要素が入れ替わった状態になります。

まとめ

このようにすることで、ul要素の子要素であるli要素内にあるa要素が、li要素と入れ替わることになります。

ただし、使い方を抑えて使用しないとリストの状態が思わぬ結果になる可能性がありますので、設定はひとつずつ慎重に行いましょう。