في عالم تطوير الويب، يعتبر استخدام وظائف JavaScript الأساسية مثل getElementById و getElementsByClassName أمرًا حيويًا لفهم كيفية التعامل مع عناصر HTML وتلاعبها بواسطة البرمجة السكريبتية. في هذا السياق، يقوم الكود الذي قدمته بمحاولة استخدام getElementsByClassName بشكل غير صحيح.
أولًا، دعونا نقوم بفحص الكود:
htmlhtml>
<html>
<body>
<p>Click the button.p>
<button onclick="myFunction()">Try itbutton>
<p class="demo" id="demo2">anythingp>
<script>
function myFunction() {
var str = "How are you doing today?";
var res = str.split(" ");
document.getElementsByNameClass("demo").innerHTML = res;
}
script>
body>
html>
المشكلة الرئيسية هنا تكمن في استخدام الدالة document.getElementsByNameClass، والتي هي غير موجودة في واجهة برمجة التطبيقات (API) للمستند (Document Object Model – DOM). الطريقة الصحيحة لاستهداف العناصر التي تحمل فئة معينة هي باستخدام getElementsByClassName.
لتصحيح الكود، يمكن تغيير هذا السطر:
javascriptdocument.getElementsByNameClass("demo").innerHTML = res;
إلى:
javascriptdocument.getElementsByClassName("demo")[0].innerHTML = res.join(" ");
بهذا التعديل، سيقوم الكود بتحديد العنصر الذي يحمل الفئة “demo” باستخدام getElementsByClassName، ومن ثم يحدد العنصر الأول (في هذه الحالة هو العنصر الوحيد) باستخدام [0]. بالإضافة إلى ذلك، يجب استخدام res.join(" ") بدلاً من res لتحويل المصفوفة إلى سلسلة نصية.
يكمن الفارق الأساسي بين getElementById و getElementsByClassName فيما إذا كانوا يستهدفون عنصرًا واحدًا (باستخدام getElementById) أو مجموعة من العناصر (باستخدام getElementsByClassName).
المزيد من المعلومات
بالطبع، دعونا نوسّع نطاق النقاش لنفهم المزيد حول getElementById و getElementsByClassName وكيفية استخدامها في تطوير صفحات الويب.
getElementById:
- هي وظيفة تستخدم لاسترجاع عنصر HTML واحد باستناد إلى معرف فريد (id) يتم تحديده في الوثيقة.
- يجلب العنصر الذي يحمل الـ id المحدد ويعيد مرجعًا له.
- يعد تحديد العنصر بواسطة id أكثر كفاءة لأنه يفترض أن يكون الـ id فريدًا في الوثيقة، وبالتالي لا يوجد تكرار.
getElementsByClassName:
- هي وظيفة تستخدم لاسترجاع مجموعة من العناصر التي تحمل نفس الفئة (class).
- تقوم بإرجاع مجموعة (NodeList) من العناصر التي تحتوي على الفئة المحددة.
- يمكن الوصول إلى العناصر في المجموعة عن طريق فهرس العنصر داخل NodeList.
في الكود الخاص بك، حين قمت باستخدام getElementsByClassName("demo")، فإنك قد حصلت على NodeList للعناصر التي تحمل الفئة “demo”. وعندما حاولت تعيين innerHTML، فإنها لا تعمل مباشرة على NodeList، ولذلك قمت باستخدام [0] لاستهداف العنصر الوحيد الموجود في NodeList.
تجنب استخدام getElementsByClassName إذا كنت تعلم أن هناك عنصرًا واحدًا يحمل الفئة المحددة، واستخدم getElementById للحصول على أداء أفضل.
عند تطوير صفحات الويب، يفضل أيضًا استخدام أساليب أكثر حداثة مثل استخدام مكتبات JavaScript مثل jQuery أو استخدام ميزات ES6 وما بعدها لتسهيل التعامل مع الواجهة البرمجية للمستند.
