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 サイトの他の関連記事を参照してください。