ตัวเลือกแบบสอบถาม()
โดยพื้นฐานแล้ว querySelector() จะใช้กับ “this.template” ที่ดึงข้อมูลองค์ประกอบที่มีอยู่ในเทมเพลตใดเทมเพลตหนึ่ง หากมีองค์ประกอบหลายรายการจะพิจารณาเฉพาะองค์ประกอบแรกเท่านั้น Null จะถูกส่งกลับหากไม่มีองค์ประกอบที่ระบุในเทมเพลต มันใช้ตัวเลือกเป็นพารามิเตอร์ นี่อาจเป็นแท็กชื่อคลาส บัตรประจำตัวจะไม่ได้รับการสนับสนุน ในบางกรณี คุณมีคลาสเดียวกันแต่ค่าต่างกัน ในสถานการณ์นี้ เราจำเป็นต้องใช้ data-recid ที่ได้รับองค์ประกอบตามค่า
ไวยากรณ์:
มาดูวิธีการระบุตัวเลือกภายใน querySelector()
- this.template.querySelector (ตัวเลือก)
- this.template.querySelector('[data-recid=”value”]')
ตัวอย่างเช่น หากตัวเลือกคือแท็ก h1 คุณควรระบุเป็น 'h1'
1. ตัวอย่างทั้งหมดใช้ไฟล์ “meta.xml” นี้ เราจะไม่ระบุสิ่งนี้ในแต่ละตัวอย่าง คุณสามารถเพิ่มส่วนประกอบ LWC ลงในหน้าบันทึก หน้าแอพ หรือโฮมเพจของคุณได้
'1.0' ?>
<เวอร์ชัน API> 57.0
<เป้าหมาย>
2. ในตัวอย่างทั้งหมดที่เราจะพูดถึงในคู่มือนี้ Logic จะถูกระบุเป็นโค้ด “js” หลังจากนั้น เราจะระบุภาพหน้าจอที่มีโค้ด “js” ทั้งหมด
ตัวอย่างที่ 1:
ขั้นแรก เราสร้างแท็ก h1, div, span และ lightning-button พร้อมข้อความบางส่วนในไฟล์ HTML นอกจากนี้เรายังสร้างปุ่มที่รับองค์ประกอบก่อนหน้าเมื่อมีการคลิก ในไฟล์ “js” เราจะส่งคืนข้อความภายในขององค์ประกอบทั้งสี่นี้ผ่านทาง this.template.querySelector()
firstExample.html
<แม่แบบ><รูปแบบการ์ดสายฟ้า = 'แคบ' ชื่อ = 'สวัสดี' ไอคอน- ชื่อ = 'มาตรฐาน:บัญชี' >
< h1 > สวัสดี LinuxHint ฉันอยู่ที่ h1 < / h1 >
< กอง > สวัสดี LinuxHint ฉันอยู่ดิวิชั่น < / กอง >
< ช่วง > สวัสดี LinuxHint ฉันอยู่ในช่วง < / ช่วง >
<อินพุตสายฟ้า พิมพ์ = 'ข้อความ' ตัวแปร = 'มาตรฐาน' ชื่อ = 'ชื่อ' ฉลาก = 'การป้อนข้อความ' >
สวัสดี LinuxHint ฉันกำลังป้อนข้อมูลแบบสายฟ้าแลบ < / ฟ้าผ่าอินพุต>
<รูปแบบปุ่มสายฟ้า = 'ฐาน' ฉลาก = 'รับรายละเอียด' เมื่อคลิก = { รับรายละเอียด } >< / ปุ่มฟ้าผ่า>
< / การ์ดสายฟ้า>
< / แม่แบบ>
firstExample.js
รับรายละเอียด ( ) {// รับข้อความภายในของแท็ก h1
คอนโซล บันทึก ( นี้ . แม่แบบ . ตัวเลือกแบบสอบถาม ( 'h1' ) . ข้อความภายใน ) ;
// รับข้อความภายในของแท็ก div
คอนโซล บันทึก ( นี้ . แม่แบบ . ตัวเลือกแบบสอบถาม ( 'ดิฟ' ) . ข้อความภายใน ) ;
// รับข้อความภายในของแท็ก span
คอนโซล บันทึก ( นี้ . แม่แบบ . ตัวเลือกแบบสอบถาม ( 'ช่วง' ) . ข้อความภายใน ) ;
// รับข้อความภายในของอินพุตฟ้าผ่า
คอนโซล บันทึก ( นี้ . แม่แบบ . ตัวเลือกแบบสอบถาม ( 'อินพุตฟ้าผ่า' ) . ข้อความภายใน ) ;
}
รหัสทั้งหมด:
เอาท์พุท:
เพิ่มส่วนประกอบนี้ลงในหน้า 'บันทึก' ของวัตถุใด ๆ (เราได้เพิ่มลงในหน้าบันทึกของบัญชี) ตรวจสอบหน้าต่างนี้และไปที่แท็บ 'คอนโซล'
ตอนนี้คลิกปุ่ม 'รับรายละเอียด' หลังจากนั้นคุณจะเห็นว่าข้อความภายในแสดงบนคอนโซลสำหรับองค์ประกอบทั้งหมด
ตัวอย่างที่ 2:
ใช้ส่วนประกอบที่กล่าวถึงในตัวอย่างที่ 1 ระบุองค์ประกอบทั้งสองด้วยแท็ก “h1” ในองค์ประกอบ HTML และใช้ querySelector() ในไฟล์ “js” เพื่อรับข้อความภายในของ “h1”
firstExample.html
<แม่แบบ><รูปแบบการ์ดสายฟ้า = 'แคบ' ชื่อ = 'สวัสดี' ไอคอน- ชื่อ = 'มาตรฐาน:บัญชี' >
< h1 > สวัสดี LinuxHint ฉันเป็นคนแรก h1 < / h1 >
< h1 > สวัสดี LinuxHint ฉันคือ h1 คนที่สอง < / h1 >
<รูปแบบปุ่มสายฟ้า = 'ฐาน' ฉลาก = 'รับรายละเอียด' เมื่อคลิก = { รับรายละเอียด } >< / ปุ่มฟ้าผ่า>
< / การ์ดสายฟ้า>
< / แม่แบบ>
firstExample.js
รับรายละเอียด ( ) {// รับข้อความภายในของแท็ก h1
คอนโซล บันทึก ( นี้ . แม่แบบ . ตัวเลือกแบบสอบถาม ( 'h1' ) . ข้อความภายใน ) ;
}
รหัสทั้งหมด:
เอาท์พุท:
มีสององค์ประกอบที่มีแท็กเดียวกัน ดังนั้น querySelector() จะเลือกเฉพาะองค์ประกอบแรกเท่านั้น เมื่อคุณคลิกปุ่ม 'รับรายละเอียด' คุณจะเห็น 'h1' แรกและข้อความภายในจะถูกส่งกลับในคอนโซล
ตัวอย่างที่ 3:
นอกจากนี้เรายังสามารถจัดเก็บ querySelector() ไว้ในตัวแปรและใช้ตัวแปรนี้เพื่อรับข้อความภายใน มาสร้างแท็ก span พร้อมข้อความและส่งคืนข้อความภายในบนคอนโซลโดยเก็บไว้ในตัวแปร
firstExample.html
<แม่แบบ><รูปแบบการ์ดสายฟ้า = 'แคบ' ชื่อ = 'สวัสดี' ไอคอน- ชื่อ = 'มาตรฐาน:บัญชี' >
< ช่วง > สวัสดี LinuxHint ฉันคือสแปน < / ช่วง >< พี่ชาย >
<รูปแบบปุ่มสายฟ้า = 'ฐาน' ฉลาก = 'รับรายละเอียด' เมื่อคลิก = { รับรายละเอียด } >< / ปุ่มฟ้าผ่า>
< / การ์ดสายฟ้า>
< / แม่แบบ>
firstExample.js
รับรายละเอียด ( ) {// รับข้อความภายในของแท็ก span
ปล่อยเขา = นี้ . แม่แบบ . ตัวเลือกแบบสอบถาม ( 'ช่วง' ) . ข้อความภายใน
คอนโซล บันทึก ( เขา ) ;
}
รหัสทั้งหมด:
เอาท์พุท:
ตัวอย่างที่ 4:
ในตัวอย่างนี้ เราสร้างปุ่มและป้อนข้อความ (การป้อนข้อมูลแบบสายฟ้า) ที่จะใช้หัวเรื่องเป็นสตริง เราส่งผ่าน 'lightning-input' เป็นตัวเลือกไปยังเมธอด querySelector() ถูกกำหนดให้กับตัวแปร “computer_ related” เมื่อคลิกที่ปุ่มนี้ ค่าที่มีอยู่ในตัวแปรนี้จะปรากฏขึ้น
SecondExample.html
<แม่แบบ><การ์ดสายฟ้า ชื่อ = 'เรื่อง' >
< ศูนย์ >
<อินพุตสายฟ้า ฉลาก = 'ใส่เรื่อง' ค่า = { คอมพิวเตอร์_ที่เกี่ยวข้องกับ } >< / ฟ้าผ่าอินพุต>
< พี > หัวข้อของคุณคือ: < ข > {คอมพิวเตอร์_เกี่ยวข้องกับ} < / ข > < / พี >
< / ศูนย์ >
<ปุ่มสายฟ้า ฉลาก = 'เลือกที่นี่' เมื่อคลิก = { จัดการเรื่อง } >< / ปุ่มฟ้าผ่า>
< / การ์ดสายฟ้า>
< / แม่แบบ>
SecondExample.js
คอมพิวเตอร์_ที่เกี่ยวข้องกับจัดการเรื่อง ( เหตุการณ์ ) {
นี้ . คอมพิวเตอร์_ที่เกี่ยวข้องกับ = นี้ . แม่แบบ . ตัวเลือกแบบสอบถาม ( 'อินพุตฟ้าผ่า' ) . ค่า ;
}
รหัสทั้งหมด:
เอาท์พุท:
ตัวอย่างที่ 5:
ที่นี่เราใช้ data-recid มาสร้างปุ่มที่มีแท็ก span สามแท็กโดยระบุเป็น 'Span1', 'Span2' และ 'Span3' ในไฟล์ HTML เลือกช่วงแรกโดยส่ง 'Span1' ไปยัง data-recid ใน querySelector()
ThirdExample.html
<แม่แบบ><การ์ดสายฟ้า ชื่อ = 'การระบุตาม data-id' >
< ช่วง ข้อมูล recid = 'สแปน1' > ฉันอยู่ในสแปน-1 < / ช่วง >< พี่ชาย >
< ช่วง ข้อมูล recid = 'สแปน2' > ฉันอยู่ในช่วงสแปน-2 < / ช่วง >< พี่ชาย >
< ช่วง ข้อมูล recid = 'สแปน3' > ฉันอยู่ในสแปน-3 < / ช่วง >< พี่ชาย >
<รูปแบบปุ่มสายฟ้า = 'ฐาน' ฉลาก = 'รับรายละเอียด' เมื่อคลิก = { รับรายละเอียด } >< / ปุ่มฟ้าผ่า>
< / การ์ดสายฟ้า>
< / แม่แบบ>
ThirdExample.js
รับรายละเอียด ( ) {// รับข้อความภายในของ Span1
คอนโซล บันทึก ( นี้ . แม่แบบ . ตัวเลือกแบบสอบถาม ( '[ข้อมูล-recid='Span1']' ) . ข้อความภายใน ) ;
}
รหัสทั้งหมด:
เอาท์พุท:
บทสรุป
เราเรียนรู้วิธีใช้ querySelector() เพื่อเข้าถึงองค์ประกอบ DOM querySelector() ใช้ “this.template” เพื่อเลือกองค์ประกอบในเทมเพลตปัจจุบัน คุณสามารถเก็บสิ่งนี้ไว้ในตัวแปรหรือใช้งานโดยตรงได้ ทั้งสองอย่างนี้มีการกล่าวถึงพร้อมตัวอย่าง นอกจากนี้ เรายังจัดเตรียมตัวอย่างที่มีองค์ประกอบหลายรายการด้วย ในกรณีนี้ querySelector() จะส่งกลับองค์ประกอบแรก