تغيير محتوى عناصر الصفحة في JavaScript: textContent و innerHTML والسمات

بعد أن تعلمت اختيار العنصر الصحيح من الصفحة، الخطوة التالية هي تغيير المحتوى الذي يراه المستخدم فعلاً. هذا يشمل النصوص، HTML الداخلي، والسمات مثل روابط الصور.

هذا الدرس مهم جداً لبناء واجهات ديناميكية: رسالة نجاح بعد حفظ، تحديث سعر منتج، أو تبديل صورة عند الضغط.

1) textContent للنصوص الآمنة

const title = document.querySelector("h1");
title.textContent = "مرحبا بك في الدرس الجديد";

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

النتيجة المتوقعة: العنوان يتبدل مباشرة بنص جديد.

خطأ شائع: توقع تنسيق HTML داخل النص، لكن textContent لا يفسر الوسوم.

2) innerHTML لإدراج HTML

const box = document.querySelector(".info-box");
box.innerHTML = "<p>تم الحفظ بنجاح <strong>100%</strong></p>";

ماذا يفعل هذا الكود؟ يضع محتوى HTML داخل العنصر، وليس نصاً عادياً فقط.

النتيجة المتوقعة: ظهور نص مع تنسيق strong.

خطأ شائع: استخدامه مع مدخلات المستخدم الخام، مما قد يفتح ثغرة XSS.

3) تعديل السمات (Attributes)

const myImg = document.querySelector(".cover");
myImg.src = "images/js-advanced.jpg";
myImg.alt = "JavaScript Advanced Course";

ماذا يفعل هذا الكود؟ يغيّر مصدر الصورة والنص البديل.

النتيجة المتوقعة: تظهر صورة جديدة مباشرة في الصفحة.

خطأ شائع: كتابة مسار صورة خاطئ فيظهر عنصر مكسور.

4) تعديل روابط التنقل ديناميكياً

const nextLink = document.querySelector(".next-lesson-link");
nextLink.href = "/courses/javascript/dom-events.php";
nextLink.textContent = "الانتقال إلى درس DOM Events";

ماذا يفعل هذا الكود؟ يغير رابط وزر الانتقال إلى الدرس التالي.

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

خطأ شائع: نسيان تحديث النص بعد تحديث الرابط مما يسبب لبساً للمستخدم.

مثال واقعي: بطاقة منتج تتحدث لحظياً

const nameEl = document.querySelector(".product-name");
const priceEl = document.querySelector(".product-price");
const badgeEl = document.querySelector(".product-badge");

nameEl.textContent = "Wireless Keyboard";
priceEl.textContent = "$49";
badgeEl.innerHTML = "<span class='text-success'>In Stock</span>";

ماذا يفعل هذا الكود؟ يحدث اسم المنتج وسعره وحالة التوفر بدون إعادة تحميل الصفحة.

النتيجة المتوقعة: واجهة سريعة وتفاعلية.

خطأ شائع: وضع كل شيء داخل innerHTML رغم أن جزءاً كبيراً يمكن أن يكون textContent.

Story قصيرة: تنبيه نجاح اختفى!

مطور مبتدئ كان يرسل رسالة نجاح للمستخدم لكن الرسالة تظهر كنص HTML حرفي. السبب: استخدم textContent مع وسوم. عندما احتاج تنسيقاً استخدم innerHTML في عنصر داخلي موثوق، وعاد كل شيء صحيحاً.

مقارنة سريعة

Checklist سريعة

• أعرف الفرق بين textContent وinnerHTML.
• لا أستخدم innerHTML مع بيانات غير موثوقة.
• أستطيع تعديل سمات مثل src وhref وalt.
• أستطيع بناء تحديث واجهة بسيط بدون reload.

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

ما الفرق بين textContent و innerHTML؟

الأولى نص فقط، الثانية تفسر HTML وتسمح بإدراج الوسوم داخل العنصر.

هل innerHTML غير آمنة دائماً؟

ليست خطرة دائماً، لكنها تصبح خطرة عند تمرير مدخلات المستخدم مباشرة دون تنقية.

كيف أغيّر رابطاً أو صورة في DOM؟

عدّل خصائص العنصر مباشرة مثل a.href وimg.src بعد اختياره.

للرجوع خطوة: DOM Elements. للمتابعة: DOM Events.