JavaScript の「querySelector()」および「querySelectorAll()」に要素名を一致させるためのワイルドカード メソッドはありますか?

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

問題:

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

解決策:

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

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

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

例:

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

<code class="javascript">const elementsWithName = document.querySelectorAll('[name*="name"]');</code>

注:

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

以上がJavaScript の「querySelector()」および「querySelectorAll()」に要素名を一致させるためのワイルドカード メソッドはありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。