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

Vous pourriez écrire une fonction qui exécute getElementsByTagName('*'), et ne renvoie que les éléments ayant 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');

Answer 2

Utilisez

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

ou

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

pour trouver des éléments par attribut. Elle est désormais prise en charge par tous les navigateurs concernés (même IE8) : http://caniuse.com/#search=queryselector

Answer 3

J'ai joué un peu et j'ai fini par trouver cette solution grossière :

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 recommander à utiliser querySelector / All pour cela (et pour prendre en charge les navigateurs plus anciens, utilisez un fichier polyfill ):

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

Answer 4

Essayez ceci, ça marche

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

exemple :

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

Answer 5

Ça marche aussi :

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

Donc :

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