ネイティブ API と jQuery を使用して属性値によって DOM 要素を見つけるにはどうすればよいですか?

属性値によって要素を検索するための DOM API

多くの場合、属性に基づいて DOM 内の要素を検索する必要があります。たとえば、特定のクラスまたはデータ属性を持つすべての要素を取得したい場合があります。

ネイティブ API: querySelectorAll

最新のブラウザは、ネイティブ API、querySelectorAll を提供します。属性に基づいて要素を検索できます。このメソッドは引数として CSS セレクターを受け取ります。これには属性セレクターを含めることができます。例:

document.querySelectorAll('[data-foo="value"]');

ブラウザの互換性

querySelectorAll メソッドは、ほとんどの最新のブラウザでサポートされています。以下を含む:

• Chrome
• Firefox
• Safari
• Edge
• IE11 以降

IE9 以前などの古いブラウザの場合は、ポリフィルを使用できます。または jQuery などのサードパーティ ライブラリ。

jQuery アプローチ

jQuery は、簡潔な構文を提供することでこのタスクを簡略化します。

$('[data-foo="value"]');

以上がネイティブ API と jQuery を使用して属性値によって DOM 要素を見つけるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。