Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie wähle ich Elemente nach Attribut aus, wenn querySelectorAll fehlt?

Patricia Arquette
Freigeben: 2024-10-30 00:32:29
Original
110 Leute haben es durchsucht

How to Select Elements by Attribute When querySelectorAll is Missing?

So rufen Sie Elemente nach Attribut ab, wenn querySelectorAll nicht verfügbar ist

Trotz ihrer Verbreitung ist die Methode querySelectorAll möglicherweise nicht allgemein zugänglich. Ältere Browser wie IE7 verfügen beispielsweise nicht über diese Funktionalität. Es ist jedoch möglich, mit einem nativen Ansatz, der die Kompatibilität mit IE7 gewährleistet, ähnliche Ergebnisse zu erzielen.

Stellen Sie sich das folgende Szenario vor:

<p data-foo="bar"></p>
Nach dem Login kopieren

Typischerweise würde man querySelectorAll verwenden, um Elemente basierend auf abzurufen ihre Attribute:

document.querySelectorAll('[data-foo]')
Nach dem Login kopieren

Wenn jedoch querySelectorAll nicht vorhanden ist, ist eine alternative Lösung erforderlich.

Um die gleiche Funktionalität nativ zu erreichen, kann eine JavaScript-Funktion erstellt werden:

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;
}
Nach dem Login kopieren

Diese Funktion durchläuft das gesamte Dokument und ruft alle Elemente mit einem bestimmten Attribut ab. Durch den Aufruf:

getAllElementsWithAttribute('data-foo');
Nach dem Login kopieren

kann man effektiv Elemente mit dem „data-foo“-Attribut abrufen. Diese Lösung ist sowohl umfassend als auch mit IE7 kompatibel und ermöglicht den Zugriff auf Elemente nach Attributen auch in Browsern ohne querySelectorAll.

Das obige ist der detaillierte Inhalt vonWie wähle ich Elemente nach Attribut aus, wenn querySelectorAll fehlt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!