كيفية استدعاء رمز JavaScript على عناصر DIV متعددة بدون سمة المعرف

الصورة بواسطة سيرجي Zolkin على Unsplash

كتبهاjs_tut (Twitter)

[راجع CSS Visual Dictionary مع شرح جميع خصائص CSS بصريًا.]

في هذا البرنامج التعليمي ، سنلقي نظرة على كيفية الاتصال بشفرة JavaScript على عدة عناصر DIV بالصفحة ، أو عند فقد سمة id (أو عند استدعاء عنصر فردي ، لسبب ما.)

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

دعنا نقول أن لديك بعض عناصر HTML DIV التعسفية:

  
المحتوى 1
  
المحتوى 2
  
المحتوى 3

يمكنك تحديد عناصر DIV هذه ، على الرغم من عدم وجود سمات معرف لها. في الواقع ، فإنهم يشتركون في نفس اسم الفئة "صورة".

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

1. باستخدام document.getElementsByClassName

لتحديد العناصر المعنية ، يمكنك استخدام دالة document.getElementsByClassName.

تقوم بإرجاع مجموعة غير قابلة للتكرار من جميع العناصر.

وهي مجرد قائمة من العناصر ، تشبه (ولكن ليس بالضبط كما) مجموعة.

دع divs = document.getElementsByClassName ("image") ؛

2. باستخدام document.getElementsByTagName

نفس الشيء هنا ، فقط باستخدام وظيفة جافا سكريبت مختلفة.

دع divs = document.getElementsByTagName ("div")؛

3. باستخدام document.querySelectorAll

يمكنك أن تفعل الشيء نفسه بالضبط مع وظيفة document.querySelectorAll.

دع divs = document.querySelectorAll ("div") ؛

قيمة الإرجاع

ماذا تعود هذه الوظائف؟

console.log (عناصر div)؛ / / دعونا نخرج النتائج

أنواع مختلفة من الأشياء.

ومع ذلك ، تحتوي على نفس العناصر المحددة:

1.) وظائف getElementsByClassName أو getElementsByTagName:

HTMLCollection (3) [div.image ، div.image ، div.image]
0: div.image
1: div.image
2: div.image
الطول: 3 ، __proto__: HTMLCollection

2.) تقوم دالة querySelectorAll بإرجاع نفس الشيء ولكن ككائن NodeList:

NodeList (3) [div.image ، div.image ، div.image]
0: div.image
1: div.image
2: div.image
الطول: 3 ، __proto__: NodeList

querySelectorAll إرجاع كائن NodeList.

getElementsByClassName / getElementsByTagName على HTMLCollection.

كلهم يعرضون قائمة بجميع عناصر DIV المحددة التي يمكن تكرارها.

يمكنك أن تأخذ كائن div ، والذي لن يحتوي على العناصر الثلاثة ، وتكرارها واحداً تلو الآخر عن طريق استدعاء Objects.entries:

Object.entries (divs) .map ((object) => {console.log (object)})؛

يمكنك بدلاً من ذلك استخدام طريقة forEach للكائن Array. ولكن هناك العديد من الطرق المختلفة للقيام بالشيء نفسه في JavaScript. أنا عادة استخدام Object.entries وطريقة .map وأحيانا forEach. لكن الامر متروك لك.

طبيعة المشكلات التي نحلها كمطوري الويب 99٪ من الوقت ليست صعبة للغاية لجعل من الضروري البحث عن تحسين الأداء من اختيار الوظيفة "المناسبة".

معظم نظرات بديلة للنظرة البديلة على حساب استدعاء دالة في خطوة التكرار. ولكن من وجهة نظر الأداء ، لا يهم طريقة التكرار / الحلقة التي تستخدمها إذا كان عليك فقط سرد 10 إلى 50 أو حتى 1000 عنصر. هذا هو الحال مع معظم البرامج المستندة إلى واجهة المستخدم.

دعنا نرفق طريقة addEventListener بكل DIV في المجموعة:

والآن بعد أن وصلنا إلى كل عنصر HTML في القائمة ككائن JavaScript ، فلنفعل شيئًا معهم:

/ * إضافة مستمعي الحدث إلى جميع العناصر باليد * /
divs [0] .addEventListener ("انقر" ، دالة () {
    console.log ("Hello" + this + "(" + this.innerHTML + ") من مستمع الأحداث [0]") ؛
    / * هنا ، يشير "هذا" إلى 1st div * /
})؛
divs [1] .addEventListener ("انقر" ، دالة () {
    console.log ("Hello" + this + "(" + this.innerHTML + ") من مستمع الأحداث [1]")؛
    / * هنا ، يشير "هذا" إلى 2nd div * /
})؛
divs [2] .addEventListener ("انقر" ، دالة () {
    console.log ("Hello" + this + "(" + this.innerHTML + ") من مستمع الأحداث [2]") ؛
    / * هنا ، يشير "هذا" إلى 3rd div * /
})؛

