ホームページ > 記事 > ウェブフロントエンド > querySelectorAll が見つからない場合に属性で要素を選択する方法
querySelectorAll が利用できない場合に属性によって要素を取得する方法
querySelectorAll メソッドは広く普及しているにもかかわらず、誰でもアクセスできるわけではありません。たとえば、IE7 などの古いブラウザにはこの機能がありません。ただし、IE7 との互換性を確保するネイティブ アプローチを使用して、同様の結果を達成することは可能です。
次のシナリオを考えてみましょう:
<p data-foo="bar"></p>
通常、querySelectorAll を使用して、以下に基づいて要素を取得します。それらの属性:
document.querySelectorAll('[data-foo]')
ただし、querySelectorAll がない場合は、代替ソリューションが必要です。
同じ機能をネイティブに実現するには、JavaScript 関数を構築できます:
function getAllElementsWithAttribute(attribute) { var matchingElements = []; var allElements = document.getElementsByTagName('*'); for (var i = 0, n = allElements.length; i < n; i++) { if (allElements[i].getAttribute(attribute) !== null) { matchingElements.push(allElements[i]); } } return matchingElements; }
この関数はドキュメント全体を走査し、特定の属性を持つすべての要素を取得します。これを呼び出すことで、
getAllElementsWithAttribute('data-foo');
「data-foo」属性を持つ要素を効果的に取得できます。このソリューションは包括的であり、IE7 と互換性があり、querySelectorAll がないブラウザーでも属性によって要素にアクセスできるようになります。
以上がquerySelectorAll が見つからない場合に属性で要素を選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。