【JavaScript】【children】n番目以外の子要素を抽出する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでchildrenで取得した子要素からn番目以外の子要素を抽出する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

childrenで子要素を取得する

Elementのchildrenプロパティで指定した要素のすべての子要素を取得します。childrenプロパティはHTMLCollection形式で子要素を返します。

childrenプロパティで指定した要素の子要素を取得してみます。

HTML

<ul class="list js-list">
    <li class="list__item">1</li>
    <li class="list__item">2</li>
    <li class="list__item">3</li>
    <li class="list__item">4</li>
    <li class="list__item">5</li>
</ul>

JavaScript

const list = document.querySelector('.js-list');
const listItems = list.children;
console.log(listItems);

実行結果は下記の通りです。

実行結果

HTMLCollection(5)
0: li.list__item
1: li.list__item
2: li.list__item
3: li.list__item
4: li.list__item

ul要素が持つすべての子要素を取得することができました。続いて取得した子要素から指定したインデックス番号以外の要素を抽出する処理を作成します。

参考：https://developer.mozilla.org/ja/docs/Web/API/Element/children

childrenで取得した子要素からn番目以外の子要素を抽出する

childrenで取得した子要素からn番目以外の子要素を抽出します。

childrenプロパティで取得した要素はHTMLCollectionとなるため、データを扱いやすくするために配列に変更します。データの抽出には配列メソッドのfilterを使用します。

単数

指定するインデックス番号が単数の場合の実行例です。n番目の指定が一つの場合は、不等価演算子でインデックス番号と等しくない子要素を返します。

// 要素を取得する
const list = document.querySelector('.js-list');

// 取得した要素の子要素を取得する
const listItems = list.children;

// 子要素から3番目以外の子要素を抽出する
const newListItems = [...listItems].filter((el, i) => {
    return i !== 2;
});

// リストを空にして抽出した子要素を挿入する
list.innerHTML = '';
newListItems.forEach(item =>{
    list.appendChild(item);
});

複数

指定するインデックス番号が複数の場合の実行例です。インデックス番号を配列に格納し、includesを使って値を抽出します。

// 要素を取得する
const list = document.querySelector('.js-list');

// 取得した要素の子要素を取得する
const listItems = list.children;

// 子要素から3番目、4番目以外の子要素を抽出する
const newListItems = [...listItems].filter((el, i) => {
    return ![2, 3].includes(i);
});

// リストを空にして抽出した子要素を挿入する
list.innerHTML = '';
newListItems.forEach(item =>{
    list.appendChild(item);
});

これで指定した要素からn番目以外の子要素を抽出することができました。

参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

最後に

ElementのchildrenはHTMLCollectionはを返すプロパティです。HTMLCollectionは生きたデータとなるため、取り扱いが難しいのが現状です。HTMLCollectionは使用できるメソッドもかなり限定さっれていうため、HTMLCollectionのデータは、一度配列化し、特定の処理を実行した後にHTMLに挿入する方法がよろしいかなと思います。

以上、JavaScriptのchildrenで取得した要素からn番目以外の子要素を抽出する方法のご紹介でした！