QuerySelector()
Kortom, querySelector() wordt gebruikt met “this.template” dat de elementen ophaalt die aanwezig zijn in een bepaalde sjabloon. Als er meerdere elementen zijn, wordt alleen rekening gehouden met het eerste element. Null wordt geretourneerd als het opgegeven element niet in de sjabloon bestaat. Het neemt de selector als parameter. Dit kan de classname-tag zijn. De ID wordt niet ondersteund. In sommige gevallen heb je dezelfde klassen maar verschillende waarden. In dit scenario moeten we de data-recid gebruiken die de elementen ophaalt op basis van de waarde.
Syntaxis:
Laten we eens kijken hoe we de selector in de querySelector() kunnen specificeren.
- this.template.querySelector(selector)
- this.template.querySelector(‘[data-recid=”waarde”]’)
Bijvoorbeeld: als de selector de tag h1 is, moet u deze specificeren als “h1”.
1. Alle voorbeelden gebruiken dit “meta.xml”-bestand. We zullen dit niet bij elk voorbeeld specificeren. De LWC-componenten kunnen worden toegevoegd aan uw recordpagina, apppagina of startpagina.
'1,0' ?>
2. In alle voorbeelden die we in deze handleiding gaan bespreken, wordt logica gegeven als de 'js' -code. Daarna specificeren we de schermafbeelding die de volledige “js” -code bevat.
Voorbeeld 1:
Eerst maken we de tags h1, div, span en bliksemknop met wat tekst in het HTML-bestand. We maken ook een knop die de voorgaande elementen ophaalt wanneer erop wordt geklikt. In het “js”-bestand retourneren we de innerText van al deze vier elementen via this.template.querySelector().
eersteVoorbeeld.html
< h1 > Hallo LinuxHint. Ik zit in h1 < / h1 >
< div > Hallo LinuxHint. Ik zit in div < / div >
< span > Hallo LinuxHint. Ik ben binnen bereik < / span >
Hallo LinuxHint. Ik zit in blikseminvoer < / blikseminvoer>
< / bliksem-kaart>
< / sjabloon>
eersteVoorbeeld.js
krijg details ( ) {// Haal de binnentekst van de h1-tag op.
troosten. loggen ( dit . sjabloon . querySelector ( 'h1' ) . innerlijkeTekst ) ;
// Haal de binnentekst van de div-tag op.
troosten. loggen ( dit . sjabloon . querySelector ( 'div' ) . innerlijkeTekst ) ;
// Haal de innerlijke tekst van de span-tag op.
troosten. loggen ( dit . sjabloon . querySelector ( 'span' ) . innerlijkeTekst ) ;
// Haal de innerlijke tekst van blikseminvoer op.
troosten. loggen ( dit . sjabloon . querySelector ( 'bliksem-input' ) . innerlijkeTekst ) ;
}
Volledige code:
Uitgang:
Voeg deze component toe aan de “Record”-pagina van een willekeurig object (we hebben deze toegevoegd aan de accountrecord-pagina). Inspecteer dit venster en ga naar het tabblad “Console”.
Klik nu op de knop 'Details ophalen'. Daarna zult u zien dat de innerText voor alle elementen op de console wordt weergegeven.
Voorbeeld 2:
Gebruik de component die wordt besproken in voorbeeld 1. Specificeer de twee elementen met de tag “h1” in de HTML-component en gebruik de querySelector() in het bestand “js” om de innerText van “h1” te verkrijgen.
eersteVoorbeeld.html
< h1 > Hallo LinuxHint. Ik ben eerste h1 < / h1 >
< h1 > Hallo LinuxHint. Ik ben tweede h1 < / h1 >
< / bliksem-kaart>
< / sjabloon>
eersteVoorbeeld.js
krijg details ( ) {// Haal de binnentekst van de h1-tag op.
troosten. loggen ( dit . sjabloon . querySelector ( 'h1' ) . innerlijkeTekst ) ;
}
Volledige code:
Uitgang:
Er zijn twee elementen met dezelfde tag. De querySelector() selecteert dus alleen het eerste element. Wanneer u op de knop “Get Details” klikt, ziet u de eerste “h1” en wordt de innerlijke tekst teruggegeven in de console.
Voorbeeld 3:
We kunnen de querySelector() ook in een variabele opslaan en deze variabele gebruiken om de innerText te verkrijgen. Laten we een span-tag maken met wat tekst en de innerText op de console retourneren door deze in een variabele op te slaan.
eersteVoorbeeld.html
< span > Hallo LinuxHint. Ik ben span < / span >< br >
< / bliksem-kaart>
< / sjabloon>
eersteVoorbeeld.js
krijg details ( ) {// Haal de innerlijke tekst van de span-tag op.
laat hem = dit . sjabloon . querySelector ( 'span' ) . innerlijkeTekst
troosten. loggen ( Hij ) ;
}
Volledige code:
Uitgang:
Voorbeeld 4:
In dit voorbeeld maken we een knop en voeren we tekst in (blikseminvoer) die het onderwerp als string gebruikt. We geven de “lightning-input” door als selector voor de methode querySelector(). Het wordt toegewezen aan de variabele ‘computer_related’. Als u op deze knop klikt, wordt de waarde weergegeven die in deze variabele aanwezig is.
tweedeVoorbeeld.html
< centrum >
< P > Je onderwerp is: < B > {computer gerelateerd} < / B > < / P >
< / centrum >
< / bliksem-kaart>
< / sjabloon>
tweedeVoorbeeld.js
computer gerelateerdhandvatOnderwerp ( evenement ) {
dit . computer gerelateerd = dit . sjabloon . querySelector ( 'blikseminvoer' ) . waarde ;
}
Volledige code:
Uitgang:
Voorbeeld 5:
Hier gebruiken we de data-recid. Laten we een knop maken met drie span-tags met recid als “Span1”, “Span2” en “Span3” in het HTML-bestand. Selecteer de eerste reeks door 'Span1' door te geven aan de data-recid in querySelector().
derdeVoorbeeld.html
< span data-recid = 'Span1' > Ik zit in span-1 < / span >< br >
< span data-recid = 'Spanje2' > Ik zit in span-2 < / span >< br >
< span data-recid = 'Spanje3' > Ik zit in span-3 < / span >< br >
< / bliksem-kaart>
< / sjabloon>
derdeVoorbeeld.js
krijg details ( ) {// Haal de innerText van Span1 op
troosten. loggen ( dit . sjabloon . querySelector ( '[data-recid = 'Span1']' ) . innerlijkeTekst ) ;
}
Volledige code:
Uitgang:
Conclusie
We hebben geleerd hoe we de querySelector() kunnen gebruiken om toegang te krijgen tot de DOM-elementen. De querySelector() gebruikte “this.template” om de elementen in de huidige sjabloon te selecteren. Het kan mogelijk zijn om dit in een variabele op te slaan of direct te gebruiken. Beide worden vermeld met voorbeelden. We hebben ook een voorbeeld gegeven dat meerdere elementen bevat. In dit geval retourneert querySelector() het eerste element.