Javascript querySelector เทียบกับ getElementById [closed]

122

ปิด . คำถามนี้เป็นคำถามความคิดเห็นตาม ขณะนี้ยังไม่ยอมรับคำตอบ

ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้สามารถตอบได้ด้วยข้อเท็จจริงและการอ้างอิงโดยแก้ไขโพสต์นี้

ปิดให้บริการใน5 ปีที่ผ่านมา

ฉันได้ยินมาว่าquerySelector& querySelectorAllเป็นวิธีการใหม่ในการเลือกDOMองค์ประกอบ พวกเขาเปรียบเทียบกับวิธีการรุ่นเก่าอย่างไรgetElementById& getElementsByClassNameในแง่ของประสิทธิภาพและการรองรับเบราว์เซอร์?

ประสิทธิภาพเปรียบเทียบกับการใช้ตัวเลือกคิวรีของ jQuery อย่างไร

มีคำแนะนำแนวทางปฏิบัติที่ดีที่สุดสำหรับชุดเนทีฟที่จะใช้หรือไม่?

javascript jquery dom

— goToEleven
แหล่งที่มา

กำหนดดีกว่า. เกือบทั้งหมดแตกต่างกัน

นี่ก็เหมือนกับการถามว่า "ประแจขนาดเดียวดีกว่าประแจเลื่อนหรือไม่" คำตอบก็คือพวกเขามีประสิทธิภาพมากขึ้นและมีความยืดหยุ่นมากขึ้นและอื่น ๆ หลายครั้งที่เหนือกว่า แต่getElementByIdและgetElementsByClassNameยังคงเหมาะสำหรับวัตถุประสงค์ที่ชื่อของพวกเขาอธิบาย

— lonesomeday

โอ้และqS/qSAสามารถใช้ได้จากบริบทองค์ประกอบใด ๆ แต่gEBIสามารถใช้ได้จากdocumentบริบทเท่านั้น

getElementByIdจับคู่idแอตทริบิวต์เพื่อค้นหาโหนด DOM ในขณะที่querySelectorค้นหาโดยตัวเลือก ดังนั้นสำหรับเช่นตัวเลือกที่ไม่ถูกต้อง<div id="1"></div>, getElementById('1')จะทำงานในขณะที่querySelector('#1')จะล้มเหลวถ้าคุณบอกว่าเพื่อให้ตรงกับidแอตทริบิวต์ (เช่นquerySelector('[id="1"]').

— ซามูเอล ELH

เป็นเพียง FYI สำหรับทุกคนที่อ่านสิ่งนี้ แต่querySelectorและquerySelectorAllได้รับการสนับสนุนอย่างเต็มที่ในขณะนี้ caniuse.com/#feat=queryselector

— Telarian

คำตอบ:

132

"ดีกว่า" เป็นเรื่องส่วนตัว

querySelector เป็นคุณสมบัติที่ใหม่กว่า

getElementByIdquerySelectorได้รับการสนับสนุนที่ดีกว่า

querySelectorgetElementsByClassNameได้รับการสนับสนุนที่ดีกว่า

querySelectorช่วยให้คุณค้นหาองค์ประกอบที่มีกฎที่ไม่สามารถแสดงด้วยgetElementByIdและgetElementsByClassName

คุณต้องเลือกเครื่องมือที่เหมาะสมสำหรับงานที่กำหนด

(ในด้านบนสำหรับquerySelectorอ่านquerySelector/ querySelectorAll)

— เควนติน
แหล่งที่มา

querySelector support: caniuse.com/#feat=queryselector

— tazboy

@JasonVanDerMeijden - ไม่น่าจะมีนัยสำคัญมีแนวโน้มที่จะแตกต่างกันไปในแต่ละเบราว์เซอร์

— Quentin

คำตอบที่ดีมากและนี่คือการทดสอบเกณฑ์มาตรฐาน

— angel.bonev

เหตุผลที่ได้รับการสนับสนุนที่ดีกว่าการสั่งซื้อ: getElementById> querySelector> getElementsByClassNameเพราะผมคิดว่าgetElementsByClassNameควรจะมีระดับเดียวกันของการสนับสนุนเป็นgetElementById?

— Lei ยาง

คำตอบนี้ดูเหมือนจะไม่เกี่ยวข้องกับความแตกต่างระหว่างวิธีการโดยเฉพาะอย่างยิ่งประสิทธิภาพที่ชาญฉลาด

— Dror Bar

ฟังก์ชั่นgetElementByIdและgetElementsByClassNameมีความเฉพาะเจาะจงมากในขณะที่querySelectorและquerySelectorAllมีความซับซ้อนมากขึ้น ฉันเดาว่าพวกเขาจะมีผลงานแย่ลงจริงๆ

นอกจากนี้คุณต้องตรวจสอบการรองรับของแต่ละฟังก์ชันในเบราว์เซอร์ที่คุณกำหนดเป้าหมาย ยิ่งเป็นรุ่นใหม่ความเป็นไปได้สูงกว่าที่จะขาดการสนับสนุนหรือฟังก์ชั่นเป็น "บั๊กกี้"

— Thiago Negri
แหล่งที่มา

@thomas ลิงก์ของคุณไม่ทำงาน มีลิงค์การทำงานทุกที่หรือไม่?

— user5508297

มีหลายเวอร์ชันที่เก็บถาวร: web.archive.org/web/20160108040024/http://jsperf.com/…แต่การทดสอบนั้นเก่ามาก (2010) ดังนั้นผลลัพธ์อาจแตกต่างกันมากกับเอนจิ้นที่ทันสมัยกว่า

— thomas

หน้าที่เก็บถาวรเป็นแบบไดนามิกและช่วยให้คุณสามารถรันการทดสอบอีกครั้งบนเบราว์เซอร์ปัจจุบันของคุณ querySelectorAll ยังช้ากว่าโดยรายงานประมาณ 37% บนเบราว์เซอร์ของฉัน (Chrome 71 - vgy.me/TwGL3o.png ) นอกจากนี้ยังควรสังเกตด้วยว่า getElementById ส่งคืนผลลัพธ์สดซึ่งหมายความว่าหากคุณเปลี่ยน DOM การเปลี่ยนแปลงจะสะท้อนให้เห็นโดยผลลัพธ์ที่ได้รับจาก getElementByID (หากอยู่ในขอบเขต) ในขณะที่ nodelist ส่งคืนโดย querySelectorAll เป็นสแนปชอตเช่นเมื่อมีการเรียกใช้ผลลัพธ์จะไม่สะท้อนการเปลี่ยนแปลงใน DOM ในภายหลัง

— W.Prins

nodelist ... is not liveคุณสามารถจัดเตรียมเอกสารสำหรับสิ่งนั้นได้หรือไม่? @ W.Prins ทั้งสองวิธีส่งคืนElementชนิด

— Maximilian Burszley

อาฉันเห็นว่าฉันพิมพ์ผิดโปรดยอมรับคำขอโทษของฉัน! ฉันควรจะเขียน "getElementsByClassName" โดยที่ฉันเขียนว่า "getElementByID" เช่น getElementsByClassName (และคล้ายกัน) ซึ่งส่งคืนผลลัพธ์แบบสด "อันที่จริงแล้วทั้ง getElementsByClassName และ querySelectorAll ส่งคืน NodeList แต่ในกรณีก่อนหน้านี้เป็นแบบสดและในภายหลัง เป็นภาพรวม

— W.Prins