Sorgu Seçici()
Temel olarak querySelector(), belirli bir şablonda bulunan öğeleri getiren “this.template” ile birlikte kullanılır. Birden fazla öğe varsa yalnızca ilk öğeyi dikkate alır. Belirtilen öğe şablonda mevcut değilse null değeri döndürülür. Seçiciyi parametre olarak alır. Bu sınıf adı etiketi olabilir. Kimlik desteklenmeyecek. Bazı durumlarda aynı sınıflara ancak farklı değerlere sahipsiniz. Bu senaryoda, elemanları değere göre alan data-recid'i kullanmamız gerekiyor.
Sözdizimi:
querySelector() içindeki seçiciyi nasıl belirleyeceğimizi görelim.
- this.template.querySelector(seçici)
- this.template.querySelector('[data-recid=”value”]')
Örneğin; seçici h1 etiketi ise “h1” olarak belirtmelisiniz.
1. Tüm örneklerde bu “meta.xml” dosyası kullanılmaktadır. Bunu her örnekte belirtmeyeceğiz. LWC bileşenleri Kayıt Sayfanıza, Uygulama Sayfanıza veya Ana Sayfanıza eklenebilir.
'1.0' ?>
2. Bu kılavuzda ele alacağımız tüm örneklerde Mantık “js” kodu olarak verilmektedir. Sonrasında “js” kodunun tamamını içeren ekran görüntüsünü belirliyoruz.
Örnek 1:
İlk olarak HTML dosyasında bazı metinlerle birlikte h1, div, span ve Lightning-button etiketlerini oluşturuyoruz. Ayrıca tıklandığında önceki elemanları alan bir buton oluşturuyoruz. “js” dosyasında, bu dört öğenin tümünün innerText'ini this.template.querySelector() aracılığıyla döndürüyoruz.
ilkÖrnek.html
<şablon>< sa1 > Merhaba LinuxHint. h1'deyim < / sa1 >
< div > Merhaba LinuxHint. ben div'deyim < / div >
< açıklık > Merhaba LinuxHint. aralıktayım < / açıklık >
Merhaba LinuxHint. Yıldırım girişindeyim < / yıldırım girişi>
< / yıldırım kartı>
< / şablon>
ilkÖrnek.js
Ayrıntıları al ( ) {// h1 etiketinin iç metnini alın.
konsol. kayıt ( Bu . şablon . sorguSeçici ( 'h1' ) . iç metin ) ;
// div etiketinin iç metnini alın.
konsol. kayıt ( Bu . şablon . sorguSeçici ( 'böl' ) . iç metin ) ;
// Span etiketinin iç metnini alın.
konsol. kayıt ( Bu . şablon . sorguSeçici ( 'açıklık' ) . iç metin ) ;
// Lightning girişinin iç metnini alın.
konsol. kayıt ( Bu . şablon . sorguSeçici ( 'yıldırım girişi' ) . iç metin ) ;
}
Kodun Tamamı:
Çıktı:
Bu bileşeni herhangi bir nesnenin “Kayıt” sayfasına ekleyin (bunu hesabın Kayıt sayfasına ekledik). Bu pencereyi inceleyin ve “Konsol” sekmesine gidin.
Şimdi “Ayrıntıları Al” butonuna tıklayın. Bundan sonra, tüm öğeler için konsolda innerText'in görüntülendiğini göreceksiniz.
Örnek 2:
Örnek 1'de ele alınan bileşeni kullanın. HTML bileşeninde iki öğeyi “h1” etiketiyle belirtin ve “h1”in innerText'ini almak için “js” dosyasındaki querySelector() öğesini kullanın.
ilkÖrnek.html
<şablon>< sa1 > Merhaba LinuxHint. Ben ilk h1'im < / sa1 >
< sa1 > Merhaba LinuxHint. Ben ikinci h1'im < / sa1 >
< / yıldırım kartı>
< / şablon>
ilkÖrnek.js
Ayrıntıları al ( ) {// h1 etiketinin iç metnini alın.
konsol. kayıt ( Bu . şablon . sorguSeçici ( 'h1' ) . iç metin ) ;
}
Kodun Tamamı:
Çıktı:
Aynı etikete sahip iki öğe var. Yani querySelector() yalnızca ilk öğeyi seçer. “Ayrıntıları Al” butonuna tıkladığınızda ilk “h1” göreceksiniz ve iç metin konsola döndürülecektir.
Örnek 3:
Ayrıca querySelector() işlevini bir değişkende saklayabilir ve bu değişkeni innerText'i almak için kullanabiliriz. Biraz metin içeren bir span etiketi oluşturalım ve bunu bir değişkene kaydederek konsoldaki innerText'i döndürelim.
ilkÖrnek.html
<şablon>< açıklık > Merhaba LinuxHint. ben açıklığım < / açıklık >< br >
< / yıldırım kartı>
< / şablon>
ilkÖrnek.js
Ayrıntıları al ( ) {// Span etiketinin iç metnini alın.
ona izin ver = Bu . şablon . sorguSeçici ( 'açıklık' ) . iç metin
konsol. kayıt ( O ) ;
}
Kodun Tamamı:
Çıktı:
Örnek 4:
Bu örnekte konuyu string olarak alacak bir buton ve giriş metni (yıldırım-giriş) oluşturuyoruz. Selector olarak “lightning-input”u querySelector() metoduna aktarıyoruz. “Bilgisayar_ilişkili” değişkenine atanır. Bu düğmeye tıklandığında bu değişkende mevcut olan değer görüntülenir.
ikinciÖrnek.html
<şablon>< merkez >
< P > Konunuz: < B > {bilgisayarla ilgili} < / B > < / P >
< / merkez >
< / yıldırım kartı>
< / şablon>
ikinciÖrnek.js
bilgisayarla ilgilitanıtıcıKonu ( etkinlik ) {
Bu . bilgisayarla ilgili = Bu . şablon . sorguSeçici ( 'yıldırım girişi' ) . değer ;
}
Kodun Tamamı:
Çıktı:
Örnek 5:
Burada verilerden yararlanıyoruz. HTML dosyasında “Span1”, “Span2” ve “Span3” şeklinde tanımlanan üç span etiketine sahip bir buton oluşturalım. querySelector()'daki verilere 'Span1' ileterek ilk yayılma alanını seçin.
üçüncüÖrnek.html
<şablon>< açıklık veri-okundu = 'Açıklık1' > Span-1'deyim < / açıklık >< br >
< açıklık veri-okundu = 'Açıklık2' > Span-2'deyim < / açıklık >< br >
< açıklık veri-okundu = 'Açıklık3' > Span-3'teyim < / açıklık >< br >
< / yıldırım kartı>
< / şablon>
üçüncüÖrnek.js
Ayrıntıları al ( ) {// Span1'in iç metnini alın
konsol. kayıt ( Bu . şablon . sorguSeçici ( '[data-recid = 'Span1']' ) . iç metin ) ;
}
Kodun Tamamı:
Çıktı:
Çözüm
DOM öğelerine erişmek için querySelector() işlevinin nasıl kullanılacağını öğrendik. querySelector() geçerli şablondaki öğeleri seçmek için “this.template”i kullandı. Bunu bir değişkende saklamak veya doğrudan kullanmak mümkün olabilir. Her ikisinden de örneklerle bahsedilmiştir. Ayrıca birden fazla öğe içeren bir örnek verdik. Bu durumda querySelector() ilk öğeyi döndürür.