Comment récupérer des éléments par attributs dans les navigateurs Pre-querySelectorAll ?

Récupération d'éléments par attributs dans les navigateurs Pre-querySelectorAll

Les navigateurs antérieurs à IE9 ne disposent pas de la puissante méthode querySelectorAll(), ce qui pose un défi lorsque vous devez récupérer des éléments en fonction de attributs spécifiques. Pour résoudre ce problème, explorons une solution native qui fonctionne dans IE7 et versions ultérieures.

Utilisation de getElementsByTagName et de la vérification des attributs

Nous pouvons simuler la fonctionnalité de querySelectorAll en tirant parti de la méthode getElementsByTagName. Créons une fonction appelée getAllElementsWithAttribute pour rechercher des éléments avec un attribut particulier :

<code class="js">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 has the attribute. Add it to the array.
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}</code>

Cette fonction prend un nom d'attribut comme argument et parcourt tous les éléments du document. Pour chaque élément, il vérifie si l'attribut spécifié existe et n'est pas nul. Si tel est le cas, l'élément est ajouté à un tableau d'éléments correspondants.

Exemple d'utilisation

Pour récupérer tous les éléments avec l'attribut data-foo, appelez simplement :

<code class="js">getAllElementsWithAttribute('data-foo');</code>

Cette approche fournit une solution native pour récupérer des éléments par attributs dans les navigateurs dépourvus de querySelectorAll, garantissant la compatibilité avec IE7 et supérieur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!