以增強的精度從 DOM 元素檢索 CSS 路徑

提供的函數嘗試為給定 DOM 元素生成 CSS 路徑。然而，它的輸出缺乏特異性，無法捕捉元素在其兄弟元素中的位置。為了解決這個問題，我們需要一個更複雜的方法。

改進的 CSS 路徑函數

下面介紹的增強函數解決了原來的限制：

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(" > ");
}

增強功能與優點：

• 基於ID 的最佳化： 此函數優先考慮具有id 屬性的匹配元素，停止搜尋一旦遇到一個id。這確保了唯一且高效的 CSS 選擇器。
• 第n 個類型選擇器： 透過利用第n 個類型選擇器，此函數可以識別元素在其同級元素中的位置，從而提供更好的選擇器
• 適用於所有元素節點： 此函數正確處理所有元素節點（不包括文字節點），準確捕捉它們在DOM 樹中的位置。

用法範例：

利用這項改進的功能，現在可以獲得給定元素的更精確的CSS 路徑：

console.log(cssPath(document.getElementsByTagName('a')[123]));
// Output: "html > body > div#div-id > div.site:nth-child(1) > div.clearfix > ul.choices > li:nth-child(5)"