Recuperando caminho CSS do elemento DOM com precisão aprimorada

A função fornecida tenta gerar um caminho CSS para um determinado elemento DOM. Porém, sua saída carece de especificidade, não conseguindo capturar a posição do elemento dentro de seus irmãos. Para resolver isso, precisamos de uma abordagem mais sofisticada.

Função de caminho CSS aprimorada

A função aprimorada apresentada abaixo aborda as limitações originais:

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

Melhorias e benefícios:

• Otimização baseada em ID: A função prioriza elementos correspondentes com um atributo id, interrompendo a pesquisa uma vez que um ID é encontrado. Isso garante um seletor CSS exclusivo e eficiente.
• Seletor de enésimo tipo: Ao aproveitar o seletor de enésimo tipo, a função identifica a posição do elemento entre seus irmãos, fornecendo melhor especificidade e legibilidade.
• Adequado para todos os nós de elemento: A função manipula corretamente todos os nós de elemento (excluindo nós de texto), capturando com precisão sua posição dentro da árvore DOM.

Exemplo de uso:

Utilizando esta função aprimorada, agora é possível obter um caminho CSS mais preciso para um determinado elemento:

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)"