Platzhalter-Elementnamenübereinstimmung mit „querySelector()“ und „querySelectorAll()“ in JavaScript

Problem:

Das Abfragen eines XML-Dokuments mit Elementen, in deren Namen bestimmte Zeichenfolgen eingebettet sind, kann eine Herausforderung sein. Obwohl CSS Platzhalter für Attributabfragen unterstützt, scheint die gleiche Funktionalität für Elementnamen zu fehlen.

Lösung:

Leider gibt es keine einfache Möglichkeit, Platzhalterelemente abzugleichen Namen mit „querySelector()“ oder „querySelectorAll()“. Es gibt jedoch alternative Ansätze:

• Attribute Matching: CSS stellt Platzhalter für Attributwerte bereit. Um Elemente mit einer bestimmten Zeichenfolge in ihrem Namen abzugleichen, suchen Sie mithilfe der folgenden Syntax nach dem Vorhandensein dieser Zeichenfolge in einem ihrer Attribute:

  • [attribute^='value'] sucht nach Elementen, deren Attribut beginnt mit 'Wert'.
  • [attribute$='value'] stimmt mit Elementen überein, deren Attribut mit endet 'value'.
  • [attribute*='value'] stimmt mit Elementen überein, deren Attribut 'value' enthält.
• Name Attribut: Wenn Sie Wenn Sie daran interessiert sind, das Attribut „name“ zuzuordnen, ersetzen Sie oben einfach „id“ durch „name“. Ausdrücke.

Beispiel:

Um alle Elemente mit der Zeichenfolge „name“ in ihrem „name“-Attribut zu finden, können Sie Folgendes verwenden:

const elementsWithName = document.querySelectorAll('[name*="name"]');

Hinweis:

Wenn Sie eine Platzhalterübereinstimmung für den Element-Tag-Namen selbst suchen, Derzeit gibt es keine direkte Lösung mit „querySelector()“ oder „querySelectorAll()“.