Heim > Artikel > Web-Frontend > Wie ruft man Elemente nach Klasse in JavaScript ab, wenn getElementByClass nicht unterstützt wird?
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!