<p data-foo="bar">

Wie können Sie das Äquivalent zu tun

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

wo querySelectorAll ist nicht verfügbar ?

Ich brauche eine native Lösung, die zumindest in IE7 funktioniert. IE6 ist mir egal.

Sie können eine Funktion schreiben, die getElementsByTagName ('*') ausführt und nur die Elemente mit dem Attribut "data-foo" zurückgibt:

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;
}

Dann,

getAllElementsWithAttribute('data-foo');

Verwenden

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

oder

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

Elemente nach Attributen zu finden. Es wird jetzt in allen relevanten Browsern (sogar IE8) unterstützt: http://caniuse.com/#search=queryselector

Ich habe ein bisschen herumgespielt und bin zu dieser groben Lösung gekommen:

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;
}

Die Verwendung ist recht einfach und funktioniert sogar in IE8:

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

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

Ich empfehle jedoch, querySelector/ Alldafür zu verwenden (und um ältere Browser zu unterstützen, verwenden Sie eine Polyfüllung ):

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

Versuchen Sie dies, es funktioniert

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

Beispiel:

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

Das funktioniert auch:

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

So:

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

Versuchen Sie dies - ich habe die obigen Antworten leicht geändert:

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;
};

Dann,

getAttributes('data-foo');

Eine kleine Änderung an der Antwort von @kevinfahy , damit das Attribut bei Bedarf nach Wert abgerufen werden kann:

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;
}

Nicht im Browser verwenden

Verwenden Sie im Browser document.querySelect('[attribute-name]').

Wenn Sie jedoch Unit-Tests durchführen und Ihr verspotteter Dom über eine Flakey-QuerySelector-Implementierung verfügt, reicht dies aus.

Dies ist die Antwort von @ kevinfahy, die nur auf ES6-Fettpfeilfunktionen reduziert wurde und die HtmlCollection möglicherweise auf Kosten der Lesbarkeit in ein Array konvertiert.

Es funktioniert also nur mit einem ES6-Transpiler. Ich bin mir auch nicht sicher, wie performant es mit vielen Elementen sein wird.

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

Und hier ist eine Variante, die ein Attribut mit einem bestimmten Wert erhält

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