BFE.devでのAI解答例 - JavaScript コーディング問題
170. 目標要素を特定するCSS Selectorを返す

以下がJavaScriptコードとなります。

function generateSelector(root, target) {
  // 目標要素がルート要素自体だった場合、セレクタはルート要素のタグ名のみ
  if (root === target) {
    return root.tagName.toLowerCase();
  }

  // 目標要素がルート要素の子孫だった場合、再帰的に探索してセレクタ文字列を生成する
  let selector = "";
  while (target !== root) {
    const parent = target.parentElement;
    const tagName = target.tagName.toLowerCase();
    const index = [...parent.children].indexOf(target) + 1;
    selector = `${tagName}:nth-child(${index}) ${selector}`;
    target = parent;
  }
  return selector.trim();
}

関数generateSelectorは、引数としてルート要素rootと目標要素targetを受け取り、目標要素を特定するCSSセレクタを返します。まず、目標要素がルート要素自体だった場合は、ルート要素のタグ名のみを返します。それ以外の場合は、目標要素がルート要素の子孫だった場合に再帰的に探索してセレクタ文字列を生成します。

具体的には、目標要素targetが親要素parentの何番目の子要素かを取得し、その要素名とインデックスをセレクタ文字列に追加していきます。これを目標要素がルート要素になるまで繰り返し、生成されたセレクタ文字列を逆順に並べたものを返します。