QuerySelector()
Grundsätzlich wird querySelector() mit „this.template“ verwendet, das die Elemente abruft, die in einer bestimmten Vorlage vorhanden sind. Wenn mehrere Elemente vorhanden sind, wird nur das erste Element berücksichtigt. Null wird zurückgegeben, wenn das angegebene Element nicht in der Vorlage vorhanden ist. Es nimmt den Selektor als Parameter. Dies kann das Klassennamen-Tag sein. Die ID wird nicht unterstützt. In einigen Fällen haben Sie dieselben Klassen, aber unterschiedliche Werte. In diesem Szenario müssen wir den Datenrecid verwenden, der die Elemente basierend auf dem Wert abruft.
Syntax:
Sehen wir uns an, wie man den Selektor innerhalb von querySelector() angibt.
- this.template.querySelector(Selektor)
- this.template.querySelector(‘[data-recid=“value“]’)
Beispiel: Wenn der Selektor das Tag h1 ist, sollten Sie ihn als „h1“ angeben.
1. Alle Beispiele verwenden diese „meta.xml“-Datei. Wir werden dies nicht in jedem Beispiel angeben. Die LWC-Komponenten können Ihrer Datensatzseite, App-Seite oder Homepage hinzugefügt werden.
„1,0“ ?>
2. In allen Beispielen, die wir in diesem Handbuch besprechen werden, wird Logic als „js“-Code bereitgestellt. Danach geben wir den Screenshot an, der den gesamten „js“-Code enthält.
Beispiel 1:
Zuerst erstellen wir die Tags h1, div, span und Lightning-Button mit etwas Text in der HTML-Datei. Außerdem erstellen wir eine Schaltfläche, die beim Klicken die vorherigen Elemente erhält. In der „js“-Datei geben wir über this.template.querySelector() den innerText aller dieser vier Elemente zurück.
erstesBeispiel.html
< h1 > Hallo LinuxHint. Ich bin in h1 < / h1 >
< div > Hallo LinuxHint. Ich bin in div < / div >
< Spanne > Hallo LinuxHint. Ich bin in Span < / Spanne >
Hallo LinuxHint. Ich bin im Lightning-Input < / Blitzeingang>
< / Blitzkarte>
< / Vorlage>
firstExample.js
beschaffe die Einzelheiten ( ) {// Den Innentext des h1-Tags abrufen.
Konsole. Protokoll ( Das . Vorlage . querySelector ( 'h1' ) . innerText ) ;
// Den Innentext des div-Tags abrufen.
Konsole. Protokoll ( Das . Vorlage . querySelector ( 'div' ) . innerText ) ;
// Den Innentext des Span-Tags abrufen.
Konsole. Protokoll ( Das . Vorlage . querySelector ( 'Spanne' ) . innerText ) ;
// Den Innentext von Lightning-Input abrufen.
Konsole. Protokoll ( Das . Vorlage . querySelector ( 'Blitzeingang' ) . innerText ) ;
}
Gesamter Code:
Ausgabe:
Fügen Sie diese Komponente zur Seite „Datensatz“ eines beliebigen Objekts hinzu (wir haben sie zur Datensatzseite des Kontos hinzugefügt). Sehen Sie sich dieses Fenster an und gehen Sie zur Registerkarte „Konsole“.
Klicken Sie nun auf die Schaltfläche „Details abrufen“. Danach sehen Sie, dass der innerText für alle Elemente auf der Konsole angezeigt wird.
Beispiel 2:
Nutzen Sie die in Beispiel 1 besprochene Komponente. Geben Sie die beiden Elemente mit dem „h1“-Tag in der HTML-Komponente an und verwenden Sie querySelector() in der „js“-Datei, um den innerText von „h1“ abzurufen.
erstesBeispiel.html
< h1 > Hallo LinuxHint. Ich bin Erster h1 < / h1 >
< h1 > Hallo LinuxHint. Ich bin Zweiter h1 < / h1 >
< / Blitzkarte>
< / Vorlage>
firstExample.js
beschaffe die Einzelheiten ( ) {// Den Innentext des h1-Tags abrufen.
Konsole. Protokoll ( Das . Vorlage . querySelector ( 'h1' ) . innerText ) ;
}
Gesamter Code:
Ausgabe:
Es gibt zwei Elemente mit demselben Tag. Daher wählt querySelector() nur das erste Element aus. Wenn Sie auf die Schaltfläche „Details abrufen“ klicken, sehen Sie das erste „h1“ und der Innentext wird in der Konsole zurückgegeben.
Beispiel 3:
Wir können querySelector() auch in einer Variablen speichern und diese Variable verwenden, um den innerText abzurufen. Erstellen wir ein Span-Tag mit etwas Text und geben den innerText auf der Konsole zurück, indem wir ihn in einer Variablen speichern.
erstesBeispiel.html
< Spanne > Hallo LinuxHint. Ich bin Span < / Spanne >< br >
< / Blitzkarte>
< / Vorlage>
firstExample.js
beschaffe die Einzelheiten ( ) {// Den Innentext des Span-Tags abrufen.
lassen Sie ihn = Das . Vorlage . querySelector ( 'Spanne' ) . innerText
Konsole. Protokoll ( Er ) ;
}
Gesamter Code:
Ausgabe:
Beispiel 4:
In diesem Beispiel erstellen wir eine Schaltfläche und geben Text ein (lightning-input), der den Betreff als Zeichenfolge übernimmt. Wir übergeben den „Lightning-Input“ als Selektor an die Methode querySelector(). Es wird der Variablen „computer_related“ zugewiesen. Beim Klicken auf diese Schaltfläche wird der Wert angezeigt, der in dieser Variablen vorhanden ist.
zweites Beispiel.html
< Center >
< P > Ihr Betreff ist: < B > {computer_bezogene} < / B > < / P >
< / Center >
< / Blitzkarte>
< / Vorlage>
secondExample.js
computer_bezogenhandleSubject ( Ereignis ) {
Das . computer_bezogen = Das . Vorlage . querySelector ( „Blitzeingang“ ) . Wert ;
}
Gesamter Code:
Ausgabe:
Beispiel 5:
Hier nutzen wir den Datenrecid. Erstellen wir eine Schaltfläche mit drei Span-Tags mit Recid als „Span1“, „Span2“ und „Span3“ in der HTML-Datei. Wählen Sie den ersten Span aus, indem Sie „Span1“ an data-recid im querySelector() übergeben.
drittes Beispiel.html
< Spanne Datenrecid = „Span1“ > Ich bin in Span-1 < / Spanne >< br >
< Spanne Datenrecid = „Span2“ > Ich bin in Span-2 < / Spanne >< br >
< Spanne Datenrecid = „Span3“ > Ich bin in Span-3 < / Spanne >< br >
< / Blitzkarte>
< / Vorlage>
ThirdExample.js
beschaffe die Einzelheiten ( ) {// Den innerenText von Span1 abrufen
Konsole. Protokoll ( Das . Vorlage . querySelector ( '[data-recid='Span1']' ) . innerText ) ;
}
Gesamter Code:
Ausgabe:
Abschluss
Wir haben gelernt, wie man querySelector() verwendet, um auf die DOM-Elemente zuzugreifen. Der querySelector() verwendete „this.template“, um die Elemente in der aktuellen Vorlage auszuwählen. Es kann möglich sein, dies in einer Variablen zu speichern oder direkt zu verwenden. Beide werden anhand von Beispielen erwähnt. Außerdem haben wir ein Beispiel bereitgestellt, das mehrere Elemente enthält. In diesem Fall gibt querySelector() das erste Element zurück.