Pre-querySelectorAll ブラウザで属性によって要素を取得する方法

Pre-querySelectorAll ブラウザでの属性による要素の取得

IE9 より前のブラウザには強力な querySelectorAll() メソッドがないため、要素に基づいて要素を取得する必要がある場合に課題が生じます。特定の属性。これに対処するために、IE7 以降で動作するネイティブ ソリューションを検討してみましょう。

getElementsByTagName と属性チェックの使用

getElementsByTagName メソッドを利用して、querySelectorAll の機能をシミュレートできます。特定の属性を持つ要素を検索する getAllElementsWithAttribute という関数を作成しましょう。

<code class="js">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) {
      // Element has the attribute. Add it to the array.
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}</code>

この関数は属性名を引数として受け取り、ドキュメント内のすべての要素を反復処理します。各要素について、指定された属性が存在し、null でないかどうかがチェックされます。存在する場合、その要素は一致する要素の配列に追加されます。

使用例

data-foo 属性を持つすべての要素を取得するには、単に次を呼び出します:

<code class="js">getAllElementsWithAttribute('data-foo');</code>

このアプローチは、querySelectorAll のないブラウザーで属性によって要素を取得するためのネイティブ ソリューションを提供し、IE7 以降との互換性を確保します。

以上がPre-querySelectorAll ブラウザで属性によって要素を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。