Wie kann ich präzise CSS-Pfade für DOM-Elemente generieren?

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 gewährleistet einen einzigartigen und effizienten CSS-Selektor.
• N-ter-Typ-Selektor: Durch die Nutzung des n-ten-Typ-Selektors identifiziert die Funktion die Position des Elements unter seinen Geschwistern und sorgt so für 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 präziseren 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)"

Das obige ist der detaillierte Inhalt vonWie kann ich präzise CSS-Pfade für DOM-Elemente generieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!