الآن كلما نقرت على أي من DIVs ، سيتم طباعة كائنه و HTMLHTML الداخلي على وحدة التحكم.

في بعض الحالات ، سوف تحتاج إلى القيام بذلك بشكل فردي. ولكن هذا النوع من الهزائم الغرض كله. ألا يمكننا القيام بذلك فقط من خلال سمة onClick؟

ومع ذلك - في معظم الحالات - ربما لن ترغب فقط في تقليل حجم الشفرة الخاصة بك ولكن أيضًا التمرير خلال جميع العناصر الموجودة في مجموعة واحدة تلو الأخرى وتنفيذ نفس شفرة جافا سكريبت JavaScript عليها جميعًا.

طريقة واحدة للقيام بذلك هي استخدام أسلوب Array.map.

لكن طريقة .map تعمل فقط على المصفوفات.

لن تعمل على HTMLCollection. (عاد في الأمثلة أعلاه.)

ليس هناك أى مشكلة. يمكنك تحويل مجموعتنا إلى صفيف. ويمكن القيام بذلك عادة باستخدام طريقة Object.entries.

أولاً ، قم بتحويل HTMLCollection الخاص بك باستخدام Object.entries (مجموعة). بعد ذلك ، نظرًا لأنه في هذه المرحلة ، يمكنك الآن استخدام طريقة map.

باستخدام طريقة .map مع Object.entries (مجموعة)

/ * المشي من خلال مجموعة كاملة من العناصر في HTMLCollection
   بتحويله أولاً إلى صفيف باستخدام Object.entries * /
Object.entries (divs) .map ((object) => {
    / / هنا ، كائن = صفيف [فهرس ، كائن] (الكائن هو
    // عنصر عنصر HTML). وهذا يعني أن العنصر الفعلي
    يتم تخزين // في الكائن [1] ، وليس الكائن. افعل كل ما تحتاجه
    // معها هنا. في هذه الحالة ، نرفق حدث نقرة:
    كائن [1] .addEventListener ("انقر" ، دالة () {
    // إخراج innerHTML للعنصر الذي تم النقر عليه
    console.log ("مرحبًا" + هذا +
                    "(" + this.innerHTML + ") من طريقة الخريطة ...")؛
    })؛
})؛

قم بإنشاء كائن وسيطة لوظيفة سهم الخريطة. سيتلقى هذا الكائن البيانات التي نبحث عنها (الفهرس وعنصر DIV الفعلي.)

داخل كائن حلقة [0] يشير إلى فهرس عنصر حلقات حاليًا من HTMLCollection. (في هذه الحالة 3 منها لأننا بدأنا باستخدام 3

من عناصر HTML بحيث تصبح - واحدة تلو الأخرى - متاحة ككائن [0]

في الكود أعلاه ، لا يتعين علينا استخدام الفهرس. لكن فقط اعلم أنها متوفرة.

كما يشير الكائن [1] فعليًا إلى كائن JavaScript للعنصر.

يمكنك أن تفعل ما تريد مع ذلك. إرفاق أحداث تحويم الماوس / طمس. تحقق من سماتها. احذفهم. أو أي شيء آخر تفعله عادة لكائنات JavaScript ، حسب حالتك.

الفكرة هي أن تكتب شفرة JavaScript مرة واحدة ، ويمكنك تطبيقها على مجموعة من عناصر HTML ، دون الحاجة إلى القيام بذلك لكل عنصر على حدة. هذا كل ما في الأمر.

جافا سكريبت حافلة المدرسة

هل تريد معرفة المزيد عن جافا سكريبت؟ قفز على حافلة المدرسة جافا سكريبت!

www.javascriptteacher.com بواسطةjs_tut (Twitter)

لمزيد من الدروس ، يمكنك زيارة موقع جافا سكريبت التعليمي / نراكم هناك!

  • 14 أيلول (سبتمبر) 2018 - تطبيق عين الطير - بنية التطبيق
  • 10 سبتمبر ، 2018 - ES6 مثال على القوالب الحرفية
  • 6 أيلول (سبتمبر) 2018 - جافا سكريبت التعليمي - كيفية إنشاء مصمم تخطيط Flex عبر الإنترنت (رمز مصدر كامل ، عرض وتوضيحات)