Warum sollte man in JavaScript „getElementsByClassName“ anstelle von „getElementById“ wählen?

Elemente nach Klasse abrufen: Eine Alternative zu getElementById in JavaScript

Im Bereich der Webentwicklung ist die getElementById-Methode führend, wenn es darum geht um auf bestimmte Elemente innerhalb eines HTML-Dokuments zuzugreifen. Es gibt jedoch Fälle, in denen sich die Nutzung von getElementByClass als geeigneter erweisen kann.

Mit dem Aufkommen moderner Browser wie Firefox und Chrome hat sich getElementByClass zu einer nativ unterstützten Funktion entwickelt. Für Browser wie Internet Explorer ist jedoch eine Problemumgehung erforderlich, um deren Funktionalität zu emulieren.

Erstellen einer benutzerdefinierten getElementsByClass-Funktion

Dustin Diaz, ein renommierter JavaScript-Experte, hat sie entwickelt Eine geniale Lösung, um den Mangel an nativer getElementByClass-Unterstützung zu beheben. Sein Ansatz besteht darin, eine benutzerdefinierte Funktion zu erstellen, die ihr Verhalten nachahmt:

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

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

Integration der Funktion mit dem Toggle-Skript

Um diese benutzerdefinierte Funktion nahtlos mit dem bereitgestellten Toggle zu integrieren Skript ersetzen Sie einfach die getElementById-Aufrufe durch getElementsByClassName, wie gezeigt unten:

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

Fazit

Durch die Implementierung dieser benutzerdefinierten getElementsByClass-Funktion können Sie das Klassenattribut nutzen, um die Sichtbarkeit von Elementen umzuschalten, selbst wenn getElementByClass nativ unterstützt wird fehlt. Mit dieser Lösung können Entwickler die Vorteile der klassenbasierten Elementidentifizierung nutzen und so ein konsistentes Verhalten über verschiedene Browser hinweg sicherstellen.

Das obige ist der detaillierte Inhalt vonWarum sollte man in JavaScript „getElementsByClassName“ anstelle von „getElementById“ wählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!