<p data-foo="bar">

Comment pouvez-vous faire l'équivalent de

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

où querySelectorAll n'est pas disponible ?

J'ai besoin d'une solution native qui fonctionne au moins dans IE7. Je me fiche d'IE6.

Vous pouvez écrire une fonction qui exécute getElementsByTagName ('*') et ne renvoie que les éléments avec un attribut "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;
}

Ensuite,

getAllElementsWithAttribute('data-foo');

Utilisation

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

ou

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

pour rechercher des éléments par attribut. Il est désormais pris en charge dans tous les navigateurs pertinents (même IE8): http://caniuse.com/#search=queryselector

J'ai joué un peu et j'ai fini avec cette solution brute:

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

L'utilisation est assez simple et fonctionne même dans IE8:

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

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

Mais je recommande d'utiliser querySelector/ Allpour cela (et pour prendre en charge les navigateurs plus anciens, utilisez un polyfill ):

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

Essayez ça ça marche

document.querySelector ('[attribut = "valeur"]')

exemple :

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

Cela fonctionne aussi:

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

Alors:

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

Essayez ceci - j'ai légèrement changé les réponses ci-dessus:

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

Ensuite,

getAttributes('data-foo');

Une petite modification sur la réponse de @kevinfahy , pour permettre d'obtenir l'attribut par valeur si besoin:

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

Ne pas utiliser dans le navigateur

Dans le navigateur, utilisez document.querySelect('[attribute-name]').

Mais si vous faites des tests unitaires et que votre dom fictif a une implémentation floconneuse de querySelector, cela fera l'affaire.

C'est la réponse de @ kevinfahy, juste réduite pour être un peu avec les fonctions de grosse flèche ES6 et en convertissant HtmlCollection en un tableau au détriment de la lisibilité peut-être.

Cela ne fonctionnera donc qu'avec un transpileur ES6. De plus, je ne sais pas à quel point ce sera performant avec beaucoup d'éléments.

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

Et voici une variante qui obtiendra un attribut avec une valeur spécifique

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