Pemilih Kueri()
Pada dasarnya, querySelector() digunakan dengan “this.template” yang mengambil elemen yang ada dalam template tertentu. Jika ada beberapa elemen, maka hanya elemen pertama yang akan dipertimbangkan. Null dikembalikan jika elemen yang ditentukan tidak ada dalam templat. Dibutuhkan pemilih sebagai parameter. Ini bisa berupa tag nama kelas. ID tidak akan didukung. Dalam beberapa kasus, Anda memiliki kelas yang sama tetapi nilainya berbeda. Dalam skenario ini, kita perlu menggunakan data-recid yang mengambil elemen berdasarkan nilainya.
Sintaksis:
Mari kita lihat cara menentukan pemilih di dalam querySelector().
- this.template.querySelector(pemilih)
- this.template.querySelector('[data-recid=”nilai”]’)
Misalnya: jika pemilihnya adalah tag h1, Anda harus menentukannya sebagai “h1”.
1. Semua contoh menggunakan file “meta.xml” ini. Kami tidak akan menjelaskan hal ini dalam setiap contoh. Komponen LWC dapat ditambahkan ke Halaman Rekaman, Halaman Aplikasi, atau Halaman Beranda Anda.
'1.0' ?>
2. Dalam semua contoh yang akan kita bahas dalam panduan ini, Logika disediakan sebagai kode “js”. Setelah itu kita tentukan screenshot yang memuat seluruh kode “js”.
Contoh 1:
Pertama, kita membuat tag h1, div, span, dan lightning-button dengan beberapa teks di file HTML. Selain itu, kami membuat tombol yang mendapatkan elemen sebelumnya saat diklik. Dalam file “js”, kami mengembalikan innerText dari keempat elemen ini melalui this.template.querySelector().
contoh pertama.html
< h1 > Halo LinuxHint. Saya di h1 < / h1 >
< div > Halo LinuxHint. Saya di div < / div >
< menjangkau > Halo LinuxHint. saya sedang dalam rentang waktu < / menjangkau >
jenis = 'teks' varian = 'standar' nama = 'nama' label = 'masukan teks' >
Halo LinuxHint. Saya dalam masukan kilat < / masukan petir>
< / kartu petir>
< / templat>
contoh pertama.js
dapatkan Detail ( ) {// Dapatkan teks dalam dari tag h1.
menghibur. catatan ( ini . templat . querySelector ( 'h1' ) . teks dalam ) ;
// Dapatkan teks bagian dalam dari tag div.
menghibur. catatan ( ini . templat . querySelector ( 'div' ) . teks dalam ) ;
// Dapatkan teks bagian dalam dari tag span.
menghibur. catatan ( ini . templat . querySelector ( 'menjangkau' ) . teks dalam ) ;
// Dapatkan teks bagian dalam dari input petir.
menghibur. catatan ( ini . templat . querySelector ( 'masukan petir' ) . teks dalam ) ;
}
Seluruh Kode:
Keluaran:
Tambahkan komponen ini ke halaman 'Rekam' objek apa pun (kami menambahkannya ke halaman Catatan akun). Periksa jendela ini dan buka tab 'Konsol'.
Sekarang, klik tombol 'Dapatkan Detail'. Setelah itu, Anda akan melihat bahwa innerText ditampilkan di konsol untuk semua elemen.
Contoh 2:
Manfaatkan komponen yang dibahas pada Contoh 1. Tentukan dua elemen dengan tag “h1” di komponen HTML dan gunakan querySelector() di file “js” untuk mendapatkan innerText dari “h1”.
contoh pertama.html
< h1 > Halo LinuxHint. Saya pertama h1 < / h1 >
< h1 > Halo LinuxHint. Saya h1 kedua < / h1 >
< / kartu petir>
< / templat>
contoh pertama.js
dapatkan Detail ( ) {// Dapatkan teks dalam dari tag h1.
menghibur. catatan ( ini . templat . querySelector ( 'h1' ) . teks dalam ) ;
}
Seluruh Kode:
Keluaran:
Ada dua elemen dengan tag yang sama. Jadi, querySelector() hanya memilih elemen pertama. Saat Anda mengklik tombol 'Dapatkan Detail', Anda akan melihat 'h1' pertama dan teks bagian dalam dikembalikan di konsol.
Contoh 3:
Kita juga bisa menyimpan querySelector() dalam sebuah variabel dan menggunakan variabel ini untuk mendapatkan innerText. Mari kita buat tag span dengan beberapa teks dan kembalikan innerText di konsol dengan menyimpannya dalam sebuah variabel.
contoh pertama.html
< menjangkau > Halo LinuxHint. saya rentang < / menjangkau < saudara >
< / kartu petir>
< / templat>
contoh pertama.js
dapatkan Detail ( ) {// Dapatkan teks bagian dalam dari tag span.
biarkan dia = ini . templat . querySelector ( 'menjangkau' ) . teks dalam
menghibur. catatan ( Dia ) ;
}
Seluruh Kode:
Keluaran:
Contoh 4:
Dalam contoh ini, kita membuat tombol dan memasukkan teks (input petir) yang akan mengambil subjek sebagai string. Kami meneruskan “input petir” sebagai pemilih ke metode querySelector(). Ini ditugaskan ke variabel “terkait komputer’. Saat tombol ini diklik, nilai yang ada dalam variabel ini akan ditampilkan.
contoh kedua.html
< tengah >
label = 'Masukkan Subjek' nilai = { terkait_komputer } < / masukan petir>
< P > Subjek Anda adalah: < B > {terkait_komputer} < / B > < / P >
< / tengah >
< / kartu petir>
< / templat>
contoh kedua.js
terkait_komputermenangani Subjek ( peristiwa ) {
ini . terkait_komputer = ini . templat . querySelector ( 'masukan petir' ) . nilai ;
}
Seluruh Kode:
Keluaran:
Contoh 5:
Di sini, kami menggunakan data-recid. Mari kita buat tombol dengan tiga tag span dengan recid sebagai “Span1”, “Span2”, dan “Span3” di file HTML. Pilih rentang pertama dengan meneruskan “Span1” ke data-recid di querySelector().
contoh ketiga.html
< menjangkau data-recid = 'Rentang1' > Saya berada di rentang-1 < / menjangkau < saudara >
< menjangkau data-recid = 'Rentang2' > Saya dalam rentang-2 < / menjangkau < saudara >
< menjangkau data-recid = 'Rentang3' > Saya dalam rentang-3 < / menjangkau < saudara >
< / kartu petir>
< / templat>
thirdExample.js
dapatkan Detail ( ) {// Dapatkan innerText dari Span1
menghibur. catatan ( ini . templat . querySelector ( '[data-recid='Span1']' ) . teks dalam ) ;
}
Seluruh Kode:
Keluaran:
Kesimpulan
Kita mempelajari cara memanfaatkan querySelector() untuk mengakses elemen DOM. QuerySelector() menggunakan “this.template” untuk memilih elemen dalam template saat ini. Dimungkinkan untuk menyimpannya dalam variabel atau menggunakannya secara langsung. Kedua hal ini disebutkan dengan contoh. Kami juga memberikan contoh yang mencakup banyak elemen. Dalam hal ini, querySelector() mengembalikan elemen pertama.