Maison > interface Web > js tutoriel > Comment récupérer des éléments par attributs dans les navigateurs Pre-querySelectorAll ?

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

Mary-Kate Olsen
Libérer: 2024-10-31 20:22:01
original
419 Les gens l'ont consulté

How to Retrieve Elements by Attributes in Pre-querySelectorAll Browsers?

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal