如何在 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-of-type() 选择器而不是通用的 :nth-child()，生成的路径变成更精确且易于阅读。
• 在具有 ID 的祖先元素处停止： 改进后的函数在遇到具有指定 ID 的第一个祖先元素时停止，从而简化了路径并增强了其可读性。

以上是如何在 JavaScript 中从 DOM 元素生成更准确的 CSS 路径？的详细内容。更多信息请关注PHP中文网其他相关文章！