Heim  >  Artikel  >  Web-Frontend  >  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
Barbara StreisandOriginal
2024-11-07 03:07:02181Durchsuche

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>

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>

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>

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!

Stellungnahme:
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