كيف تتجنب الإحباط عن طريق اختيار محدد JavaScript الصحيح

دليل سريع حول كيفية تأثير المحددات على التعليمات البرمجية الخاصة بك

أثناء العمل في مشروع ، واجهت مشكلة في الكود الخاص بي. كنت أحاول تحديد عناصر HTML متعددة في مجموعة ثم تغيير تلك العناصر بناءً على بعض الشروط المحددة مسبقًا. لقد كافحت لمدة أربع ساعات تقريبًا من وقت الترميز (على مدار يومين) لتصحيح أخطاء الكود الخاص بي ومحاولة معرفة سبب عدم حصولي على النتيجة المرجوة.

تبين أنني استخدمت document.querySelectorAll () لتعيين عناصري إلى متغير ، ثم كنت أحاول تغيير هذه العناصر. المشكلة الوحيدة هي أن محدد JavaScript معين يقوم بإرجاع قائمة عقدة ثابتة . نظرًا لأنه ليس تمثيلًا مباشرًا للعناصر ، لم أتمكن من تغييرها لاحقًا في الكود الخاص بي.

الافتراضات

في هذه المقالة ، أفترض أن بعض الأشياء صحيحة:

  • أنت تعمل في JavaScript "عادي أو فانيلا" (بدون إطار عمل / مكتبة)
  • لديك فهم أساسي لعناصر / محددات JavaScript
  • لديك فهم أساسي لـ DOM

الجرأة

في حال كنت أفترض الكثير ، فقد قدمت روابط إلى المواد ذات الصلة داخل المقالة التي آمل أن تكون مفيدة.

يعد JavaScript نظامًا بيئيًا واسعًا وغنيًا بحيث لا عجب أن هناك العديد من الطرق لإنجاز نفس المهمة. اعتمادًا على مهمتك ، فإن الطريقة التي يتم بها إنجازها مهمة إلى حد ما.

يمكنك حفر حفرة بيديك ، لكن القيام بذلك أسهل وأكثر فاعلية باستخدام مجرفة.

تحقيقا لهذه الغاية ، آمل أن "أعطيك مجرفة" بعد قراءة هذا المقال.

اختيار الأداة المناسبة للوظيفة

لدي سؤال ، "أي محدد عنصر يجب أن أستخدمه؟" عدة مرات. حتى الآن ، لم تكن لدي رغبة كبيرة أو أحتاج إلى تعلم الفرق طالما أن الكود الخاص بي ينتج النتيجة المرجوة. بعد كل شيء ، ما هو لون سيارة الأجرة طالما أنها تصل بك إلى وجهتك بأمان وفي الوقت المناسب ... أليس كذلك؟

لنبدأ ببعض الطرق لتحديد عناصر DOM في JavaScript. هناك المزيد من الطرق (على ما أعتقد) لتحديد العناصر ، ولكن تلك المدرجة هنا هي الأكثر انتشارًا التي صادفتها.

document.getElementById ()

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

تقوم بإرجاع كائن يطابق السلسلة التي تم تمريرها إليه. يتم إرجاعه فارغًا إذا لم يتم العثور على معرّف مطابق في HTML.

مثال بناء الجملة - & g t؛ document.getElementById ('main_conten t')

على عكس بعض المحددات التي سنصل إليها لاحقًا في المقالة ، ليست هناك حاجة إلى # للإشارة إلى معرف العنصر.

document.getElementsByTagName ()

لاحظ "S" في العناصر - هذا المحدد يعرض مضاعفاتفي هيكل يشبه المصفوفةالمعروف باسم مجموعة HTML - يتم البحث في كل المستند بما في ذلك العقدة الجذرية (كائن المستند) لاسم مطابق. يبدأ محدد العنصر هذا في أعلى المستند ويستمر لأسفل ، ويبحث عن العلامات التي تطابق السلسلة التي تم تمريرها.

إذا كنت تبحث عن استخدام طرق مصفوفة أصلية ، فلن يحالفك الحظ. أي ما لم تقم بتحويل النتائج التي تم إرجاعها إلى مصفوفة لتكرارها ، أو تستخدم عامل انتشار ES6 - وكلاهما خارج نطاق هذه المقالة. لكنني أردت أن تعرف أنه من الممكن استخدام طرق المصفوفة إذا كنت ترغب في ذلك.

مثال بناء الجملة - & g t؛ document.getElementsByTagName ('header_li nks'). هذا المحدد أيضًا accep ts p أو div أو body أو أي HTML t ag صالح .

document.getElementsByClassName ()

محدد اسم الفئة - لاحظ مرة أخرى الحرف "S" في العناصر - يقوم هذا المحدد بإرجاع مضاعفاتفي هيكل يشبه المصفوفةالمعروفة باسم مجموعة HTML لأسماء الفئات. إنها تطابق السلسلة التي تم تمريرها (يمكن أن تأخذ أسماء فئات متعددة ، على الرغم من أنها مفصولة بمسافة) ، وتبحث في كل المستند ، ويمكن استدعاؤها على أي عنصر ، وتعيد فقط أحفاد الفئة التي تم تمريرها في الفصل.

أيضا لا . (نقطة) ضرورية للدلالة على اسم الفئة

مثال على بناء الجملة: document.getElementsByClassName ('classNam e')

document.querySelector ()

سيؤدي هذا المحدد إلى إرجاع عنصر واحد (1) فقط.

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

مثال على بناء الجملة: document.querySelector ('# side_note ') أو document.querySelector ('. header_link s')

بخلاف كل الأمثلة السابقة ، يتطلب هذا المحدد ملف. (نقطة) للإشارة إلى فئة أو # (octothorp) للإشارة إلى معرف وتعمل مع جميع محددات CSS.

document.querySelectorAll ()

يُرجع هذا المحدد المضاعفات التي تطابق السلسلة التي تم تمريرها ويرتبها في مصفوفة أخرى مثل البنية المعروفة باسم قائمة العقد.

كما هو الحال مع بعض الأمثلة السابقة ، لا يمكن لقائمة العقد الاستفادة من طرق المصفوفة الأصلية مثل .forEach (). لذلك إذا كنت تريد استخدام هذه ، يجب عليك أولاً تحويل قائمة العقد إلى مصفوفة. إذا كنت لا ترغب في التحويل ، فلا يزال بإمكانك تكرار قائمة العقد باستخدام عبارة for… in.

يجب أن تتطابق السلسلة التي تم تمريرها مع محدد CSS صالح - المعرف ، وأسماء الفئات ، والأنواع ، والسمات ، وقيم السمات ، إلخ.

مثال على بناء الجملة: document.querySelectorAll ('. footer_link s')

تغليف

من خلال اختيار المحدد المناسب لاحتياجات الترميز الخاصة بك ، ستتجنب العديد من المزالق التي وقعت فيها. قد يكون الأمر محبطًا بشكل لا يصدق عندما لا يعمل الكود الخاص بك ، ولكن من خلال التأكد من أن المحدد الخاص بك يتوافق مع احتياجاتك الظرفية ، فلن تواجه مشكلة في "الحفر بمجرافك" :)

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