มีสามวิธีทั่วไปในการรับองค์ประกอบ ได้แก่ คือชื่อผ่าน ID องค์ประกอบชื่อผ่านแท็กและชื่อผ่านคลาส
GetElementById
DOM จัดเตรียมวิธีการที่เรียกว่า GetElementById ซึ่งจะส่งคืนวัตถุโหนดด้วยแอตทริบิวต์ ID ที่เกี่ยวข้อง โปรดระวังให้เป็นกรณีที่อ่อนไหวเมื่อใช้งาน
มันเป็นฟังก์ชั่นที่ไม่ซ้ำกันกับวัตถุเอกสารและสามารถเรียกผ่านได้เท่านั้น วิธีการที่ใช้มีดังนี้:
การคัดลอกรหัสมีดังนี้:
document.getElementById ('demo') // demo เป็น id ที่สอดคล้องกับองค์ประกอบ
วิธีนี้เข้ากันได้กับเบราว์เซอร์กระแสหลักรวมถึง IE6+และสามารถใช้งานได้อย่างกล้าหาญ
getElementsByTagname
วิธีนี้ส่งคืนอาร์เรย์ของวัตถุ (เพื่อความแม่นยำคอลเลกชัน htmlcollection มันไม่ใช่อาร์เรย์จริง) แต่ละวัตถุสอดคล้องกับองค์ประกอบที่มีแท็กที่กำหนดในเอกสาร คล้ายกับ GetElementById วิธีนี้มีพารามิเตอร์เดียวเท่านั้นและพารามิเตอร์ของมันคือชื่อของแท็กที่ระบุ รหัสตัวอย่างมีดังนี้:
การคัดลอกรหัสมีดังนี้:
document.getElementsByTagname ('li') // li เป็นชื่อของแท็ก
ควรสังเกตว่านอกเหนือจากการถูกเรียกโดยวัตถุเอกสารแล้ววิธีนี้ยังสามารถเรียกได้ด้วยองค์ประกอบทั่วไป ตัวอย่างมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var demo = document.getElementById ('demo');
var lis = demo.getElementsByTagname ('li');
ในทำนองเดียวกันวิธีนี้เข้ากันได้กับเบราว์เซอร์กระแสหลักรวมถึง IE6+และสามารถใช้อย่างกล้าหาญ
getElementsByClassName
นอกเหนือจากการได้รับองค์ประกอบโดยการระบุแท็กแล้ว DOM ยังให้วิธี getElementsByClassName เพื่อให้ได้องค์ประกอบที่มีชื่อคลาสที่ระบุ อย่างไรก็ตามเนื่องจากวิธีนี้ค่อนข้างใหม่เบราว์เซอร์เก่าไม่รองรับเช่น IE6 อย่างไรก็ตามเราสามารถสร้างข้อบกพร่องของเบราว์เซอร์เก่าผ่านการแฮ็ค วิธีนี้เรียกว่าดังนี้:
การคัดลอกรหัสมีดังนี้:
document.getElementsByClassName ('demo') // ชื่อคลาสที่ระบุโดยการสาธิตคือ
เช่น GetElementsByTagname วิธีนี้สามารถเรียกได้โดยองค์ประกอบทั่วไปนอกเหนือจากการถูกเรียกโดยวัตถุเอกสาร
สำหรับเบราว์เซอร์รุ่นเก่าเช่น IE6 และ 7 เราสามารถนำไปใช้กับแฮ็คต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น getElementsByClassName (โหนด, className) {
if (node.getElementsByClassName) {
ส่งคืน node.getElementsByClassName (className);
}อื่น {
ผลลัพธ์ var = [];
var elems = node.getElementsByTagname ("*");
สำหรับ (var i = 0; i <elems.length; i ++) {
if (elems [i] .classname.indexof (classname)! = -1) {
ผลลัพธ์ [results.length] = elems [i];
-
-
ผลลัพธ์กลับมา;
-
-
ขยาย
หากคุณไม่เพียง แต่พอใจกับวิธีการเลือกองค์ประกอบข้างต้นเท่านั้นคุณต้องการได้รับองค์ประกอบผ่านตัวเลือกเช่น jQuery และวิธีการใช้งานจะคล้ายกับ GetElementsByClassName ข้างต้น หากคุณสนใจคุณสามารถใช้ชุดตัวเลือกได้ อย่างไรก็ตามฉันคิดว่าสามวิธีข้างต้นรวมกับฟองเหตุการณ์ก็เพียงพอแล้วหลังจากทั้งหมดการแสดงทั้งสามนี้ยอดเยี่ยม
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้และฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน