CSS-Pfad aus DOM-Element mit erhöhter Präzision abrufen

Die bereitgestellte Funktion versucht, einen CSS-Pfad für ein bestimmtes DOM-Element zu generieren. Seiner Ausgabe mangelt es jedoch an Spezifität, da sie die Position des Elements innerhalb seiner Geschwister nicht erfassen kann. Um dieses Problem anzugehen, benötigen wir einen ausgefeilteren Ansatz.

Verbesserte CSS-Pfadfunktion

Die unten dargestellte erweiterte Funktion behebt die ursprünglichen Einschränkungen:

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

Verbesserungen und Vorteile:

• ID-basierte Optimierung: Die Funktion priorisiert übereinstimmende Elemente mit einem ID-Attribut und stoppt die Suche Sobald eine ID gefunden wird. Dies stellt einen einzigartigen und effizienten CSS-Selektor sicher.
• N-ter-Typ-Selektor: Durch die Nutzung des n-ten-Typ-Selektors identifiziert die Funktion die Position des Elements unter seinen Geschwistern und bietet so bessere Ergebnisse Spezifität und Lesbarkeit.
• Geeignet für alle Elementknoten: Die Funktion verarbeitet alle Elementknoten (außer Textknoten) korrekt und erfasst ihre Position innerhalb des DOM-Baums genau.

Beispielverwendung:

Mit dieser verbesserten Funktion kann man jetzt einen genaueren CSS-Pfad für ein bestimmtes Element erhalten:

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