Obtenir des éléments par attribut lorsque querySelectorAll n'est pas disponible sans utiliser de bibliothèques ?

Question

<p data-foo="bar">

Comment pouvez-vous faire l'équivalent de

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

où querySelectorAll es non disponible ?

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

Answer 1

Essayez ceci - j'ai légèrement modifié 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');

Answer 2

Une petite modification sur @kevinfahy's respuesta pour permettre de récupérer l'attribut par sa valeur si nécessaire :

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

Answer 3

Ne pas utiliser dans le navigateur

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

Mais si vous effectuez des tests unitaires et que votre domaine simulé possède une implémentation de querySelector bancale, cela fera l'affaire.

C'est la réponse de @kevinfahy, juste élaguée pour être un peu avec les fonctions flèches de ES6 et en convertissant la HtmlCollection en un tableau au prix de la lisibilité peut-être.

Il ne fonctionnera donc qu'avec un transpilateur ES6. De plus, je ne suis pas sûr de la performance qu'il aura avec un grand nombre d'éléments.

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

Et voici une variante qui permettra d'obtenir un attribut avec une valeur spécifique

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

Answer 4

C'est la façon la plus simple d'obtenir la valeur de l'attribut pour moi.

<p id="something" data-foo="your value">
<script type="text/javascript">
    alert(document.getElementById('something').getAttribute('data-foo'));
</script>

Réponse tardive de deux ans avec l'espoir d'aider les futurs adeptes.