<p data-foo="bar">

どのようにして同等のことを行うことができます

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

どこquerySelectorAllがあり利用できませんか？

少なくとも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');

使用する

//find first element with "someAttr" attribute
document.querySelector('[someAttr]')

または

//find all elements with "someAttr" attribute
document.querySelectorAll('[someAttr]') 

属性によって要素を検索します。現在、すべての関連ブラウザー（IE8を含む）でサポートされています。http：//caniuse.com/#search=queryselector

私は少し遊んで、この大まかな解決策に終わりました：

function getElementsByAttribute(attribute, context) {
  var nodeList = (context || document).getElementsByTagName('*');
  var nodeArray = [];
  var iterator = 0;
  var node = null;

  while (node = nodeList[iterator++]) {
    if (node.hasAttribute(attribute)) nodeArray.push(node);
  }

  return nodeArray;
}

使い方は非常に簡単で、IE8でも機能します。

getElementsByAttribute('data-foo');
// or with parentNode
getElementsByAttribute('data-foo', document);

http://fiddle.jshell.net/9xaxf6jr/

しかし、私は/ を使用することをお勧めします（そして古いブラウザをサポートするにはポリフィルを使用します）：querySelectorAll

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

これを試してみてください

document.querySelector（ '[attribute = "value"]'）

例：

document.querySelector('[role="button"]')

それも機能します：

document.querySelector([attribute="value"]);

そう：

document.querySelector([data-foo="bar"]);

これを試してください-上記の答えを少し変更しました：

var getAttributes = function(attribute) {
    var allElements = document.getElementsByTagName('*'),
        allElementsLen = allElements.length,
        curElement,
        i,
        results = [];

    for(i = 0; i < allElementsLen; i += 1) {
        curElement = allElements[i];

        if(curElement.getAttribute(attribute)) {
            results.push(curElement);
        }
    }

    return results;
};

そして、

getAttributes('data-foo');

@kevinfahyの回答を少し変更し、必要に応じて値で属性を取得できるようにします。

function getElementsByAttributeValue(attribute, value){
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0, n = allElements.length; i < n; i++) {
    if (allElements[i].getAttribute(attribute) !== null) {
      if (!value || allElements[i].getAttribute(attribute) == value)
        matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

ブラウザで使用しない

ブラウザで、を使用しますdocument.querySelect('[attribute-name]')。

ただし、ユニットテストを行っており、モックドDOMに不安定なquerySelector実装がある場合は、これでうまくいきます。

これは@kevinfahyの答えです。ES6のファットアロー関数を使用して、HtmlCollectionを配列に変換することにより、おそらく読みやすさを犠牲にしてビットを少し削減しています。

したがって、これはES6トランスパイラーでのみ機能します。また、多くの要素でどれだけのパフォーマンスが得られるかはわかりません。

function getElementsWithAttribute(attribute) {
  return [].slice.call(document.getElementsByTagName('*'))
    .filter(elem => elem.getAttribute(attribute) !== null);
}

そして、特定の値を持つ属性を取得するバリアントがあります

function getElementsWithAttributeValue(attribute, value) {
  return [].slice.call(document.getElementsByTagName('*'))
    .filter(elem => elem.getAttribute(attribute) === value);
}