เมธอด querySelector และ querySelectorall ถูกกำหนดไว้ในข้อกำหนด API ตัวเลือก W3C ฟังก์ชั่นของพวกเขาคือการค้นหาองค์ประกอบที่ระบุในเอกสารตามข้อกำหนดตัวเลือก CSS อย่างสะดวก
ปัจจุบันพวกเขาได้รับการสนับสนุนจากเบราว์เซอร์หลักเกือบ รวมถึง IE8 (รวม) และเหนือกว่ารุ่น Firefox, Chrome, Safari, Opera
QuerySelector และ QuerySelectorAll กำหนดอินเทอร์เฟซต่อไปนี้ในข้อกำหนด:
โมดูล DOM {[เสริม, noInterfaceObject] อินเตอร์เฟส nodesElector {องค์ประกอบ querySelector (ในตัวเลือก domstring); Nodelist querySelectorall (ในตัวเลือก Domstring); - เอกสารใช้ NodeSelector; DocumentFragment ใช้ NodeSelector; องค์ประกอบใช้ NodeSelector; -จากคำจำกัดความของอินเตอร์เฟสคุณจะเห็นเอกสารเอกสารและองค์ประกอบทั้งหมดที่ใช้งานอินเตอร์เฟส NodeSelector นั่นคือองค์ประกอบทั้งสามประเภทนี้มีสองวิธี พารามิเตอร์ของ QuerySelector และ QuerySelectorall จะต้องเป็นสตริงที่สอดคล้องกับตัวเลือก CSS ความแตกต่างคือ QuerySelector ส่งคืนวัตถุและ QuerySelectorall ส่งคืนคอลเลกชัน (Nodelist)
รับองค์ประกอบที่มีเพจฉันแอตทริบิวต์ d คือการทดสอบ:
1 document.getElementById ("ทดสอบ"); 2 document.querySelector ("#test"); 3 document.querySelectorall ("#test") [0];รับองค์ประกอบด้วยแอตทริบิวต์คลาสหน้า "สีแดง":
document.getElementByClassName ('red') document.querySelector ('. red') document.querySelectorAll ('. red') document.querySelectorall ('. สีแดง')PS:
แต่ควรสังเกตว่าองค์ประกอบในคอลเลกชัน Nodelist ที่ส่งคืนนั้นไม่ได้มีชีวิต หากคุณต้องการแยกความแตกต่างระหว่างผลการส่งคืนแบบเรียลไทม์เวลาจริงโปรดดูตัวอย่างต่อไปนี้:
<div id = "container"> <div> </div> <div> </div> </div>
// ก่อนอื่นเลือกองค์ประกอบที่มี ID container ในหน้าด้วย container = document.getElementById ('#container'); console.log (container.childnodes.length) // ผลลัพธ์คือ 2 // จากนั้นเพิ่มองค์ประกอบเด็กลงผ่าน code container.appendchild console.log (container.childnodes.length) // ผลลัพธ์คือ 3ผ่านตัวอย่างข้างต้นเราสามารถเข้าใจว่าองค์ประกอบใดที่จะได้รับการปรับปรุงแบบเรียลไทม์ document.getElementById ส่งคืนผลลัพธ์แบบเรียลไทม์ หลังจากเพิ่มองค์ประกอบเด็กลงไปแล้วจำนวนองค์ประกอบของเด็กทั้งหมดจะได้รับอีกครั้งและ 2 ต้นฉบับได้รับการปรับปรุงเป็น 3 (ไม่พิจารณาว่าเบราว์เซอร์บางอย่างเช่น Chrome จะวิเคราะห์ช่องว่างลงในโหนดเด็ก)
ความแตกต่างระหว่าง Element.QuerySelector และ Element.QuerySelectorAll และ jQuery (Element) .find (ตัวเลือก) ตัวเลือก:
<span style = "font-size: 15px"> <divid = "test1"> <ahref = "// www.vevb.com/"> wulin.com </a> </div> <pid =" bar "> 111 </p> D1.QuerySelectorall ('Div A'); obj3 = $ (d1) .find ('div a'); console.log (obj1) // <a href = "// www.vevb.com/"> wulin.com </a> console.log (obj2.length) // 1 console.log (obj3) // null </script> </span>QuerySelectorall ค้นหาโหนดทั้งหมดที่ตรงตามคำอธิบายตัวเลือกในเอกสารรวมถึงองค์ประกอบของตัวเอง
jQuery (องค์ประกอบ) .find (ตัวเลือก) ค้นหาโหนดทั้งหมดที่ตรงตามคำอธิบายการเลือกในเอกสารและไม่รวมองค์ประกอบเอง
การวิเคราะห์ที่ครอบคลุมข้างต้นของ JavaScript Advanced Selector Selector และ QuerySelectorAll เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น