إن querySelector هو أسلوب JavaScript يلعب دورًا حيويًا في البحث عن العناصر.

في هذا القسم، سوف نفهم ونناقش طريقة querySelector () واستخدامها، كما سنلقي نظرة على مثال لفهم مفهوم طريقة querySelector () عمليًا.

تقديم طريقة JavaScript querySelector ().

طريقة واجهة عنصر تمكننا من البحث عن العنصر الأول وإرجاعه داخل المستند. يجد هذا العنصر الذي يتطابق مع أي من محددات CSS المحددة أو مجموعة المحددات. ومع ذلك، إذا لم يتم العثور على عنصر مطابق، فسيتم إرجاعه فارغًا. طريقة querySelector () هي طريقة واجهة المستند فقط. واجهة المستند هي واجهة تصف الطرق الشائعة بالإضافة إلى خصائص أي مستند html أو XML أو أي نوع آخر من المستندات.

كيف تقوم طريقة querySelector () بالبحث

نحن نعلم أن هناك أنواعًا مختلفة من عمليات البحث التي يمكن استخدامها للبحث عن العناصر. ومع ذلك، يستخدم الأسلوب querySelector (). العمق الأول للطلب المسبق اجتياز عقد الوثيقة. فيه، يبدأ الاجتياز بالعنصر الأول في علامة المستند ثم يجتاز العقد المتسلسلة حسب عدد العقد الفرعية.

جافا منطقية

بناء الجملة

 element = document.querySelector(selectors); 

إن طريقة querySelector () هي إحدى طرق واجهة المستند ولذلك فهي تحتوي على مثل هذا البناء.

يحتوي على معلمة واحدة، 'المحددات'، وهي سلسلة DOM وتحتوي على واحد أو أكثر من محددات CSS الصالحة.

نوع الإرجاع

قد يُرجع 'فارغًا' إذا لم يتم العثور على أي تطابق، وإذا كان العنصر الأول يطابق محددات CSS المحددة (إن وجدت)، فسوف يُرجع هذا العنصر.

ومع ذلك، إذا لم يكن هناك أي محدد CSS صالح، فسوف يؤدي إلى استثناء 'SyntaxError'.

الآن، قبل النظر إلى مثال للتنفيذ، يجب أن نعرف أنواعًا مختلفة من محددات CSS. إذا لم تكن على علم، قم بزيارة موقعنا https://www.javatpoint.com/css-selector قسم من دروس CSS.

سلسلة concat جافا

لذلك، سنقوم الآن بتنفيذ مثال سنغطي فيه محدد CSS ونحتفظ بقيمة العنصر الأول الخاص به باستخدام طريقة querySelector ().

تنفيذ querySelector () مثال

فيما يلي مثال للكود الذي سيجعلنا نفهم عمل طريقة querySelector ():

 class=&apos;colors&apos;&gt;Colors <p> Myclass</p> <p> It is the div p paragraph</p> <p> div p class</p> <p id="myid"> It is p id</p> It is div id //Element selector var e = document.querySelectorAll (&apos;p&apos;); console.log(e); 

الآن، يمكنك رؤية الفرق بين الكود الذي استخدمناه في المثال الأول، طريقة querySelector () وأخرج فقط قيمة المحدد المطابقة الأولى. ولكن، عندما تلاحظ مخرجات هذا المثال الثاني، سترى أنه أعاد جميع القيم المطابقة للمحددات المحددة أو مجموعة المحددات. يظهر إخراج الكود أعلاه أدناه:

شرح الكود

• الكود أعلاه عبارة عن مزيج من html وJavaScript.
• لقد قمنا بتطبيق محددات CSS مختلفة في الكود.
• في قسم JavaScript، استخدمنا طريقة querySelectorAll () واستدعاء محدد عنصر في CSS.
• لذلك، تنتقل طريقة querySelectorAll () الآن إلى التعليمات البرمجية لاجتيازها باستخدام طريقة الطلب المسبق Depth-first وتقوم بإرجاع كافة قيم العناصر المطابقة التي تم تحديدها كمعلمات طريقة querySlectorAll ().

لذلك، بنفس الطريقة، يمكننا استخدام طريقة querySelectorAll () للأنواع الأخرى المختلفة من محددات CSS أيضًا، وسوف تقوم بإرجاع كافة القيم المطابقة للمحددات التي تم تحديدها كوسيطة لها. من أجل تنفيذ الطريقة، استبدل طريقة querySelector () بطريقة querySelectorAll () لمحددات مختلفة، وستجد الطريقة التطابق وستعيد قيمة مطابقة واحدة على الأقل للعنصر المحدد.