从 Dom 元素获取 CSS 路径

Question

我得到了这个函数来获取 cssPath ：

 var cssPath = function (el) {
  var path = [];

  while (
    (el.nodeName.toLowerCase() != 'html') &&
    (el = el.parentNode) &&
    path.unshift(el.nodeName.toLowerCase() +
      (el.id ? '#' + el.id : '') +
      (el.className ? '.' + el.className.replace(/\s+/g, ".") : ''))
  );
  return path.join(" > ");
}
console.log(cssPath(document.getElementsByTagName('a')[123]));

但我得到了这样的东西：

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

但要完全正确，它应该是这样的：

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

有人想过用 javascript 简单地实现它吗？

原文由 jney 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要始终获得正确的元素，您需要使用 :nth-child() 或 :nth-of-type() 用于不唯一标识元素的选择器。所以试试这个：

 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;
        } else {
            var sib = el, nth = 1;
            while (sib.nodeType === Node.ELEMENT_NODE && (sib = sib.previousSibling) && nth++);
            selector += ":nth-child("+nth+")";
        }
        path.unshift(selector);
        el = el.parentNode;
    }
    return path.join(" > ");
}

您可以添加一个例程来检查其相应上下文中的唯一元素（例如 TITLE 、 BASE 、 CAPTION 等）。

原文由 Gumbo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

上面的答案实际上有一个错误——while 循环在遇到非元素节点（例如文本节点）时会过早中断，从而导致不正确的 CSS 选择器。

这是修复该问题的改进版本加上：

• 当它遇到第一个分配了 id 的祖先元素时停止
• 使用 nth-of-type() 使选择器更具可读性

    var cssPath = 函数（el）{
        如果 (!(el instanceof 元素))
            返回;
        变种路径= [];
        while (el.nodeType === Node.ELEMENT_NODE) {
            var 选择器 = el.nodeName.toLowerCase();
            如果（el.id）{
                选择器 += '#' + el.id;
                路径.unshift(选择器);
                休息;
            } 别的 {
                var sib = el, nth = 1;
                while (sib = sib.previousElementSibling) {
                    如果 (sib.nodeName.toLowerCase() == 选择器)
                       第n个++；
                }
                如果（第 n 个！= 1）
                    选择器 += ":nth-of-type("+nth+")";
            }
            路径.unshift(选择器);
            el = el.parentNode;
        }
        返回 path.join(" > ");
     }

原文由 asselin 发布，翻译遵循 CC BY-SA 3.0 许可协议