Element basierend auf dem Klassennamen in JavaScript abrufen
-
Holen Sie sich ein Element basierend auf seinem CSS-Klassennamen mit der Javascript-Funktion
.getElementsByClassName() -
Holen Sie sich das Element basierend auf dem CSS-Klassennamen mit der Javascript-Funktion
.querySelector() -
Holen Sie sich mehrere HTML-Elemente basierend auf dem CSS-Klassennamen mit der Funktion
.querySelectorAll()
Möglicherweise müssen wir ein Element aus dem DOM abfragen, um seinen Stil zur Laufzeit dynamisch zu ändern. Javascript hat verschiedene eingebaute Funktionen, die unseren Zweck erfüllen können. Das bekannteste davon ist das .getElementById(). Aber .getElementById() gibt nur ein Element zurück, das erste Element, dessen HTML id mit dem an die Funktion übergebenen Parameter übereinstimmt. Der Ansatz der Funktion .getElementById() kann umständlich sein, wenn wir die Stile mehrerer Elemente gleichzeitig ändern möchten. Dabei werden den HTML-Elementen mehrere IDs hinzugefügt und nacheinander abgefragt. Können wir es besser machen? Der folgende Abschnitt erläutert Möglichkeiten zum Abrufen von Elementen aus dem DOM basierend auf seinem CSS-Klassennamen.
Holen Sie sich ein Element basierend auf seinem CSS-Klassennamen mit der Javascript-Funktion .getElementsByClassName()
Javascript hat eine eingebaute Methode .getElementsByClassName(), die es uns ermöglicht, mehr als ein HTML-Element basierend auf ihrem CSS-Klassennamen abzufragen. Es ist eine Methode, die in der Schnittstelle Document verfügbar ist und normalerweise wie document.getElementsByClassName() darauf verwendet wird. Die Funktion durchsucht das Dokument (das DOM) nach allen Elementen mit dem CSS-Klassennamen, der in den Funktionsparametern angegeben ist.
Gemäß den MDN Docs gibt die Funktion die Live-Sammlung von HTML-Elementen zurück. Das bedeutet, dass die von der Funktion getElementsByClassName() zurückgegebenen Elemente zur Laufzeit geändert werden können, wenn Codestücke vorhanden sind, die die DOM-Elemente direkt ändern.
getElementsByClassName-Syntax
let el = document.getElementsByClassName(cssClassName);
Der cssClassName sollte ein String sein, der die gewünschte CSS-Klasse repräsentiert. Wenn es mehrere CSS-Klassen gibt, können wir diese durch Leerzeichen getrennt erwähnen (wie css-class1 css-class2 etc.)
getElementsByClassName-Argumente
Die Funktion benötigt einen Parameter, den CSS-Klassennamen. In einigen Fällen benötigen wir möglicherweise eine Kombination von CSS-Klassennamen, um ein Element auszuwählen. In solchen Szenarien können wir mehrere CSS-Klassennamen durch Leerzeichen getrennt übergeben.
Beispiel
Lassen Sie uns auf den folgenden Codeabschnitt verweisen, um die Funktionsweise zu verstehen.
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
window.onload = function() {
let els = document.getElementsByClassName('bold');
console.log(els);
}
Ausgabe:
HTMLCollection(2) [div.bold, div.bold]
Der obige Code protokolliert eine Sammlung von HTML-Elementen in der Konsole. Die Google Chrome-Konsole zeigt eine Ausgabe wie oben gezeigt an. Das Schreiben des Codes document.getElementsByClassName("bold") in das window.onload stellt sicher, dass der Code erst ausgeführt wird, nachdem der HTML-Code gerendert wurde. Beachten Sie, dass im Gegensatz zur Funktion .getElementById() die Funktion getElementsByClassName() ein Array von HTML-Elementen erneut ausführt. Wir können nicht direkt an dem Element arbeiten, das von getElementsByClassName() ausgegeben wird, wie wir es für .getElementById() tun. Wenn wir den Stil bold im obigen Code für das erste Element auf normal ändern möchten, können wir den folgenden Code verwenden.
let els = document.getElementsByClassName('bold');
els[0].style.fontWeight = '100';
Holen Sie sich das Element basierend auf dem CSS-Klassennamen mit der Javascript-Funktion .querySelector()
getElementsByClassName() ist eine weit verbreitete Methode und beschränkt sich darauf, HTML-Elemente anhand ihres CSS-Klassennamens auszuwählen. Javascript hat eine weitere eingebaute Funktion, die in der Document-Schnittstelle verfügbar ist, den querySelector(), der allgemeinerer Natur ist. Es kann zum Abfragen von Elementen basierend auf seinem CSS-Klassennamen verwendet werden. Diese Funktionalität ist nur eine Teilmenge der tatsächlichen Fähigkeiten von querySelector(). Die Javascript-Funktion querySelector() ist vergleichbar mit .getElementById(), da sie das erste Element zurückgibt, das den in seinen Argumenten übergebenen Auswahlparameter erfüllt.
.querySelector()-Syntax
Die Syntax ist ähnlich der von .getElementsByClassName().
let el = document.querySelector('.cssQuerySelector');
.querySelector() Parameter
Der querySelector() akzeptiert einen String-Datentyp als Parameter, der den css query selector repräsentiert. Auf die gleiche Weise verwenden wir die CSS-Selektoren, um bestimmte Stile auf die ausgewählten Elemente anzuwenden. Es enthält #<id>, um ein HTML-Element anhand seiner ID auszuwählen, .<css-class-name>, um ein Element anhand seines CSS-Klassennamens auszuwählen, und sogar eine Kombination aus beiden, wie #<id>.<css-class-name>, kann verwendet werden, um ein Element auszuwählen.
Beispiel
Der folgende Code erklärt die Verwendung von .querySelector().
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
window.onload = function() {
let els = document.querySelector('.bold');
console.log(els);
}
Ausgabe:
<div class="bold">Element 1: Bolder text</div>
Die Ausgabe ist so, wie sie in der Google Chrome-Browserkonsole angezeigt wird. Beachten Sie, dass die Funktion .querySelector() nur ein HTML-Element zurückgibt, im Gegensatz zu .getElementsByClassName(), die eine Sammlung davon zurückgibt. Wenn wir es also verarbeiten sollen, können wir die Änderungen direkt darauf anwenden. Wenn wir beispielsweise die Schriftart des ausgewählten Elements in normal ändern möchten, können wir dies mit dem folgenden Code erreichen.
window.onload = function() {
let els = document.querySelector('.bold');
els.style.fontWeight = '100';
}
Holen Sie sich mehrere HTML-Elemente basierend auf dem CSS-Klassennamen mit der Funktion .querySelectorAll()
Wie der Name schon sagt, gibt die Funktion .querySelectorAll() in Javascript eine Sammlung von HTML-Elementen zurück, die die Auswahlkriterien erfüllen. Genau wie .querySelector() akzeptiert querySelectorAll() den CSS-Query-Selektor-String als Parameter. Es gibt eine statische Liste von HTML-Elementen zurück, die nicht live sind. Es verhält sich ähnlich wie .getElementsByClassName(), da es mehrere darauf basierend abgefragte HTML-Elemente zurückgibt, aber nicht darauf beschränkt ist. Genau wie querySelector() können wir .querySelectorAll() verwenden, um Elemente basierend auf ihrer ID oder den CSS-Klassennamen abzurufen. Genauso wie wir Elemente mit den Query Selectors in den CSS-Stylesheets auswählen.
.querySelectorAll()-Syntax
document.querySelectorAll('<css-selector-string>');
.querySelectorAll() Parameter
Die Funktion akzeptiert eine CSS-AbfrageZeichenkette als einzigen Eingabeparameter. Um Elemente basierend auf der ID auszuwählen, müssen wir den Parameter #<id> verwenden. Und für die Auswahl basierend auf dem CSS-Klassennamen sollte es .<css-class-name> lauten. Für die Kombination der beiden können wir das Format #<id>.<css-class-name> verwenden.
Beispiel
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
let els = document.querySelectorAll('.bold');
console.log(els);
Ausgabe:
NodeList(2)
0: div.bold
1: div.bold
Die Ausgabe ist ein Array vom Typ Knotenliste. Wir können diese Knoten weiter verarbeiten, indem wir sie aus dem Array auswählen und ihre CSS-Klassenwerte gemäß den Anforderungen ändern. Ein Beispiel ist wie im folgenden Code dargestellt. Die Zeile els[0].style.fontWeight = "100"; macht den ersten ausgewählten HTML-Knoten zu normaler Schriftstärke.
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
let els = document.querySelectorAll('.bold');
els[0].style.fontWeight = '100';
console.log(els);
Ausgabe:
NodeList(2)
0: div.bold
1: div.bold