Heim > Web-Frontend > js-Tutorial > Wie ruft man Elemente nach Klasse in JavaScript ab, wenn getElementByClass nicht unterstützt wird?

Wie ruft man Elemente nach Klasse in JavaScript ab, wenn getElementByClass nicht unterstützt wird?

Barbara Streisand
Freigeben: 2024-11-07 03:07:02
Original
267 Leute haben es durchsucht

How do you retrieve elements by class in JavaScript when getElementByClass is not supported?

Elemente nach Klasse in JavaScript abrufen

In JavaScript wird die getElementById-Methode häufig verwendet, um Elemente anhand ihrer eindeutigen Bezeichner abzurufen. Einige Szenarien erfordern jedoch das Abrufen von Elementen basierend auf ihren Klassennamen, und da JavaScript getElementByClass nicht nativ unterstützt, ist ein alternativer Ansatz erforderlich.

Dustin Diaz-Methode:

Eine Methode zum Abrufen von Elementen nach Klasse ist die von Dustin Diaz erstellte Funktion:

<code class="javascript">function getElementByClass(searchClass, node) {
  if (node == null) {
    node = document;
  }

  var classElements = [];
  var els = node.getElementsByTagName("*");
  var elsLen = els.length;
  var pattern = new RegExp("(^|\s)" + searchClass + "(\s|$)", "i");
  var i;
  var j = 0;

  for (i = 0; i < elsLen; i++) {
    if (pattern.test(els[i].className)) {
      classElements[j] = els[i];
      j++;
    }
  }

  return classElements;
}</code>
Nach dem Login kopieren

Verwendung:

Diese Funktion kann in Verbindung mit dem Toggle-Skript verwendet werden in der Frage angegeben:

<code class="javascript">function toggle_visibility(className) {
  var elements = getElementByClass(className, document);
  var n = elements.length;

  for (var i = 0; i < n; i++) {
    var e = elements[i];

    if (e.style.display == "block") {
      e.style.display = "none";
    } else {
      e.style.display = "block";
    }
  }
}</code>
Nach dem Login kopieren

Native Methode:

In neueren Versionen wichtiger Browser wie Firefox, Chrome, IE und Opera wird die Methode getElementsByClassName unterstützt nativ. Dies vereinfacht den Prozess des Abrufens von Elementen nach Klasse:

<code class="javascript">function getElementsByClassName(className, node) {
  if (node.getElementsByClassName) {
    return node.getElementsByClassName(className);
  } else {
    // Use Dustin Diaz method as fallback
    return getElementByClass(className, node);
  }
}</code>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie ruft man Elemente nach Klasse in JavaScript ab, wenn getElementByClass nicht unterstützt wird?. 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