ข้อความที่ตัดตอนมาจากคู่มือ JavaScript ที่เชื่อถือได้ (วิธีที่ดีที่สุดของ jQuery ในการค้นหาองค์ประกอบตามตัวเลือกสไตล์คือการใช้ GetElementsByTagname (*) เป็นครั้งแรกเพื่อรับองค์ประกอบ DOM ทั้งหมดจากนั้นกรององค์ประกอบ DOM ทั้งหมดตามสไตล์ตัวเลือก)
วันนี้ฉันลองความเร็วของวิธีการเลือกองค์ประกอบต่างๆ วิธีการดั้งเดิมนั้นเร็วกว่า jQuery ประมาณ 8 เท่า IE8 นั้นช้าที่สุด IE9 เร็วกว่า IE8 ประมาณ 3 เท่า Chrome ทำงานได้ดีที่สุดตามด้วย Firefox)
วิธีการเลือกองค์ประกอบเอกสาร:
1. เลือกองค์ประกอบโดย ID (GetElementById)
1) วิธีการใช้งาน: document.getElementById ("domid")
โดยที่ DOMID คือค่าแอตทริบิวต์ id ขององค์ประกอบที่จะเลือก
2) ความเข้ากันได้: IE เบราว์เซอร์ที่มีรุ่นต่ำกว่า IE8 ไม่แยกความแตกต่างของกรณีของหมายเลข ID องค์ประกอบและจะส่งคืนองค์ประกอบที่ตรงกับแอตทริบิวต์ชื่อ
2. เลือกองค์ประกอบตามชื่อ (getElementsByName)
1) วิธีการใช้งาน: document.getElementsByName ("domname")
โดยที่ domname คือค่าแอตทริบิวต์ชื่อขององค์ประกอบที่จะเลือก
2) คำอธิบาย: ค่าส่งคืนเป็นคอลเลกชัน Nodelist (แตกต่างจากอาร์เรย์)
ข. ซึ่งแตกต่างจากแอตทริบิวต์ ID แอตทริบิวต์ชื่อนั้นใช้ได้ในองค์ประกอบ DOM เพียงไม่กี่ตัวเท่านั้น (รูปแบบฟอร์ม, องค์ประกอบแบบฟอร์ม, iframe, IMG) นี่เป็นเพราะแอตทริบิวต์ชื่อถูกสร้างขึ้นเพื่ออำนวยความสะดวกในการส่งข้อมูลแบบฟอร์ม
ค. เมื่อตั้งค่าแอตทริบิวต์ชื่อสำหรับฟอร์ม, IMG, IFRAME, Applet, Embed, องค์ประกอบวัตถุ, แอตทริบิวต์ที่ตั้งชื่อตามค่าแอตทริบิวต์ชื่อจะถูกสร้างขึ้นโดยอัตโนมัติในวัตถุเอกสาร ดังนั้นวัตถุ DOM ที่เกี่ยวข้องสามารถอ้างอิงผ่าน document.domname
3) ความเข้ากันได้: องค์ประกอบที่ตรงกับค่าแอตทริบิวต์ ID ใน IE จะกลับมาด้วยกัน
3. เลือกองค์ประกอบตามชื่อแท็ก (getElementsByTagname)
1) วิธีการใช้งาน: element.getElementsByTagname ("tagname")
โดยที่องค์ประกอบเป็นองค์ประกอบ DOM ที่ถูกต้อง (รวมถึงเอกสาร)
Tagname เป็นชื่อแท็กขององค์ประกอบ DOM
2) คำอธิบาย: ค่าส่งคืนเป็นคอลเลกชัน Nodelist (แตกต่างจากอาร์เรย์)
ข. วิธีนี้สามารถเลือกองค์ประกอบลูกหลานขององค์ประกอบที่เรียกวิธีการเท่านั้น
ค. Tagname เป็นตัวพิมพ์ใหญ่
d. เมื่อ Tagname คือ *หมายความว่าองค์ประกอบทั้งหมดจะถูกเลือก (รับผิดชอบต่อ b. กฎ)
ก. Htmldocument กำหนดคุณสมบัติทางลัดบางอย่างเพื่อเข้าถึงโหนดแท็ก ตัวอย่างเช่น: รูปภาพรูปแบบและลิงก์แอตทริบิวต์ของเอกสารชี้ไปที่ <img>, <mg>, <aform> และ <a> แท็กคอลเลกชันองค์ประกอบในขณะที่ document.body และ document.head มักจะชี้ไปที่แท็กร่างกายและหัวเสมอ (เมื่อแท็กหัวที่ประกาศไม่ปรากฏขึ้น
4. เลือกองค์ประกอบผ่านคลาส CSS (GetElementsByClassName)
1) วิธีการใช้งาน: element.getElementsByClassName ("classNames")
โดยที่องค์ประกอบเป็นองค์ประกอบ DOM ที่ถูกต้อง (รวมถึงเอกสาร)
ชื่อคลาสคือการรวมกันของชื่อคลาส CSS (ชื่อคลาสหลายคลาสจะถูกคั่นด้วยช่องว่างซึ่งสามารถคั่นด้วยหลายช่องว่าง)
ตัวอย่างเช่น element.getElementsByClassName ("class2 class1") จะเลือกองค์ประกอบในองค์ประกอบลูกหลานขององค์ประกอบที่มีทั้งคลาส Class1 และ class2 ที่ใช้ (ชื่อสไตล์ไม่แยกความแตกต่างระหว่างคำสั่งซื้อ)
2) คำอธิบาย: ค่าส่งคืนเป็นคอลเลกชัน Nodelist (แตกต่างจากอาร์เรย์)
ข. วิธีนี้สามารถเลือกองค์ประกอบลูกหลานขององค์ประกอบที่เรียกวิธีการเท่านั้น
3) ความเข้ากันได้: IE8 และด้านล่างเบราว์เซอร์ไม่ใช้วิธี getElementsByClassName
5. เลือกองค์ประกอบผ่านตัวเลือก CSS
1) วิธีการใช้งาน: Document.QuerySelectorAll ("ตัวเลือก")
ที่ไหนตัวเลือกคือตัวเลือก CSS ตามกฎหมาย
2) คำอธิบาย: ค่าส่งคืนเป็นคอลเลกชัน Nodelist (แตกต่างจากอาร์เรย์)
3) ความเข้ากันได้: IE8 และด้านล่างเบราว์เซอร์รองรับไวยากรณ์ตัวเลือกมาตรฐาน CSS2 เท่านั้น
วิธีง่ายๆในการเลือกองค์ประกอบ DOM ใน JS คือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น