Získejte cestu CSS z prvku Dom

Mám tuto funkci, abych získal 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]));

Ale mám něco takového:

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

Ale aby to bylo úplně správné, mělo by to vypadat takto :

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

Měl někdo nějaký nápad implementovat to jednoduše v javascriptu?

Odpověď

Chcete-li vždy získat správný prvek, budete muset použít :nth-child() nebo :nth-of-type() pro selektory, které jedinečně neidentifikují prvek. Tak zkuste toto:

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

Můžete přidat rutinu pro kontrolu jedinečných prvků v jejich odpovídajícím kontextu (například TITLE , BASE , CAPTION , atd.).