บทช่วยสอนนี้จะสาธิตวิธีต่างๆ ในการเลือกองค์ประกอบ DOM ใน JavaScript
วิธีต่างๆ ในการเลือกองค์ประกอบ DOM ใน JavaScript คืออะไร
ใช้วิธีการต่อไปนี้ในการเลือกองค์ประกอบ DOM ใน JavaScript:
- เมธอด getElementById()
- เมธอด getElementsByClassName()
- เมธอด getElementsByTagName()
- เมธอด querySelector()
- เมธอด querySelectorAll()
วิธีที่ 1: เลือกองค์ประกอบ DOM โดยใช้วิธี “getElementById()”
สำหรับการเลือกองค์ประกอบ DOM ให้ใช้ปุ่ม “ getElementById() ” วิธีการตามรหัสที่กำหนดขององค์ประกอบ วิธีนี้จะเลือกองค์ประกอบเดียวโดยใช้ ' รหัส ' คุณลักษณะ. มันให้การอ้างอิงถึงองค์ประกอบที่มีรหัสที่ระบุและส่งกลับ “ โมฆะ ” ถ้าไม่พบองค์ประกอบที่ตรงกัน
ไวยากรณ์
ใช้ไวยากรณ์ที่กำหนดด้านล่างสำหรับเมธอด getElementById():
เอกสาร. getElementById ( 'ชื่อรหัส' )
ที่นี่ “ ชื่อรหัส ” คือชื่อของแอตทริบิวต์ id ที่กำหนดให้กับองค์ประกอบ
ตัวอย่าง
ในไฟล์ HTML ให้สร้างสองหัวเรื่องในองค์ประกอบ div โดยใช้ ' h4 ” แท็ก กำหนดรหัสให้กับองค์ประกอบ div และองค์ประกอบส่วนหัว 'h4' ชื่อ ' แผนก ' และ ' หัวเรื่อง ” ตามลำดับ เพิ่มแอตทริบิวต์ style ให้กับองค์ประกอบ div เพื่อจัดให้อยู่ตรงกลาง นอกจากนี้ยังกำหนดชั้นเรียน “ ส่วน ” ไปยังหัวเรื่องที่สองที่เปลี่ยนสี:
< แผนก รหัส = 'ดิฟ' สไตล์ = 'จัดข้อความ: กึ่งกลาง;' >< h4 รหัส = 'หัวเรื่อง' > เข้าถึงองค์ประกอบ DOM โดยใช้วิธีต่างๆ < / h4 >
< h4 ระดับ = 'ส่วน' รหัส = 'หัวเรื่อง' > เลือกองค์ประกอบ DOM ใน JavaScript โดยใช้วิธี 'getElementById()'
< / h4 >
< / แผนก >
ตอนนี้เราจะได้ “ แผนก ” องค์ประกอบโดยใช้ id ที่กำหนดด้วยความช่วยเหลือของ “ getElementById() ' วิธี:
เคยเป็น รับโดยรหัส = เอกสาร. getElementById ( 'ดิฟ' ) ;พิมพ์องค์ประกอบเทียบกับ id “ แผนก ” บนคอนโซล:
คอนโซล บันทึก ( รับโดยรหัส ) ;จะเห็นได้ว่ามีการดึงองค์ประกอบ HTML ที่จำเป็นสำเร็จแล้ว:
วิธีที่ 2: เลือกองค์ประกอบ DOM โดยใช้วิธี “getElementsByClassName()”
คุณยังสามารถเลือกองค์ประกอบ DOM โดยใช้คลาสที่กำหนดได้ด้วยความช่วยเหลือของ “ getElementsByClassName() ' วิธี. เลือกรายการองค์ประกอบตามชื่อคลาส มันส่งออกวัตถุ HTMLCollection สด ซึ่งเป็นวัตถุคล้ายอาร์เรย์ที่มีองค์ประกอบทั้งหมดที่มีชื่อคลาสที่ระบุ
ไวยากรณ์
ไวยากรณ์ต่อไปนี้ใช้สำหรับเมธอด “getElementsByClassName()”:
เอกสาร. getElementsByClassName ( “ชื่อชั้น” )ตัวอย่าง
ที่นี่เราจะได้องค์ประกอบที่มีคลาส “ ส่วน ” และพิมพ์บนคอนโซล:
เคยเป็น เก็ตบายคลาส = เอกสาร. getElementsByClassName ( 'ส่วน' ) ;คอนโซล บันทึก ( เก็ตบายคลาส ) ;
ดังที่คุณเห็นในผลลัพธ์ อาร์เรย์ของความยาว 1 ที่ส่งคืนซึ่งมีองค์ประกอบ “ h4 “ใครเป็นของชั้น” ส่วน ”:
วิธีที่ 3: เลือกองค์ประกอบ DOM โดยใช้วิธี “getElementsByTagName()”
ในกรณีที่ไม่มีการกำหนด id หรือ class ให้กับ element ให้ใช้ปุ่ม “ getElementsByTagName() ” วิธีรับองค์ประกอบตามชื่อแท็ก นอกจากนี้ยังส่งคืนวัตถุ HTMLCollection สดซึ่งเป็นวัตถุคล้ายอาร์เรย์ที่มีองค์ประกอบทั้งหมดที่มีชื่อแท็กที่ระบุ
ไวยากรณ์
ทำตามไวยากรณ์ที่กำหนดเพื่อเลือกองค์ประกอบตามชื่อแท็ก:
getElementsByTagName ( ชื่อแท็ก )ตัวอย่าง
เรียกใช้เมธอด “getElementsByTagName()” โดยส่งชื่อแท็ก “ h4 '. จากนั้น พิมพ์รายการองค์ประกอบที่ตรงกับชื่อแท็กที่ระบุบนคอนโซล:
เคยเป็น รับโดยแท็ก = เอกสาร. getElementsByTagName ( 'h4' ) ;คอนโซล บันทึก ( รับโดยแท็ก ) ;
เอาต์พุต
วิธีที่ 4: เลือกองค์ประกอบ DOM โดยใช้วิธี “querySelector()”
ใช้ ' ตัวเลือกแบบสอบถาม () ” วิธีการรับองค์ประกอบ DOM เลือกองค์ประกอบเดียวที่ตรงกับตัวเลือก CSS ที่ระบุ จะส่งคืนองค์ประกอบแรกที่ตรงกันที่พบในเอกสาร ถ้าไม่มีองค์ประกอบที่ตรงกัน จะให้ “ โมฆะ '.
ไวยากรณ์
ไวยากรณ์ที่กล่าวถึงด้านล่างใช้สำหรับเมธอด “querySelector()”:
เอกสาร. ตัวเลือกแบบสอบถาม ( คุณลักษณะ )ที่นี่ แอตทริบิวต์คือตัวเลือก CSS เช่น id หรือคลาสเป็น “ #รหัสของฉัน “ “ .ห้องเรียนของฉัน “.
ตัวอย่าง
เรียกเมธอด “querySelector()” และส่ง id “ #หัวเรื่อง ” เพื่อรับองค์ประกอบที่มีรหัสเดียวกัน:
เคยเป็น getByquery = เอกสาร. ตัวเลือกแบบสอบถาม ( '#หัวเรื่อง' ) ;คอนโซล บันทึก ( getByquery ) ;
ให้องค์ประกอบแรกที่ตรงกันเป็นเอาต์พุต:
วิธีที่ 5: เลือกองค์ประกอบ DOM โดยใช้วิธี “querySelectorAll()”
หากคุณต้องการเลือกองค์ประกอบทั้งหมดที่มีแอตทริบิวต์ที่ระบุ (id หรือ class) ให้ใช้ปุ่ม ' แบบสอบถาม SelectorAll() ' วิธี. เลือกรายการองค์ประกอบที่ตรงกับตัวเลือก CSS ที่กำหนดไว้โดยเฉพาะ ให้วัตถุ NodeList ที่มีองค์ประกอบทั้งหมดในเอกสารที่ตรงกับตัวเลือก CSS เฉพาะ
ไวยากรณ์
ใช้ไวยากรณ์ต่อไปนี้เพื่อรับรายการองค์ประกอบ:
เอกสาร. ข้อความค้นหาตัวเลือกทั้งหมด ( คุณลักษณะ )ตัวอย่าง
ในการรับรายการองค์ประกอบที่ตรงกันซึ่งมีรหัส ' หัวเรื่อง ' กับ ' แบบสอบถาม SelectorAll() วิธีการ” และพิมพ์บนองค์ประกอบบนคอนโซล:
เคยเป็น getByqueryAll = เอกสาร. ข้อความค้นหาตัวเลือกทั้งหมด ( '#หัวเรื่อง' ) ;คอนโซล บันทึก ( getByqueryAll ) ;
เอาต์พุต
นั่นคือทั้งหมดที่เกี่ยวกับการเลือกองค์ประกอบ DOM ใน JavaScript
บทสรุป
สำหรับการเลือกองค์ประกอบ DOM ใน JavaScript ให้ใช้ปุ่ม “ getElementById() ”, “ getElementsByClassName() ”, “ getElementsByTagName() ”, “ ตัวเลือกแบบสอบถาม () ” หรือ “ แบบสอบถาม SelectorAll() ' วิธี. วิธีการเหล่านี้มีวิธีต่างๆ ในการเลือกองค์ประกอบจาก DOM ตามตัวระบุเฉพาะ ชื่อคลาส ชื่อแท็ก หรือตัวเลือก CSS บทช่วยสอนนี้แสดงวิธีการต่างๆ ในการเลือกองค์ประกอบ DOM ใน JavaScript