ในจาวาสคริปต์ “ แบบสอบถาม SelectorAll() ” วิธีการเรียกองค์ประกอบแรกที่ตรงกับตัวเลือก CSS ที่ระบุ วิธีนี้เริ่มสำรวจแผนผัง DOM เพื่อทำงานนี้ เมื่อพบองค์ประกอบแล้ว จะใช้คุณสมบัติในตัวของ JavaScript หรือเมธอดที่กำหนดไว้ในส่วนสคริปต์เพื่อทำงานพิเศษ วิธีนี้มักใช้เพื่อเลือกองค์ประกอบเป้าหมายตามความต้องการ อนุญาตให้ผู้ใช้เลือกองค์ประกอบทั้งหมดที่ตรงกับตัวเลือกที่ระบุหรือองค์ประกอบเฉพาะที่วางไว้ที่ดัชนีที่กำหนด
คู่มือนี้แสดงการใช้เมธอด “querySelectorAll()” ใน JavaScript
จะใช้เมธอด “querySelectorAll()” ใน JavaScript ได้อย่างไร?
เมื่อต้องการใช้ “ แบบสอบถาม SelectorAll() ” วิธีการระบุตัวเลือก CSS เป็นอาร์กิวเมนต์ ตัวเลือก CSS ประกอบด้วย 'ประเภท คลาส และรหัส' หากตัวเลือก CSS ไม่ถูกต้อง ระบบจะส่งกลับข้อผิดพลาดทางไวยากรณ์ มิฉะนั้น ก็จะส่งกลับวัตถุ NodeList แบบคงที่เป็นเอาต์พุตมาตรฐาน
ไวยากรณ์
document.querySelectorAll ( ตัวเลือก CSS )
ในไวยากรณ์ข้างต้น ' ตัวเลือก CSS ” อ้างถึงตัวเลือก CSS ที่ถูกต้องทั้งหมด
ลองใช้ไวยากรณ์ที่กำหนดไว้ข้างต้นในทางปฏิบัติ
รหัส HTML
ภาพรวมของรหัส HTML ที่กำหนด:
< ชั่วโมง2 ระดับ = 'การสาธิต' > หัวเรื่องแรก ชั่วโมง2 >< h3 ระดับ = 'การสาธิต' > หัวเรื่องที่สอง h3 >
< หน้า ระดับ = 'การสาธิต' > ย่อหน้าแรก หน้า >
< หน้า ระดับ = 'การสาธิต' > ย่อหน้าที่สอง หน้า >
< ปุ่ม เมื่อคลิก = 'jsFunc()' > คลิกที่นี่ ! ปุ่ม >
ในบรรทัดโค้ดด้านบน:
- “ แท็ก ' เพิ่มหัวข้อย่อยที่มีคลาส 'สาธิต'
- “ ” แท็กกำหนดหัวข้อย่อยที่สองด้วยคลาสเดียวกันชื่อ “สาธิต”
- “ ” แท็กฝังคำสั่งย่อหน้าที่มีคลาสเดียวกัน เช่น “สาธิต”
- “ <ปุ่ม> แท็กรวมปุ่มใหม่ที่มีเหตุการณ์เมาส์ 'onclick' เพื่อดำเนินการฟังก์ชัน 'jsFunc()'
บันทึก: มีการปฏิบัติตามรหัส HTML เฉพาะตลอดทั้งคู่มือนี้
ตัวอย่างที่ 1: การใช้เมธอด “querySelectorAll()” เพื่อเลือกองค์ประกอบที่มีคลาสเดียวกันและเปลี่ยนสี
ตัวอย่างนี้ใช้เมธอด “querySelectorAll()” เพื่อเลือกองค์ประกอบทั้งหมดที่ใช้คลาส “สาธิต”
รหัสจาวาสคริปต์
มาดูภาพรวมรหัสที่ระบุด้านล่าง:
< สคริปต์ >การทำงาน jsFunc ( ) {
รายการ const = document.querySelectorAll ( '.การสาธิต' ) ;
สำหรับ ( อนุญาต ฉัน = 0 ; ฉัน < รายการความยาว; ฉัน ++ ) {
รายการ [ ฉัน ] .style.color = 'ส้ม' ;
}
}
สคริปต์ >
ในบรรทัดรหัสด้านบน:
- “ jsFunc() ” มีการกำหนดฟังก์ชัน
- ในคำจำกัดความ ตัวแปร “รายการ” ใช้ “ แบบสอบถาม SelectorAll() ” วิธีการเลือกองค์ประกอบทั้งหมดที่มีคลาส 'สาธิต'
- ต่อไป “ สำหรับ ” วนซ้ำเริ่มต้นรายการโหนดเพื่อวนซ้ำตามองค์ประกอบ HTML ที่พบทั้งหมดที่มีคลาส “ การสาธิต ” และเปลี่ยนสีข้อความโดยใช้ปุ่ม “ สไตล์.สี ' คุณสมบัติ.
เอาต์พุต
ในเอาต์พุตด้านบน จะเห็นได้ว่าสีข้อความขององค์ประกอบที่มีชื่อคลาสเดียวกัน เช่น 'สาธิต' จะเปลี่ยนไปเมื่อคลิกปุ่ม
ตัวอย่างที่ 2: การใช้เมธอด “querySelectorAll()” เพื่อเลือกองค์ประกอบที่จัดทำดัชนีเฉพาะ
นอกเหนือจากองค์ประกอบทั้งหมดแล้ว ผู้ใช้ยังสามารถเลือกองค์ประกอบที่จัดทำดัชนีเฉพาะที่มีคลาส “สาธิต”
รหัสจาวาสคริปต์
พิจารณารหัส JavaScript ที่กำหนด:
< สคริปต์ >การทำงาน jsFunc ( ) {
รายการ const = document.querySelectorAll ( 'h2.demo' ) ;
รายการ [ 0 ] .style.color = 'สีเขียว' ;
}
สคริปต์ >
ในข้อมูลโค้ดด้านบน:
- ตัวแปร “รายการ” เลือกองค์ประกอบ “h2” ที่มีคลาสเป็น “สาธิต” ด้วยความช่วยเหลือของ “ แบบสอบถาม SelectorAll() ' วิธี.
- หลังจากนั้น ตัวแปร “list” จะระบุดัชนีขององค์ประกอบ “h2” เพื่อเปลี่ยนสีข้อความขององค์ประกอบ “H2” ที่วางไว้ที่ดัชนี “0”
เอาต์พุต
ผลลัพธ์แสดงให้เห็นว่าสีข้อความขององค์ประกอบ 'H2' ที่วางไว้ที่ดัชนีศูนย์มีการเปลี่ยนแปลงคลาส 'สาธิต' เมื่อคลิกปุ่ม
ตัวอย่างที่ 3: การใช้เมธอด “querySelectorAll()” เพื่อรับจำนวนองค์ประกอบที่มีคลาสเดียวกัน
ตัวอย่างนี้ดึงข้อมูลจำนวนองค์ประกอบที่มีคลาสเดียวกันโดยใช้เมธอด “querySelectorAll()”
รหัส HTML
ขั้นแรก ดูโค้ด HTML ที่แก้ไขแล้วของ “ตัวอย่างที่ 1”:
< หน้า รหัส = 'สำหรับ' > หน้า >
ในโค้ด HTML ที่ระบุไว้ข้างต้น ให้ต่อท้ายย่อหน้าว่างด้วยรหัส 'para' ที่ท้ายโค้ด HTML 'ตัวอย่างที่ 1'
รหัสจาวาสคริปต์
ตอนนี้ดำเนินการต่อด้วยรหัส JavaScript:
< สคริปต์ >การทำงาน jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'สำหรับ' ) .innerHTML = nodelist.length;
}
สคริปต์ >
ตามข้อมูลโค้ดด้านบน:
- ฟังก์ชัน “jsFunc()” จะเลือกองค์ประกอบ “
” ทั้งหมดก่อนโดยใช้ปุ่ม “ แบบสอบถาม SelectorAll() ' วิธี.
- หลังจากนั้น “ getElementById() ” วิธีการเข้าถึงย่อหน้าว่างที่เพิ่มผ่าน id “para” เพื่อต่อท้ายด้วยค่าที่ส่งคืนของคุณสมบัติ “ความยาว” ที่ใช้
เอาต์พุต
ดังที่เห็น เอาต์พุตด้านบนแสดงองค์ประกอบทั้งหมด '4' ที่ตรงกับตัวเลือกคลาส CSS 'สาธิต' ที่ระบุ
บทสรุป
“ แบบสอบถาม SelectorAll() ” สามารถใช้เมธอดได้อย่างง่ายดายโดยระบุตัวเลือก CSS เป็นค่าของมัน วิธีนี้จับคู่องค์ประกอบ HTML แต่ละรายการและเลือกองค์ประกอบที่ตรงกับตัวเลือกที่ระบุ เมื่อเลือกองค์ประกอบแล้ว องค์ประกอบจะทำงานตามที่กำหนดไว้ในส่วนสคริปต์ คู่มือนี้แสดงการใช้เมธอด “querySelectorAll()” ใน JavaScript โดยสังเขป