JavaScript の "querySelector()" および "querySelectorAll()" と一致するワイルドカード要素名

問題:

名前に特定の文字列が埋め込まれた要素を含む XML ドキュメントをクエリするのは困難な場合があります。 CSS は属性クエリのワイルドカードをサポートしていますが、要素名には同じ機能が欠けているようです。

解決策:

残念ながら、ワイルドカード要素を照合する簡単な方法はありません。 「querySelector()」または「querySelectorAll()」を使用して名前を付けます。ただし、別のアプローチもあります:

• 属性の一致: CSS は属性値にワイルドカードを提供します。名前に特定の文字列を含む要素を照合するには、次の構文を使用して、属性内でその文字列が存在するかどうかを検索します。

  • [attribute^='value'] は、属性が始まる要素と一致します。 with 'value'.
  • [attribute$='value'] は、属性が次で終わる要素と一致します。 'value'.
  • [attribute*='value'] は、属性に 'value'.
• Name 属性: が含まれる要素と一致します。 'name' 属性との一致に興味がある場合は、上記の 'id' を 'name' に置き換えてください。式.

例:

「name」属性に文字列「name」を持つすべての要素を検索するには、次のように使用できます。

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

注:

要素タグ名自体のワイルドカード一致を求める場合は、現在、「querySelector()」または「querySelectorAll()」を使用した直接的な解決策はありません。