QuerySelector()
Pada asasnya, querySelector() digunakan dengan 'this.template' yang mengambil elemen yang terdapat dalam templat tertentu. Jika terdapat berbilang elemen, ia akan mempertimbangkan elemen pertama sahaja. Null dikembalikan jika elemen yang ditentukan tidak wujud dalam templat. Ia mengambil pemilih sebagai parameter. Ini boleh menjadi tag nama kelas. ID tidak akan disokong. Dalam sesetengah kes, anda mempunyai kelas yang sama tetapi nilai yang berbeza. Dalam senario ini, kita perlu menggunakan data-recid yang mendapat elemen berdasarkan nilai.
Sintaks:
Mari lihat cara untuk menentukan pemilih di dalam querySelector().
- this.template.querySelector(selector)
- this.template.querySelector(‘[data-recid=”value”]’)
Contohnya: jika pemilih ialah teg h1, anda harus menentukannya sebagai 'h1'.
1. Semua contoh menggunakan fail 'meta.xml' ini. Kami tidak akan menyatakan ini dalam setiap contoh. Komponen LWC boleh ditambahkan pada Halaman Rekod, Halaman Apl atau Halaman Utama anda.
'1.0' ?>
2. Dalam semua contoh yang akan kita bincangkan dalam panduan ini, Logik disediakan sebagai kod 'js'. Selepas itu, kami menentukan tangkapan skrin yang merangkumi keseluruhan kod 'js'.
Contoh 1:
Mula-mula, kami mencipta tag h1, div, span dan kilat dengan beberapa teks dalam fail HTML. Juga, kami mencipta butang yang mendapat elemen sebelumnya apabila ia diklik. Dalam fail 'js', kami mengembalikan teks dalaman bagi keempat-empat elemen ini melalui this.template.querySelector().
firstExample.html
< h1 > Hello LinuxHint. Saya di h1 < / h1 >
< div > Hello LinuxHint. Saya dalam div < / div >
< rentang > Hello LinuxHint. Saya dalam rentang < / rentang >
menaip = 'teks' pelbagai = 'standard' nama = 'nama' label = 'input teks' >
Hello LinuxHint. Saya dalam input kilat < / masukan kilat>
< / kad kilat>
< / templat>
firstExample.js
getDetails ( ) {// Dapatkan teks dalaman teg h1.
konsol. log ( ini . templat . querySelector ( 'h1' ) . innerTeks ) ;
// Dapatkan teks dalaman tag div.
konsol. log ( ini . templat . querySelector ( 'div' ) . innerTeks ) ;
// Dapatkan teks dalam teg span.
konsol. log ( ini . templat . querySelector ( 'span' ) . innerTeks ) ;
// Dapatkan teks dalaman input kilat.
konsol. log ( ini . templat . querySelector ( 'input kilat' ) . innerTeks ) ;
}
Keseluruhan Kod:
Pengeluaran:
Tambahkan komponen ini pada halaman 'Rekod' mana-mana objek (kami menambahkannya pada halaman Rekod akaun). Periksa tetingkap ini dan pergi ke tab 'Konsol'.
Sekarang, klik butang 'Dapatkan Butiran'. Selepas itu, anda akan melihat bahawa innerText dipaparkan pada konsol untuk semua elemen.
Contoh 2:
Gunakan komponen yang dibincangkan dalam Contoh 1. Tentukan dua elemen dengan teg 'h1' dalam komponen HTML dan gunakan querySelector() dalam fail 'js' untuk mendapatkan innerTeks 'h1'.
firstExample.html
< h1 > Hello LinuxHint. Saya pertama h1 < / h1 >
< h1 > Hello LinuxHint. Saya h1 kedua < / h1 >
< / kad kilat>
< / templat>
firstExample.js
getDetails ( ) {// Dapatkan teks dalaman teg h1.
konsol. log ( ini . templat . querySelector ( 'h1' ) . innerTeks ) ;
}
Keseluruhan Kod:
Pengeluaran:
Terdapat dua elemen dengan tag yang sama. Jadi, querySelector() hanya memilih elemen pertama. Apabila anda mengklik butang 'Dapatkan Butiran', anda akan melihat 'h1' pertama dan teks dalaman dikembalikan dalam konsol.
Contoh 3:
Kami juga boleh menyimpan querySelector() dalam pembolehubah dan menggunakan pembolehubah ini untuk mendapatkan innerText. Mari buat teg span dengan beberapa teks dan kembalikan innerTeks pada konsol dengan menyimpannya dalam pembolehubah.
firstExample.html
< rentang > Hello LinuxHint. Saya span < / rentang >< br >
< / kad kilat>
< / templat>
firstExample.js
getDetails ( ) {// Dapatkan teks dalam teg span.
Biarkan dia = ini . templat . querySelector ( 'span' ) . innerTeks
konsol. log ( dia ) ;
}
Keseluruhan Kod:
Pengeluaran:
Contoh 4:
Dalam contoh ini, kami mencipta butang dan teks input (input kilat) yang akan mengambil subjek sebagai rentetan. Kami menghantar 'input kilat' sebagai pemilih kepada kaedah querySelector(). Ia diberikan kepada pembolehubah 'berkaitan_komputer'. Dalam klik pada butang ini, nilai yang terdapat dalam pembolehubah ini dipaparkan.
secondExample.html
< pusat >
label = 'Masukkan Subjek' nilai = { berkaitan komputer } >< / masukan kilat>
< hlm > Subjek anda ialah: < b > {computer_related} < / b > < / hlm >
< / pusat >
< / kad kilat>
< / templat>
secondExample.js
berkaitan komputermengendalikanSubjek ( peristiwa ) {
ini . berkaitan komputer = ini . templat . querySelector ( 'input kilat' ) . nilai ;
}
Keseluruhan Kod:
Pengeluaran:
Contoh 5:
Di sini, kami menggunakan data-recid. Mari buat butang dengan tiga teg span dengan recid sebagai 'Span1', 'Span2' dan 'Span3' dalam fail HTML. Pilih rentang pertama dengan menghantar 'Span1' kepada data-recid dalam querySelector().
thirdExample.html
< rentang data-recid = 'Span1' > Saya dalam span-1 < / rentang >< br >
< rentang data-recid = 'Span2' > Saya dalam span-2 < / rentang >< br >
< rentang data-recid = 'Span3' > Saya dalam span-3 < / rentang >< br >
< / kad kilat>
< / templat>
thirdExample.js
getDetails ( ) {// Dapatkan Teks dalaman Span1
konsol. log ( ini . templat . querySelector ( '[data-recid='Span1']' ) . innerTeks ) ;
}
Keseluruhan Kod:
Pengeluaran:
Kesimpulan
Kami belajar cara menggunakan querySelector() untuk mengakses elemen DOM. QuerySelector() menggunakan 'this.template' untuk memilih elemen dalam templat semasa. Anda boleh menyimpannya dalam pembolehubah atau menggunakannya secara langsung. Kedua-duanya disebut dengan contoh. Selain itu, kami menyediakan contoh yang merangkumi pelbagai elemen. Dalam kes ini, querySelector() mengembalikan elemen pertama.