บทความนี้จะอธิบายสั้นๆ ว่าเมธอด 'click()' ขององค์ประกอบ DOM คืออะไร และจะใช้ใน HTML ได้อย่างไร
องค์ประกอบ DOM “click()” Method ใน HTML คืออะไร
เมื่อเมธอด click() ถูกเรียกใช้บนองค์ประกอบ HTML จะจำลองผู้ใช้คลิกองค์ประกอบด้วยเมาส์ ซึ่งจะเรียกใช้ตัวจัดการเหตุการณ์ที่แนบมา ซึ่งช่วยให้นักพัฒนาสามารถดำเนินการโต้ตอบได้หลายอย่าง เช่น การเปิดลิงก์ การส่งแบบฟอร์ม หรือการสลับการมองเห็นองค์ประกอบต่าง ๆ โดยไม่จำเป็นต้องคลิกเมาส์จริง สิ่งนี้ช่วยในการสร้างหน้าเว็บแบบโต้ตอบและตอบสนอง
จะใช้เมธอดองค์ประกอบ DOM “click()” ใน HTML ได้อย่างไร
หากต้องการใช้เมธอด click() ผู้ใช้ต้องได้รับการอ้างอิงถึงองค์ประกอบ HTML ก่อนเพื่อจำลองการคลิก ซึ่งสามารถทำได้โดยใช้การผ่านผ่าน DOM หรือวิธีการสืบค้นมาตรฐานใดๆ เช่น “ getElementById ”, “ getElementsByClassName ”, “ ตัวเลือกแบบสอบถาม ', หรือ ' ข้อความค้นหาตัวเลือกทั้งหมด '.
ให้เราอธิบายตัวอย่างสำหรับคำอธิบายที่ดีขึ้นเกี่ยวกับเมธอด “click()”
ตัวอย่าง: ช่องทำเครื่องหมาย HTML และองค์ประกอบปุ่มตัวเลือก
มีการพิจารณาตัวอย่างที่ “ คลิก() วิธีการ ” ใช้กับช่องทำเครื่องหมาย HTML และองค์ประกอบปุ่มตัวเลือก ทำตามรหัสด้านล่าง:
< รูปร่าง >
< ป้อนข้อมูล
พิมพ์ = 'ช่องทำเครื่องหมาย'
รหัส = 'ช่องทำเครื่องหมาย 1'
บนเมาส์โอเวอร์ = 'forCheckbox()'
>
ขับเคลื่อนโดย Linuxint
< ป้อนข้อมูล
พิมพ์ = 'วิทยุ'
รหัส = 'ปุ่มวิทยุ'
บนเมาส์โอเวอร์ = 'forRadio()'
>
ขับเคลื่อนโดย Linuxint
< / รูปร่าง >
ในข้อมูลโค้ดด้านบน:
- ขั้นแรก ช่องทำเครื่องหมายจะถูกสร้างขึ้นบนเว็บเพจโดยใช้แท็ก โดยตั้งค่าประเภทเป็น “ ช่องทำเครื่องหมาย '.
- หลังจากนั้นผู้ฟังเหตุการณ์ “ บนเมาส์โอเวอร์ ” แนบกับช่องทำเครื่องหมายและเรียกใช้ “ สำหรับช่องทำเครื่องหมาย () ' การทำงาน.
- ในทำนองเดียวกัน “ วิทยุ ปุ่ม ” ถูกสร้างขึ้นโดยใช้ปุ่ม “ <อินพุต> ” แท็ก และแนบตัวฟังเหตุการณ์เข้าไปด้วย แต่ครั้งนี้ “ สำหรับวิทยุ () ” กำลังเรียกใช้ฟังก์ชัน
หลังจากสร้างองค์ประกอบ HTML บนหน้าเว็บแล้ว ก็ถึงเวลาเพิ่ม ' คลิก() ' วิธี:
< สคริปต์ >
ฟังก์ชันสำหรับกล่องกาเครื่องหมาย ( ) {
document.getElementById ( 'ช่องทำเครื่องหมาย 1' ) .คลิก ( ) ;
}
ฟังก์ชั่นสำหรับวิทยุ ( ) {
document.getElementById ( 'ปุ่มวิทยุ' ) .คลิก ( ) ;
}
< / สคริปต์ >
ในข้อมูลโค้ดด้านบน:
- ขั้นแรก กำหนดฟังก์ชัน JavaScript สองฟังก์ชัน “ สำหรับช่องทำเครื่องหมาย () ' และ ' สำหรับวิทยุ () '.
- ฟังก์ชันเหล่านี้ใช้ปุ่ม “ document.getElementById() ” วิธีการรับการอ้างอิงถึงองค์ประกอบ HTML บนหน้าที่มีรหัสเฉพาะ “checkbox1” และ “radioButton”
- สำหรับการจำลองการคลิกที่องค์ประกอบ HTML จะใช้เมธอด click() ฟังก์ชันนี้สลับสถานะเปิดหรือปิดเมื่อมีการเรียกใช้
หลังจากดำเนินการตามตัวอย่างโค้ดข้างต้น ผลลัพธ์จะปรากฏดังนี้:
gif ด้านบนแสดงให้เห็นว่าสถานะของช่องทำเครื่องหมายและปุ่มตัวเลือกกำลังเปลี่ยนแปลงโดยใช้เมธอด “click()”
บทสรุป
เมธอด click() มีประโยชน์อย่างยิ่งสำหรับการจัดการการโต้ตอบของผู้ใช้กับหน้าเว็บผ่าน JavaScript
แทนที่จะอาศัยผู้ใช้ในการคลิกองค์ประกอบจริงๆ ให้ใช้เมธอด click() เพื่อจำลองเหตุการณ์การคลิกโดยทางโปรแกรม มีประโยชน์สำหรับการสร้างการออกแบบเชิงโต้ตอบและเป็นมิตรกับผู้ใช้ บทความนี้ได้แสดงความหมายของเมธอด “click()” องค์ประกอบ DOM ใน HTML เรียบร้อยแล้ว