يتم تعريف أساليب QuerySelector و QuerySelectorAll في مواصفات API Selectors W3C. تتمثل وظيفتها في تحديد موقع العناصر المحددة بشكل مريح في المستند وفقًا لمواصفات محدد CSS.
حاليا ، يتم دعمها من قبل المتصفحات السائدة تقريبا. بما في ذلك IE8 (شاملة) وما فوق الإصدارات ، Firefox ، Chrome ، Safari ، Opera.
يحدد QuerySeletment و QuerySelectorAll الواجهات التالية في المواصفات:
وحدة DOM {[التكميلية ، nointerfaceObject] الواجهة العقد {element QuerySelector (في domstring selectors) ؛ nodelist QuerySelectorAll (في محددات domstring) ؛ } ؛ يستند المستندات التي تنفذ العقد. DocumentFragment يطبق العقد العقد ؛ عنصر ينفذ العقد العقد. } ؛من تعريف الواجهة ، يمكنك رؤية أن المستند و documentfragment والعنصر جميعهم ينفذون واجهة العقد. وهذا هو ، كل هذه الأنواع الثلاثة من العناصر لها طريقتان. يجب أن تكون معلمات QuerySelector و QuerySelectorAll سلاسل تتوافق مع محدد CSS. الفرق هو أن QuerySelector يرجع كائن ، وإرجاع QuerySelectorAll مجموعة (NodeList).
احصل على العنصر الذي أسمة صفحته D هي اختبار:
1 document.getElementById ("test") ؛ 2 document.queryselector ("#test") ؛ 3 document.queryselectorall ("#test") [0] ؛احصل على العنصر مع سمة فئة الصفحة "Red":
document.getElementsByClassName ('Red') document.queryselector ('. red') document.queryselectorall ('. red') document.queryselectall ('. red')ملاحظة:
ولكن تجدر الإشارة إلى أن العناصر الموجودة في مجموعة Nodelist التي تم إرجاعها غير محدودة. إذا كنت ترغب في التمييز بين نتيجة عودة في الوقت الفعلي في الوقت الفعلي ، فيرجى الاطلاع على المثال التالي:
<div id = "container"> <viv> </viv> <viv> </viv> </viv>
// أولاً ، حدد العنصر الذي يحتوي على حاوية معرف في الصفحة مع حاوية = مستند. console.log (container.childnodes.length) // النتيجة هي 3
من خلال المثال أعلاه ، يمكننا أن نفهم العناصر التي سيتم تحديثها في الوقت الفعلي. document.getElementByID إرجاع النتيجة في الوقت الفعلي. بعد إضافة عنصر طفل إليه ، يتم الحصول على عدد جميع عناصر الأطفال مرة أخرى ، وتم تحديث الأصل 2 إلى 3 (لا تفكر في أن بعض المتصفحات مثل Chrome ستحلّل الفراغ في عقدة الطفل).
الفرق بين element.queryselector و element.queryselectorall و jQuery (Element) .Find (Selector)
<span style = "font-size: 15px"> <divid = "test1"> <hhref = "// www.vevb.com/"> wulin.com </a> </div> <pid =" bar "> 111 </p> <script> var d1 = document.getelementbyid ('test1') ، obj1 = d1.quere. 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 (element) .find (Selector) ابحث عن جميع العقد التي تلبي وصف التحديد في المستند ولا تتضمن العنصر نفسه
إن التحليل الشامل المذكور أعلاه لمحتوى JavaScript Advanced Selector QuerySelection و QuerySelectorAll هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.