JavaScript：DOM操作における祖先要素探索 - closest()メソッド vs 手動探索

2024-05-01

JavaScriptで特定のクラスを持つ最も近い祖先要素を見つける

HTMLドキュメントにおいて、ある要素から特定のクラスを持つ最も近い祖先要素を見つけることは、よくある操作の一つです。この操作には、主に以下の2つの方法があります。

closest()メソッドは、Elementインタフェースの一部であり、指定されたCSSセレクターに一致する最も近い祖先要素（または自分自身）を返します。このメソッドは、シンプルでわかりやすいコードを書くことができます。

const targetElement = document.querySelector('#target-element');
const closestAncestor = targetElement.closest('.specific-class');

if (closestAncestor) {
  console.log('Closest ancestor with class "specific-class":', closestAncestor);
} else {
  console.log('No ancestor with class "specific-class" found.');
}

手動で親要素を辿る

closest()メソッドを使わずに、手動で親要素を辿っていく方法もあります。この方法は、もう少し複雑ですが、柔軟性があります。

function findClosestAncestor(element, className) {
  while (element && !element.classList.contains(className)) {
    element = element.parentElement;
  }
  return element;
}

const targetElement = document.querySelector('#target-element');
const closestAncestor = findClosestAncestor(targetElement, 'specific-class');

if (closestAncestor) {
  console.log('Closest ancestor with class "specific-class":', closestAncestor);
} else {
  console.log('No ancestor with class "specific-class" found.');
}

一般的には、closest()メソッドを使う方が簡潔でわかりやすいためおすすめです。しかし、より柔軟な制御が必要な場合は、手動で親要素を辿る方法の方が適している場合があります。

補足

上記のコード例は、単純な例です。実際の状況に合わせて、必要に応じて修正してください。

サンプルコード：JavaScriptで特定のクラスを持つ最も近い祖先要素を見つける

以下のサンプルコードは、closest()メソッドと手動で親要素を辿る方法の両方を使って、特定のクラスを持つ最も近い祖先要素を見つける方法を示しています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Closest Ancestor Example</title>
</head>
<body>
  <div id="target-element" class="target">
    <p>Target Element</p>
    <div class="nested">
      <p>Nested Element</p>
      <div class="specific-class">Specific Class Element</div>
    </div>
  </div>

  <script>
    // closest()メソッドを使う
    const targetElement = document.querySelector('#target-element');
    const closestAncestor = targetElement.closest('.specific-class');

    if (closestAncestor) {
      console.log('Closest ancestor with class "specific-class" (using closest()):', closestAncestor);
    } else {
      console.log('No ancestor with class "specific-class" found (using closest()).');
    }

    // 手動で親要素を辿る
    function findClosestAncestor(element, className) {
      while (element && !element.classList.contains(className)) {
        element = element.parentElement;
      }
      return element;
    }

    const closestAncestorManual = findClosestAncestor(targetElement, 'specific-class');

    if (closestAncestorManual) {
      console.log('Closest ancestor with class "specific-class" (manual):', closestAncestorManual);
    } else {
      console.log('No ancestor with class "specific-class" found (manual).');
    }
  </script>
</body>
</html>

説明

HTML:
closest()メソッドを使う:
- targetElement.closest('.specific-class') を使って、target-element から最も近い specific-class クラスを持つ祖先要素を見つけます。
- 見つかった場合は、その要素をコンソールに出力します。
- 見つからない場合は、メッセージを出力します。
手動で親要素を辿る:
- findClosestAncestor という名前の関数を作成します。
- この関数は、引数として渡された要素 (element) と、探したいクラス名 (className) を受け取ります。
- element が null または className クラスを持つ要素になるまで、親要素を辿っていきます。

このサンプルコードは、特定のクラスを持つ最も近い祖先要素を見つけるための2つの方法を理解するのに役立ちます。

補足

このコードは、基本的な例であり、実際の状況に合わせて変更する必要があります。

JavaScriptで特定のクラスを持つ最も近い祖先要素を見つけるその他の方法

従来の説明に加えて、JavaScriptで特定のクラスを持つ最も近い祖先要素を見つけるには、以下の方法も考えられます。

jQueryライブラリを使用すると、closest()メソッドを使って簡単に祖先要素を見つけることができます。

// jQueryを使う
$(function() {
  const $targetElement = $('#target-element');
  const $closestAncestor = $targetElement.closest('.specific-class');

  if ($closestAncestor.length) {
    console.log('Closest ancestor with class "specific-class" (using jQuery):', $closestAncestor);
  } else {
    console.log('No ancestor with class "specific-class" found (using jQuery).');
  }
});

XPathは、XMLやHTMLドキュメントを操作するための言語です。XPathを使って、特定の条件に一致する要素を検索することができます。

// XPathを使う
const targetElement = document.getElementById('target-element');
const closestAncestor = document.evaluate('ancestor::*[contains(classList, "specific-class")]', targetElement, null, XPathResult.FIRST_NODE, null);

if (closestAncestor.singleNodeValue) {
  console.log('Closest ancestor with class "specific-class" (using XPath):', closestAncestor.singleNodeValue);
} else {
  console.log('No ancestor with class "specific-class" found (using XPath).');
}

属性セレクタを使う

CSS3の属性セレクタを使って、特定の属性を持つ要素とその子孫要素を選択することができます。

<div id="target-element" data-has-specific-class="true">
  </div>

// 属性セレクタを使う
const targetElement = document.getElementById('target-element');
const closestAncestor = targetElement.closest('[data-has-specific-class="true"]');

if (closestAncestor) {
  console.log('Closest ancestor with data-has-specific-class attribute (using attribute selector):', closestAncestor);
} else {
  console.log('No ancestor with data-has-specific-class attribute found (using attribute selector).');
}