JavaScriptでn番目のul要素の最後のli要素を取得する方法

はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptの基本的な知識があるWeb開発者、特にDOM操作に興味がある方を対象にしています。この記事を読むことで、JavaScriptを使ってHTML内のn番目のul要素の最後のli要素を取得する方法を学ぶことができます。また、querySelectorAllと:last-childセレクタを組み合わせた具体的な実装方法を理解し、実際のWeb開発で応用できるようになります。最近、複数のリストを動的に操作する必要があり、特定のリストの最後の項目を取得する方法を探していたことが、この記事を執筆するきっかけです。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - JavaScriptの基本的な知識 - HTMLの基本的な構造の理解 - DOM操作の基本的な知識

DOM操作とセレクタの基本

Web開発において、JavaScriptを使ってHTML要素を操作することは非常に一般的です。特に、複数のリスト要素から特定の要素を取得する必要がある場面は多々あります。例えば、あるページ内に複数のul要素があり、その中の特定のul要素の最後のli要素を取得したい場合があります。

DOM操作では、セレクタを使って目的の要素を特定します。セレクタには、ID、クラス、タグ名、属性など様々な指定方法があります。また、CSSセレクタを拡張したquerySelectorやquerySelectorAllを使うことで、より複雑な条件で要素を取得することができます。

特に、この記事で扱うn番目のul要素の最後のli要素を取得する場合、querySelectorAllで複数の要素を取得した後、インデックスで特定の要素を選択し、その中から:last-childセレクタを使って最後の子要素を取得するという手順が必要になります。

n番目のul要素の最後のli要素を取得する実装方法

それでは、実際にn番目のul要素の最後のli要素を取得する方法をステップバイステップで解説します。

ステップ1：HTMLの準備

まず、取得対象となるHTMLを準備します。以下のような複数のul要素を持つHTMLを例にします。

Html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>リストの例</title>
</head>
<body>
    <h1>リストの例</h1>

    <ul class="list">
        <li>リスト1-1</li>
        <li>リスト1-2</li>
        <li>リスト1-3</li>
    </ul>

    <ul class="list">
        <li>リスト2-1</li>
        <li>リスト2-2</li>
        <li>リスト2-3</li>
        <li>リスト2-4</li>
    </ul>

    <ul class="list">
        <li>リスト3-1</li>
        <li>リスト3-2</li>
    </ul>

    <script src="script.js"></script>
</body>
</html>

このHTMLには3つのul要素があり、それぞれ異なる数のli要素が含まれています。

ステップ2：JavaScriptでn番目のul要素を選択

次に、JavaScriptでn番目のul要素を選択します。ここでは、2番目のul要素（インデックスは1）を選択する例を示します。

Javascript

// すべてのul要素を取得
const ulElements = document.querySelectorAll('ul');

// 2番目のul要素（インデックスは1）を取得
const targetUl = ulElements[1];

querySelectorAllは、指定したセレクタに一致するすべての要素をNodeListとして返します。NodeListは配列のようなオブジェクトで、インデックスを使って特定の要素にアクセスできます。

ステップ3：最後のli要素を取得

次に、選択したul要素の最後のli要素を取得します。ここでは、:last-childセレクタを使います。

Javascript

// 選択したul要素の最後のli要素を取得
const lastLi = targetUl.querySelector(':last-child');

:last-childセレクタは、親要素の最後の子要素を選択します。これにより、targetUlの最後のli要素が取得できます。

ステップ4：完成したコードの実行と確認

上記のコードを組み合わせると、以下のようになります。

Javascript

// すべてのul要素を取得
const ulElements = document.querySelectorAll('ul');

// 2番目のul要素（インデックスは1）を取得
const targetUl = ulElements[1];

// 選択したul要素の最後のli要素を取得
const lastLi = targetUl.querySelector(':last-child');

// 取得した要素の内容をコンソールに出力
console.log(lastLi.textContent); // "リスト2-4"が出力される

