如何從 DOM 元素產生準確的 CSS 路徑：為什麼 :nth-child 很重要？

如何從 DOM 元素產生準確的 CSS 路徑

您已經提供了一個從 DOM 元素中擷取 CSS 路徑的函數。雖然它有效地捕捉了元素的層次結構，但缺乏唯一標識所需的精確度。

問題

函數傳回的第123 個錨點元素的CSS 路徑是：

html > body > div#div-id > div.site > div.clearfix > ul.choices > li

但是，要完全辨識該元素，它應該包含:nth-child 選擇器：

html > body > div#div-id > div.site:nth-child(1) > div.clearfix > ul.choices > li:nth-child(5)

解決方案

要導出準確的CSS 路徑，請在函數中實現以下增強功能：

<code class="javascript">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>

此改進的函數：

• 處理非元素節點：防止過早遇到非元素節點時循環終止。
• 優先考慮 ID 選擇器： 使用 ID 識別祖先以提高路徑效率。
• 利用 nth-of-type： 增強選擇器的可讀性和唯一性。

透過合併這些修改，您可以自信地產生準確的 CSS 路徑，精確表示 DOM 元素的層次結構和位置。

以上是如何從 DOM 元素產生準確的 CSS 路徑：為什麼 :nth-child 很重要？的詳細內容。更多資訊請關注PHP中文網其他相關文章！