JavaScriptで祖先要素を探す

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

JavaScriptでは、DOM (Document Object Model) を操作して、HTML要素の属性や子要素、親要素などを取得することができます。その中でも、特定のクラスを持つ最も近い祖先要素を見つける方法は、Web開発で頻繁に使用されます。

closest() メソッドの使用

最も一般的な方法は、closest() メソッドを使用することです。このメソッドは、現在の要素から始めて、指定されたセレクターと一致する祖先要素を検索します。

const element = document.getElementById('myElement');
const closestAncestor = element.closest('.specificClass');

• element.closest('.specificClass'): myElement から始めて、クラス名 specificClass を持つ最も近い祖先要素を取得します。

parentNode とループの使用

closest() メソッドがサポートされていない環境では、parentNode プロパティを使用して、親要素を繰り返しチェックすることができます。

const element = document.getElementById('myElement');
let currentElement = element;

while (currentElement) {
  if (currentElement.classList.contains('specificClass')) {
    break;
  }
  currentElement = currentElement.parentNode;
}

const closestAncestor = currentElement;

• 含まれていない場合は、親要素に移動して、繰り返しチェックします。
• ループ内で、currentElement のクラスリストに specificClass が含まれているかチェックします。

querySelector() と matches() の組み合わせ

querySelector() を使用して、特定のセレクターに一致する要素を取得し、matches() を使用してその要素が指定されたクラスを持つかどうかを確認することもできます。

const element = document.getElementById('myElement');
const closestAncestor = element.closest('.specificClass');

if (!closestAncestor) {
  const selector = '.specificClass';
  const ancestor = document.querySelector(selector);
  if (ancestor && ancestor.contains(element)) {
    closestAncestor = ancestor;
  }
}

• その要素が element の祖先である場合は、それを closestAncestor に設定します。
• closest() が null を返した場合、querySelector() を使用して specificClass を持つ要素を取得します。

JavaScriptで祖先要素を探す: コード例

const element = document.getElementById('myElement');
const closestAncestor = element.closest('.specificClass');

• 解説
  
  • document.getElementById('myElement'): IDが myElement の要素を取得します。

const element = document.getElementById('myElement');
let currentElement = element;

while (currentElement) {
  if (currentElement.classList.contains('specificClass')) {
    break;
  }
  currentElement = currentElement.parentNode;
}

const closestAncestor = currentElement;

• 解説
  
  • while ループを使用して、currentElement が null になるまで繰り返し処理を行います。
  • 含まれていない場合は、currentElement を親要素に設定し、次のループに移ります。
  • ループが終了したとき、currentElement には、specificClass を持つ最も近い祖先要素が格納されています。

const element = document.getElementById('myElement');
const closestAncestor = element.closest('.specificClass');

if (!closestAncestor) {
  const selector = '.specificClass';
  const ancestor = document.querySelector(selector);
  if (ancestor && ancestor.contains(element)) {
    closestAncestor = ancestor;
  }
}

• 解説
  
  • まず、closest() を使用して、element の最も近い祖先要素を検索します。
  • 祖先要素が見つからない場合、querySelector() を使用して、specificClass を持つ要素をドキュメント全体から検索します。

const element = document.getElementById('myElement');
const ancestors = document.querySelectorAll('.specificClass');

let closestAncestor = null;
for (const ancestor of ancestors) {
  if (ancestor.contains(element)) {
    closestAncestor = ancestor;
    break;
  }
}

• 解説
  
  • querySelectorAll() を使用して、クラス名 specificClass を持つすべての要素を取得します。
  • ループ内で、各祖先要素が element を含んでいるかどうかをチェックします。
  • 最初に見つかった祖先要素が最も近い祖先要素となります。

matches() と parentNode の再帰的な使用

function findClosestAncestor(element, selector) {
  if (element.matches(selector)) {
    return element;
  }

  if (element.parentNode) {
    return findClosestAncestor(element.parentNode, selector);
  }

  return null;
}

const closestAncestor = findClosestAncestor(document.getElementById('myElement'), '.specificClass');

• 解説
  
  • 再帰的な関数を定義して、要素が指定されたセレクターにマッチするかチェックします。
  • マッチしない場合は、親要素に対して再帰的に呼び出します。
  • 親要素が null になるまで再帰が続きます。

closest() のポリフィル

if (!Element.prototype.closest) {
  Element.prototype.closest = function(selector) {
    let element = this;

    while (element && element !== document) {
      if (element.matches(selector)) {
        return element;
      }
      element = element.parentNode;
    }

    return null;
  };
}

• 解説
  
  • closest() メソッドがサポートされていないブラウザの場合、ポリフィルを使用して実装します。
  • ポリフィルは、closest() メソッドの機能をエミュレートします。