Wie generiert man in JavaScript genauere CSS-Pfade aus DOM-Elementen?

Genaue CSS-Pfade aus DOM-Elementen erstellen

In JavaScript ist das Erstellen von CSS-Pfaden aus DOM-Elementen eine häufige Aufgabe. Um dieses Problem zu beheben, gibt es eine beliebte Funktion, cssPath. Es entstehen jedoch häufig Pfade, denen wichtige Details fehlen, wie z. B. Selektoren für das n-te Kind.

Der bereitgestellte Code bietet eine Lösung:

<code class="js">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>

Verbesserungen gegenüber der Originalfunktion:

• Vermeidet vorzeitige Beendigungen: Die ursprüngliche Funktion wurde angehalten, als sie auf Nicht-Element-Knoten traf, was zu falschen Pfaden führte. Die verbesserte Version setzt die Durchquerung fort, um die Genauigkeit zu verbessern.
• Betont Klarheit: Durch die Verwendung von nth-of-type()-Selektoren anstelle des generischen :nth-child() werden die generierten Pfade präziser und für Menschen lesbar.
• Stoppt bei Vorfahrenelementen mit IDs: Die verbesserte Funktion stoppt, wenn sie auf das erste Vorfahrenelement mit einer zugewiesenen ID trifft, wodurch der Pfad rationalisiert und seine Lesbarkeit verbessert wird.

Das obige ist der detaillierte Inhalt vonWie generiert man in JavaScript genauere CSS-Pfade aus DOM-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!