javascript - 从 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 简单地实现它吗？

Answer 1

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

这是修复该问题的改进版本:

• 遇到第一个分配了 id 的祖先元素时停止
• 使用 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;                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(" > ");     }