从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>正文> div＃div-id> div.site> div.clearfix> ul.choices> li

但是完全正确的是，它看起来应该像这样：

html>正文> div＃div-id> div.site:nth-child(1）> div.clearfix> ul.choices> li：nth-​​child（5）

有人有任何想法简单地用javascript实现吗？

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，等）。