以增强的精度从 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 个类型选择器，该函数可以识别元素在其同级元素中的位置，从而提供更好的选择器
• 适用于所有元素节点：该函数正确处理所有元素节点（不包括文本节点），准确捕获它们

用法示例：

利用这一改进的功能，现在可以获得给定元素的更精确的 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)"