JavaScript • المستوى الثالث • الدرس 2

تعديل محتوى ونصوص العناصر (textContent & innerHTML)

العودة لفهرس المستوى

أهداف الدرس العلمية

تعديل النصوص الظاهرة داخل عناصر الويب بـ textContent.
إدراج وبناء عناصر ووسوم HTML داخل العناصر بـ innerHTML.
التحكم في أنماط CSS المباشرة للعنصر عبر الخاصية style.
فهم الفرق بين الأمن والسرعة عند التعامل مع textContent مقابل innerHTML.

1. الفرق بين textContent و innerHTML

بعد تحديد العنصر، توفر لنا جافاسكريبت خاصيتين رئيسيتين لتعديل ما يحتويه:

textContent

تغير النص المباشر فقط دون تفسير أي وسوم HTML (أسرع وأكثر أماناً ضد هجمات XSS).

javascript

element.textContent = "نص جديد";

innerHTML

تقوم بتفسير وتحويل النصوص إلى عناصر ووسوم HTML حية ومصممة.

javascript

element.innerHTML = "<span>نص</span>";

2. التعديل على التنسيقات مباشرة (element.style)

يمكننا تغيير ألوان وخلفيات ومقاسات العناصر ديناميكياً باستخدام الخاصية style:

javascript

let box = document.querySelector("#box");

box.style.backgroundColor = "green"; // تغيير لون الخلفية
box.style.fontSize = "24px";         // تغيير مقاس الخط

التطبيق العملي المباشر

تحدي الدرس الثاني: تغيير النص والتنسيق

قم بكتابة كود JavaScript داخل وسم <script> لتنفيذ الخطوات التالية:

تحديد العنصر الذي يحمل الـ ID المسمى title وتعديل نصه بـ textContent إلى: "أهلاً بك في التحدي!".
تغيير لون نص العنصر إلى اللون الأصفر عن طريق:
javascript
```
titleEl.style.color = "#facc15";
```

محرر الأكواد — HTML

14px

جارٍ تهيئة البيئة...

المخرجات — المخرجات

الكونسول (Console)

13px

nahda@runner — html

0 lines

(لا يوجد إخراج)

HTMLLn 29, Col 1UTF-8Spaces: 2

682 chars

الدرس السابق الانتقال للدرس الثالث