属性値に基づいて DOM 要素を効率的に見つけるにはどうすればよいですか?

属性値に基づいた DOM 内の要素の検索

Web 開発では、多くの場合、特定の属性値に基づいてドキュメント オブジェクト モデル (DOM) 内の要素にアクセスする必要があります。

ネイティブ DOM API アプローチ

最新のブラウザーが提供するquerySelectorAll メソッド。CSS のようなセレクターを使用して要素を検索できます。属性値に基づいて要素を検索するには、次の構文を使用します:

document.querySelectorAll('[attribute-name="attribute-value"]');

たとえば、data-foo 属性が「value」に設定されているすべての要素を検索するには:

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

このメソッドにはブラウザ互換性の制限があることに注意してください (詳細については、以下の参考資料を参照してください)。

jQuery代替

古いブラウザ (IE9 以前) をサポートする必要がある場合は、jQuery ライブラリを使用できます:

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

互換性情報

• [Quirksmode DOM]コアドキュメント](http://quirksmode.org/dom/core/#t14)
• [querySelector 互換性テーブルを使用できますか](http://caniuse.com/queryselector)

以上が属性値に基づいて DOM 要素を効率的に見つけるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。