如何在 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中文網其他相關文章！