اختيار عناصر الصفحة في JavaScript: getElementById و querySelector و querySelectorAll

في DOM، لا يمكنك تعديل عنصر إلا بعد "إمساكه" أولاً. لذلك اختيار العناصر (DOM Selection) هو المهارة الأساسية قبل تغيير النص أو التنسيق أو الأحداث.

هذا الدرس يجيب عملياً على سؤال شائع: كيف أحدد العنصر الصحيح في JavaScript بدون أخطاء؟

1) getElementById() عندما يكون لديك ID فريد

const title = document.getElementById("main-title");
console.log(title);

ماذا يفعل هذا الكود؟ يختار عنصراً واحداً يحمل id="main-title".

النتيجة المتوقعة: إذا كان موجوداً ستحصل على العنصر، وإلا null.

خطأ شائع: تكرار نفس الـ id في الصفحة، وهذا يكسر مبدأ uniqueness.

2) querySelector() (الطريقة المرنة)

تستعمل نفس محددات CSS التي تعرفها مسبقاً.

const firstBtn = document.querySelector(".btn");
const heroTitle = document.querySelector("#hero-title");
const firstParagraph = document.querySelector("p");

ماذا يفعل هذا الكود؟ يختار أول عنصر مطابق لكل محدد.

النتيجة المتوقعة: عنصر واحد فقط لكل استدعاء.

خطأ شائع: نسيان النقطة . للكلاس أو الهاش # للـ id.

3) querySelectorAll() لاختيار عدة عناصر

const buttons = document.querySelectorAll(".btn");
console.log(buttons.length);

buttons.forEach((btn) => {
  btn.style.borderRadius = "10px";
});

ماذا يفعل هذا الكود؟ يحدد كل الأزرار بالكلاس btn ثم يعدلها عبر حلقة.

النتيجة المتوقعة: تطبيق نفس التعديل على مجموعة عناصر.

خطأ شائع: التعامل مع النتيجة كعنصر واحد، بينما هي NodeList.

مثال واقعي: اختيار داخل جزء محدد من الصفحة

const card = document.querySelector(".product-card");
const title = card.querySelector("h3");
const price = card.querySelector(".price");

console.log(title.textContent, price.textContent);

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

النتيجة المتوقعة: تجنب اختيار عناصر من أماكن أخرى بالخطأ.

خطأ شائع: استخدام document.querySelector دائماً رغم الحاجة لتحديد نطاق البحث.

فحص الأمان قبل التعديل على العنصر

const alertBox = document.querySelector(".alert-box");

if (alertBox) {
  alertBox.textContent = "تم التحديث بنجاح";
}

ماذا يفعل هذا الكود؟ يتأكد أن العنصر موجود قبل التعديل لتجنب الخطأ.

النتيجة المتوقعة: لا يحدث كسر للكود إذا العنصر غير موجود.

خطأ شائع: كتابة alertBox.textContent مباشرة ثم ظهور خطأ Cannot read properties of null.

Story قصيرة: لماذا لم يعمل الزر؟

متعلم كتب محدداً خاطئاً: "btn-primary" بدل ".btn-primary". النتيجة كانت null والكود لم يشتغل. بعد تصحيح المحدد وإضافة فحص if (element)، اشتغل كل شيء.

مقارنة سريعة بين طرق الاختيار

Checklist سريعة

• أميز بين اختيار عنصر واحد واختيار عدة عناصر.
• أكتب محددات CSS بشكل صحيح (. للكلاس، # للـ id).
• أتحقق من وجود العنصر قبل التعديل عليه.
• أستخدم نطاقاً محلياً للبحث عند الحاجة لتفادي التداخل.

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

ما الأفضل: getElementById أم querySelector؟

إذا كان لديك id فريد فالأول ممتاز، لكن querySelector أكثر مرونة في معظم السيناريوهات.

ما الفرق بين querySelector و querySelectorAll؟

الأول يعيد أول عنصر فقط، الثاني يعيد كل العناصر المطابقة كقائمة.

لماذا أحصل على null؟

إما أن المحدد خطأ، أو العنصر لم يتم تحميله بعد وقت التنفيذ.

للرجوع للأساس: مقدمة DOM. وللاستكمال: تغيير محتوى العناصر.