Recuperación de la ruta CSS del elemento DOM con precisión mejorada

La función proporcionada intenta generar una ruta CSS para un elemento DOM determinado. Sin embargo, su producción carece de especificidad y no logra capturar la posición del elemento dentro de sus hermanos. Para abordar esto, necesitamos un enfoque más sofisticado.

Función de ruta CSS mejorada

La función mejorada que se presenta a continuación aborda las limitaciones originales:

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

Mejoras y beneficios:

• Optimización basada en Id: La función prioriza los elementos coincidentes con un atributo id, deteniendo la búsqueda una vez que se encuentra una identificación. Esto garantiza un selector de CSS único y eficiente.
• Selector de enésimo tipo: Al aprovechar el selector de enésimo tipo, la función identifica la posición del elemento entre sus hermanos, proporcionando una mejor especificidad y legibilidad.
• Adecuado para todos los nodos de elementos: La función maneja correctamente todos los nodos de elementos (excluidos los nodos de texto), capturando con precisión su posición dentro del árbol DOM.

Ejemplo de uso:

Utilizando esta función mejorada, ahora se puede obtener una ruta CSS más precisa para un elemento determinado:

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