Wie erhalte ich Elemente nach Klasse mit JavaScript ohne getElementById?

Element nach Klasse mit JavaScript ohne getElementById abrufen

In JavaScript wird die getElementById-Methode häufig verwendet, um Elemente anhand ihrer eindeutigen ID abzurufen. Wenn Sie jedoch mit dynamisch generierten Elementen oder Elementen mit derselben ID arbeiten, ist es erforderlich, Elemente anhand ihres Klassenattributs zu finden. Während getElementByClass in modernen Browsern nativ unterstützt wird, wird es immer noch nicht in allen gängigen Browsern wie Internet Explorer unterstützt.

Verwenden einer Funktion zum Abrufen von Elementen nach Klasse

JavaScript bietet keine integrierte Methode zum Abrufen von Elementen nach Klasse. Wir können diese Einschränkung jedoch überwinden, indem wir eine Funktion verwenden, um nach Elementen basierend auf ihrem Klassenattribut zu suchen. Eine beliebte Implementierung ist die Methode von Dustin Diaz:

<code class="javascript">function getElementsByClassName(node, classname) {
  if (node.getElementsByClassName) { // native implementation available
    return node.getElementsByClassName(classname);
  } else {
    var classElements = [],
        els = node.getElementsByTagName("*"),
        elsLen = els.length,
        pattern = new RegExp("(^|\s)"+classname+"(\s|$)", "i");

    for (var i = 0, j = 0; i < elsLen; i++) {
      if ( pattern.test(els[i].className) ) {
          classElements[j] = els[i];
          j++;
      }
    }
    return classElements;
  }
}</code>

Diese Funktion verwendet einen Knoten (normalerweise das Dokumentobjekt) und einen Klassennamen als Eingabe und gibt ein Array von Elementen zurück, die der angegebenen Klasse entsprechen. Zunächst wird geprüft, ob die native Methode getElementsByClassName vorhanden ist, und wenn ja, wird sie verwendet. Andernfalls durchläuft es alle Elemente im Knoten und prüft, ob deren Klassenattribut den angegebenen Klassennamen enthält.

Integration mit dem Toggle-Skript

Sobald wir eine Funktion haben Um Elemente nach Klasse abzurufen, können wir unser Skript zum Umschalten der Sichtbarkeit ändern, um es zu verwenden:

<code class="javascript">function toggle_visibility(className) {
  var elements = getElementsByClassName(document, className),
      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>

Durch Ersetzen des Funktionsaufrufs getElementById durch die Funktion getElementsByClassName kann unser Skript jetzt die Sichtbarkeit von Elementen basierend auf ihrer Klasse umschalten Attribut. Dadurch können wir die Sichtbarkeit dynamisch generierter Elemente steuern, ohne auf eindeutige IDs angewiesen zu sein.

Das obige ist der detaillierte Inhalt vonWie erhalte ich Elemente nach Klasse mit JavaScript ohne getElementById?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!