So generieren Sie genaue CSS-Pfade aus DOM-Elementen: Warum ist :nth-child wichtig?

So generieren Sie genaue CSS-Pfade aus DOM-Elementen

Sie haben eine Funktion bereitgestellt, die CSS-Pfade aus DOM-Elementen abruft. Obwohl es die Hierarchie des Elements effektiv erfasst, fehlt ihm die Präzision, die für eine eindeutige Identifizierung erforderlich ist.

Das Problem

Der CSS-Pfad für das 123. Ankerelement, das Ihre Funktion zurückgibt, ist:

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

Um das Element jedoch vollständig zu identifizieren, sollte es den :nth-child-Selektor enthalten:

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

Die Lösung

Um genaue CSS-Pfade abzuleiten, implementieren Sie die folgenden Verbesserungen in Ihrer Funktion:

<code class="javascript">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(" > ");
 };</code>

Diese verbesserte Funktion:

• Behandelt Nicht-Element-Knoten: Verhindert vorzeitige Schleifenbeendigung beim Auftreffen auf Nicht-Element-Knoten.
• Priorisiert ID-Selektoren: Identifiziert Vorfahren mit IDs, um die Pfadeffizienz zu verbessern.
• Verwendet den n-ten Typ: Verbessert die Lesbarkeit und Einzigartigkeit von Selektoren.

Durch die Einbindung dieser Änderungen können Sie sicher genaue CSS-Pfade generieren, die die Hierarchie und Position von DOM-Elementen genau darstellen.

Das obige ist der detaillierte Inhalt vonSo generieren Sie genaue CSS-Pfade aus DOM-Elementen: Warum ist :nth-child wichtig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!