このコードを実行すると、2番目のul要素の最後のli要素のテキスト内容がコンソールに出力されます。

ハマった点やエラー解決

実装中に遭遇する可能性のある問題とその解決方法を以下に示します。

セレクタの指定ミス

セレクタの指定を間違えると、意図した要素が取得できません。特に、クラス名やIDの指定ミスはよくある間違いです。

Javascript

// 間違いの例：クラス名の指定ミス
const targetUl = document.querySelectorAll('ul.list')[1]; // 正しい
const targetUl = document.querySelectorAll('ul.lists')[1]; // 間違い：クラス名が異なる

解決策：セレクタの指定を確認し、HTMLの構造と一致しているか確認します。ブラウザの開発者ツールを使って、セレクタが正しく要素を選択できるか確認すると良いでしょう。

要素が存在しない場合のエラー処理

指定したインデックスの要素が存在しない場合、エラーが発生します。

Javascript

// 間違いの例：存在しないインデックスを指定
const ulElements = document.querySelectorAll('ul');
const targetUl = ulElements[5]; // 存在しないインデックスを指定
const lastLi = targetUl.querySelector(':last-child'); // エラーが発生

解決策：要素が存在するか確認してから操作を行います。

Javascript

// 解決策の例：要素の存在を確認
const ulElements = document.querySelectorAll('ul');
if (ulElements.length > 5) {
    const targetUl = ulElements[5];
    const lastLi = targetUl.querySelector(':last-child');
    console.log(lastLi.textContent);
} else {
    console.log('指定したインデックスのul要素は存在しません。');
}

:last-childセレクタの注意点

:last-childセレクタは、親要素の最後の子要素を選択しますが、その子要素がliでない場合、意図した要素が取得できません。

Html

<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <div>最後の要素（liではない）</div>
</ul>

この場合、:last-childはdiv要素を選択します。li要素のみを対象にする場合は、:last-of-typeセレクタを使うと良いでしょう。

Javascript

const lastLi = targetUl.querySelector('li:last-of-type');

まとめの実装例

上記の内容をまとめた完全な実装例を以下に示します。

Javascript

// n番目のul要素の最後のli要素を取得する関数
function getLastLiOfNthUl(n) {
    // すべてのul要素を取得
    const ulElements = document.querySelectorAll('ul');

    // 指定したインデックスのul要素が存在するか確認
    if (ulElements.length <= n) {
        console.error(`指定したインデックス(${n})のul要素は存在しません。`);
        return null;
    }

    // n番目のul要素を取得
    const targetUl = ulElements[n];

    // ul要素の最後のli要素を取得
    const lastLi = targetUl.querySelector('li:last-of-type');

    // li要素が存在するか確認
    if (!lastLi) {
        console.error('li要素が見つかりません。');
        return null;
    }

    return lastLi;
}

// 関数の使用例
const lastLi = getLastLiOfNthUl(1); // 2番目のul要素の最後のli要素を取得
if (lastLi) {
    console.log(lastLi.textContent); // "リスト2-4"が出力される
}

この関数を使えば、任意のインデックスのul要素の最後のli要素を安全に取得できます。

まとめ

本記事では、JavaScriptを使ってn番目のul要素の最後のli要素を取得する方法について解説しました。

querySelectorAllで複数の要素を取得し、インデックスで特定の要素を選択する方法
:last-childや:last-of-typeセレクタを使って最後の子要素を取得する方法
要素が存在しない場合のエラー処理の実装方法

この記事を通して、DOM操作の基本的なスキルが向上し、実際のWeb開発で応用できるようになったことと思います。特に、動的に生成されるコンテンツから特定の要素を取得する必要がある場合に、この技術は非常に役立ちます。

今後は、さらに高度なセレクタの使い方や、イベントリスナーとの組み合わせについても記事にする予定です。

JavaScriptでn番目のul要素の最後のli要素を取得する方法💻