JavaScript で DOM 要素からより正確な CSS パスを生成するにはどうすればよいですか?

DOM 要素からの正確な CSS パスの作成

JavaScript では、DOM 要素から CSS パスを構築するのが一般的なタスクです。これに対処するために、一般的な関数 cssPath が存在します。ただし、多くの場合、n 番目の子セレクターなど、重要な詳細が欠如したパスが生成されます。

提供されたコードは、解決策を提供します。

<code class="js">var cssPath = function(el) {
  if (!(el instanceof Element)) return;
  var path = [];
  while (el.nodeType === Node.ELEMENT_NODE) {
    var selector = el.nodeName.toLowerCase();
    if (el.id) {
      selector += '#' + el.id;
      path.unshift(selector);
      break;
    } else {
      var sib = el, nth = 1;
      while (sib = sib.previousElementSibling) {
        if (sib.nodeName.toLowerCase() == selector)
          nth++;
      }
      if (nth != 1)
        selector += ":nth-of-type(" + nth + ")";
    }
    path.unshift(selector);
    el = el.parentNode;
  }
  return path.join(" > ");
};</code>

元の関数の改善点:

• 早期終了の回避: 元の関数は非要素ノードに遭遇すると停止し、その結果、パスが正しくなくなりました。改良版では、精度を向上させるためにトラバーサルを継続します。
• 明瞭性を強調: 汎用の :nth-child() の代わりに nth-of-type() セレクターを使用することで、生成されるパスは次のようになります。
• ID を持つ祖先要素で停止: 改良された関数は、割り当てられた ID を持つ最初の祖先要素に遭遇したときに停止し、パスを合理化し、可読性を高めます。

以上がJavaScript で DOM 要素からより正確な CSS パスを生成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。