jQueryを使わずにJavaScriptで次の要素と前の要素を取得する方法

2024-04-02

JavaScriptで次の要素と前の要素を取得する方法

この解説では、JavaScriptを使用して、HTMLドキュメント内の要素の次の要素と前の要素を取得する方法について説明します。

DOMの概要
次の要素を取得する 2.1. nextSibling プロパティ 2.2. nextElementSibling プロパティ 2.3. querySelector() メソッド 2.4. querySelectorAll() メソッド 2.5. getElementsByTagName() メソッド

DOM (Document Object Model) は、HTMLドキュメントを操作するためのAPIです。DOMでは、HTMLドキュメント内のすべての要素はオブジェクトとして表現されます。

次の要素を取得するには、以下の方法があります。

nextSibling プロパティは、現在の要素の次の兄弟要素を取得します。ただし、テキストノードやコメントノードなども取得するため、注意が必要です。

const element = document.getElementById("my-element");
const nextElement = element.nextSibling;

console.log(nextElement); // 次の兄弟要素

nextElementSibling プロパティ

nextElementSibling プロパティは、現在の要素の次の要素ノードを取得します。テキストノードやコメントノードはスキップされます。

const element = document.getElementById("my-element");
const nextElement = element.nextElementSibling;

console.log(nextElement); // 次の要素ノード

querySelector() メソッドは、CSSセレクターを使用して要素を取得します。次の要素を取得するには、+ セレクターを使用します。

const element = document.getElementById("my-element");
const nextElement = element.querySelector("+ *");

console.log(nextElement); // 次の要素

const element = document.getElementById("my-element");
const nextElements = element.querySelectorAll("+ *");

console.log(nextElements); // 次の要素のリスト

getElementsByTagName() メソッドは、指定されたタグ名の要素のリストを取得します。次の要素を取得するには、nextSibling プロパティを繰り返し使用します。

const element = document.getElementById("my-element");
const nextElement = element.getElementsByTagName("div")[0].nextSibling;

console.log(nextElement); // 次の要素

const element = document.getElementById("my-element");
const previousElement = element.previousSibling;

console.log(previousElement); // 前の兄弟要素

const element = document.getElementById("my-element");
const previousElement = element.previousElementSibling;

console.log(previousElement); // 前の要素ノード

const element = document.getElementById("my-element");
const previousElement = element.querySelector("~ *");

console.log(previousElement); // 前の要素

<!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>
  <div id="my-element">
    <h1>要素</h1>
    <p>テキスト</p>
  </div>
  <script>
    // 次の要素を取得
    const element = document.getElementById("my-element");
    const nextElement = element.nextElementSibling;

    console.log(nextElement); // <h1>要素</h1>

    // 前の要素を取得
    const previousElement = element.previousElementSibling;

    console.log(previousElement); // null
  </script>
</body>
</html>

このコードを実行すると、コンソールに以下の出力が表示されます。

<h1>要素</h1>
null

この例では、nextElementSibling プロパティを使用して次の要素を取得し、previousElementSibling プロパティを使用して前の要素を取得しています。

上記のコード以外にも、querySelector() メソッドや querySelectorAll() メソッドを使用して、次の要素と前の要素を取得することができます。

// 次の要素を取得
const nextElement = element.querySelector("+ *");

// 前の要素を取得
const previousElement = element.querySelector("~ *");

これらの方法を使用する場合は、CSSセレクターを理解する必要があります。

次の要素と前の要素を取得するその他の方法

children プロパティと forEach() メソッド

children プロパティは、要素の子要素のリストを取得します。forEach() メソッドを使用して、子要素をループ処理し、現在の要素の次の要素または前の要素を見つけることができます。

// 次の要素を取得
const element = document.getElementById("my-element");
const nextElement = element.children[1];

// 前の要素を取得
const previousElement = element.children[0];

console.log(nextElement); // <h1>要素</h1>
console.log(previousElement); // null

この例では、children プロパティを使用して要素の子要素のリストを取得し、forEach() メソッドを使用して、子要素をループ処理しています。

parentNode プロパティと nextSibling / previousSibling プロパティ

parentNode プロパティは、要素の親要素を取得します。nextSibling プロパティと previousSibling プロパティを使用して、親要素の子要素をループ処理し、現在の要素の次の要素または前の要素を見つけることができます。

// 次の要素を取得
const element = document.getElementById("my-element");
const nextElement = element.parentNode.nextSibling;

// 前の要素を取得
const previousElement = element.parentNode.previousSibling;

console.log(nextElement); // null
console.log(previousElement); // <h1>要素</h1>

ライブラリの使用

jQueryなどのライブラリを使用すると、次の要素と前の要素を簡単に取得することができます。

// 次の要素を取得
const nextElement = $(element).next();

// 前の要素を取得
const previousElement = $(element).prev();

console.log(nextElement); // <h1>要素</h1>
console.log(previousElement); // null

この例では、jQueryを使用して次の要素と前の要素を取得しています。

JavaScriptで次の要素と前の要素を取得するには、さまざまな方法があります。状況に応じて、適切な方法を選択する必要があります。

javascript html dom