QuerySelector()
Alapvetően a querySelector() a „this.template”-hez használatos, amely lekéri az adott sablonban található elemeket. Ha több elem is van, akkor csak az első elemet veszi figyelembe. Null értéket ad vissza, ha a megadott elem nem létezik a sablonban. Paraméternek veszi a választót. Ez lehet az osztálynév címke. Az azonosító nem támogatott. Egyes esetekben ugyanazok az osztályok vannak, de eltérőek az értékek. Ebben a forgatókönyvben a data-recidet kell használnunk, amely az értékek alapján kapja meg az elemeket.
Szintaxis:
Nézzük meg, hogyan kell megadni a választót a querySelector()-ban.
- this.template.querySelector(selector)
- this.template.querySelector(‘[data-recid=”value”]’)
Például: ha a választó a h1 címke, akkor „h1”-ként kell megadnia.
1. Az összes példa ezt a „meta.xml” fájlt használja. Ezt nem minden példában határozzuk meg. Az LWC összetevők hozzáadhatók a rekordoldalhoz, az alkalmazásoldalhoz vagy a kezdőlaphoz.
'1.0' ?>
2. Az ebben az útmutatóban tárgyalt összes példában a Logic „js” kódként szerepel. Ezt követően megadjuk a képernyőképet, amely tartalmazza a teljes „js” kódot.
1. példa:
Először létrehozzuk a h1, div, span és lightning-button címkéket a HTML-fájl szövegével. Ezenkívül létrehozunk egy gombot, amely kattintáskor megkapja az előző elemeket. A „js” fájlban mind a négy elem innerTextjét adjuk vissza a this.template.querySelector() segítségével.
firstExample.html
< h1 > Hello LinuxHint. h1-ben vagyok < / h1 >
< div > Hello LinuxHint. Div.-ban vagyok < / div >
< span > Hello LinuxHint. spanban vagyok < / span >
Hello LinuxHint. Villámbemenetben vagyok < / villámbemenet>
< / villámkártya>
< / sablon>
firstExample.js
getDetails ( ) {// A h1 címke belső szövegének lekérése.
konzol. log ( ez . sablon . querySelector ( 'h1' ) . innerText ) ;
// A div címke belső szövegének lekérése.
konzol. log ( ez . sablon . querySelector ( 'div' ) . innerText ) ;
// A span címke belső szövegének lekérése.
konzol. log ( ez . sablon . querySelector ( 'span' ) . innerText ) ;
// Szerezd meg a villámbevitel belső szövegét.
konzol. log ( ez . sablon . querySelector ( 'villám bemenet' ) . innerText ) ;
}
Teljes kód:
Kimenet:
Adja hozzá ezt az összetevőt bármely objektum „Rekord” oldalához (hozzáadtuk a fiók Record oldalához). Vizsgálja meg ezt az ablakot, és lépjen a „Konzol” fülre.
Most kattintson a „Részletek beszerzése” gombra. Ezután látni fogja, hogy az innerText megjelenik a konzolon az összes elemhez.
2. példa:
Használja az 1. példában tárgyalt összetevőt. Adja meg a két elemet a „h1” címkével a HTML komponensben, és használja a querySelector()-t a „js” fájlban, hogy megkapja a „h1” belső szövegét.
firstExample.html
< h1 > Hello LinuxHint. Első vagyok h1 < / h1 >
< h1 > Hello LinuxHint. Második vagyok h1 < / h1 >
< / villámkártya>
< / sablon>
firstExample.js
getDetails ( ) {// A h1 címke belső szövegének lekérése.
konzol. log ( ez . sablon . querySelector ( 'h1' ) . innerText ) ;
}
Teljes kód:
Kimenet:
Két elem van ugyanazzal a címkével. Tehát a querySelector() csak az első elemet jelöli ki. Amikor a „Részletek beszerzése” gombra kattint, megjelenik az első „h1”, és a belső szöveg visszakerül a konzolba.
3. példa:
A querySelector()-t egy változóban is tárolhatjuk, és ezzel a változóval kaphatjuk meg az innerText-et. Hozzunk létre egy span címkét némi szöveggel, és adjuk vissza az innerText-et a konzolon úgy, hogy ezt egy változóban tároljuk.
firstExample.html
< span > Hello LinuxHint. span vagyok < / span >< br >
< / villámkártya>
< / sablon>
firstExample.js
getDetails ( ) {// A span címke belső szövegének lekérése.
engedd neki = ez . sablon . querySelector ( 'span' ) . innerText
konzol. log ( ő ) ;
}
Teljes kód:
Kimenet:
4. példa:
Ebben a példában létrehozunk egy gombot és beírunk egy szöveget (villámbevitel), amely karakterláncként veszi fel a tárgyat. A querySelector() metódusnak szelektorként a „villámbemenetet” adjuk át. A „computer_related” változóhoz van rendelve. A gombra kattintva megjelenik az ebben a változóban lévő érték.
másodikPélda.html
< központ >
< p > Az Ön tárgya: < b > {számítógéppel kapcsolatos} < / b > < / p >
< / központ >
< / villámkártya>
< / sablon>
secondExample.js
számítógépes_kapcsolódóhandleSubject ( esemény ) {
ez . számítógépes_kapcsolódó = ez . sablon . querySelector ( 'villám bemenet' ) . érték ;
}
Teljes kód:
Kimenet:
5. példa:
Itt az adatrecidumot használjuk. Hozzunk létre egy gombot három span címkével, amelyek a következőkkel szerepelnek: „Span1”, „Span2” és „Span3” a HTML-fájlban. Válassza ki az első tartományt a „Span1” átadásával a querySelector() adatrecidjének.
harmadikPélda.html
< span adat-recid = 'Span1' > span-1-ben vagyok < / span >< br >
< span adat-recid = 'Span2' > span-2-ben vagyok < / span >< br >
< span adat-recid = 'Span3' > 3-as tartományban vagyok < / span >< br >
< / villámkártya>
< / sablon>
harmadikPélda.js
getDetails ( ) {// Szerezd meg a Span1 innerTextjét
konzol. log ( ez . sablon . querySelector ( '[data-recid='Span1']' ) . innerText ) ;
}
Teljes kód:
Kimenet:
Következtetés
Megtanultuk, hogyan kell használni a querySelector()-t a DOM elemek eléréséhez. A querySelector() a „this.template” függvényt használta az aktuális sablon elemeinek kiválasztásához. Lehetőség van arra, hogy ezt változóban tároljuk, vagy közvetlenül használjuk. Mindkettőt példákkal említjük. Továbbá bemutattunk egy példát, amely több elemet tartalmaz. Ebben az esetben a querySelector() az első elemet adja vissza.