0Pricing
JavaScript Academy · درس

getElementById وgetElementsByClassName

استخدموا أساليب التحديد التقليدية.

getElementById وgetElementsByClassName درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

getElementById

يعيد getElementById العنصر الوحيد الذي يطابق id المحدد، أو يعيد null. يجب أن تكون المعرّفات فريدة في الصفحة، لذلك يعيد هذا الاستدعاء عنصرًا واحدًا.

const header = document.getElementById("header");
console.log(header.tagName);

دون رمز الهاش

بخلاف محددات CSS، تمرّر المعرّف الخام من دون الرمز #. وستفشل المطابقة عند تمرير "#header".

document.getElementById("menu");   // correct
document.getElementById("#menu");  // wrong, returns null

getElementsByClassName

يعيد getElementsByClassName مجموعة HTMLCollection حية تتضمن جميع العناصر التي تحمل الصنف المحدد.

const cards = document.getElementsByClassName("card");
console.log(cards.length);

HTMLCollection حيّة

تتحدّث المجموعة تلقائيًا عند تغيّر DOM. فإذا أضفت .card جديدةً لاحقًا، تزداد قيمة cards.length من دون إعادة تنفيذ الاستعلام.

const cards = document.getElementsByClassName("card");
// later, after appending a new .card element
// cards.length reflects the new total automatically

الفهرسة في مجموعة

يمكنك الوصول إلى العناصر باستخدام الفهرس. تشبه HTMLCollection المصفوفة، لكنها ليست مصفوفة حقيقية.

const cards = document.getElementsByClassName("card");
console.log(cards[0].textContent);

لا تتوفر forEach مباشرةً

بما أن HTMLCollection شبيهة بالمصفوفة (وليست مصفوفة)، فلا تتضمن forEach. حوّلها أولًا أو استخدم حلقة for عادية.

const cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
  console.log(cards[i].textContent);
}

getElementsByTagName

يعيد getElementsByTagName مجموعة HTMLCollection حيّة تتضمن كل عنصر من وسم محدد، مثل جميع الفقرات.

const paras = document.getElementsByTagName("p");
console.log(paras.length);

أصناف متعددة

يمكنك تمرير عدة أسماء أصناف تفصل بينها مسافات. يجب أن تتضمن العناصر جميع الأصناف المدرجة حتى تُضمّن في النتيجة.

const items = document.getElementsByClassName("btn primary");

تحديد النطاق لعنصر

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

const list = document.getElementById("todo-list");
const items = list.getElementsByClassName("done");

التحويل إلى مصفوفة

لاستخدام أساليب المصفوفات مثل map أو filter، انشر المجموعة داخل مصفوفة حقيقية.

const cards = document.getElementsByClassName("card");
const titles = Array.from(cards).map((c) => c.textContent);

متى تستخدم كل واحدة؟

استخدم getElementById لعمليات البحث السريعة عن المعرّفات الفريدة. وفضّل querySelectorAll عندما تريد لقطة ثابتة أو محددات معقدة؛ واستخدم عائلة getElementsBy* عندما تريد تحديدًا مجموعة حيّة.

تحقق سريع

اختر السلوك المناسب.

مراجعة

تعلمت استخدام getElementById (لعنصر واحد باستخدام المعرّف الخام، من دون #)، وgetElementsByClassName وgetElementsByTagName (للحصول على HTMLCollections حيّة). يجب تحويل المجموعات الحية باستخدام Array.from لاستخدام أساليب المصفوفات، كما أنها لا تتضمن forEach خاصةً بها.

الأسئلة الشائعة

هل درس «getElementById وgetElementsByClassName» مجاني؟

نعم — نص درس «getElementById وgetElementsByClassName» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «getElementById وgetElementsByClassName»؟

استخدموا أساليب التحديد التقليدية. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «getElementById وgetElementsByClassName»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. تحديد العناصر باستخدام querySelector
  2. getElementById وgetElementsByClassName
  3. التنقل بين العناصر الأصلية والفرعية والشقيقة
  4. NodeList مقابل HTMLCollection
← العودة إلى JavaScript Academy