1. ホーム
  2. javascript

[解決済み] querySelectorAllがない場合、ライブラリを使用せずに属性で要素を取得する?

2022-08-01 15:56:40

質問

<p data-foo="bar">

と同等のことをするにはどうすればよいのでしょうか?

document.querySelectorAll('[data-foo]')

ここで クエリセレクターオール 利用不可 ?

少なくともIE7で動作するネイティブなソリューションが必要です。IE6にはこだわらない。

どのように解決するのですか?

getElementsByTagName('*') を実行し、"data-foo" 属性を持つ要素のみを返す関数を書けばよいでしょう。

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 exists with attribute. Add to array.
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

では

getAllElementsWithAttribute('data-foo');