Comment sélectionner des éléments par attribut lorsque querySelectorAll est manquant ?

Comment récupérer des éléments par attribut lorsque querySelectorAll est indisponible

Malgré sa prévalence, la méthode querySelectorAll peut ne pas être universellement accessible. Par exemple, les navigateurs plus anciens comme IE7 ne disposent pas de cette fonctionnalité. Cependant, il est possible d'obtenir des résultats similaires en utilisant une approche native qui garantit la compatibilité avec IE7.

Considérez le scénario suivant :

<p data-foo="bar"></p>

En général, on utiliserait querySelectorAll pour récupérer des éléments basés sur leurs attributs :

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

Cependant, en l'absence de querySelectorAll, une solution alternative est requise.

Pour atteindre nativement la même fonctionnalité, une fonction JavaScript peut être construite :

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) {
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

Cette fonction parcourt l'ensemble du document, récupérant tous les éléments avec un attribut spécifique. En l'invoquant :

getAllElementsWithAttribute('data-foo');

on peut récupérer efficacement des éléments avec l'attribut "data-foo". Cette solution est à la fois complète et compatible avec IE7, permettant l'accès aux éléments par attribut même dans les navigateurs dépourvus de querySelectorAll.

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!