Frontend Academy · درس

تغيير المحتوى: textContent وinnerHTML وclassList

اقرأ محتوى النصوص في العناصر وحدّثه، وحقن HTML، وبدّل أصناف CSS وأضفها وأزلها برمجيًا.

تغيير المحتوى: textContent وinnerHTML وclassList درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

قراءة وكتابة textContent

تقرأ element.textContent محتوى العنصر النصي العادي، بما في ذلك جميع العناصر التابعة، أو تضبطه. وهي آمنة، إذ لا تحلّل HTML مطلقًا؛ لذلك لا يؤدي ضبطها بإدخال المستخدم إلى إنشاء ثغرات XSS.

const heading = document.querySelector('h1');
console.log(heading.textContent); // read
heading.textContent = 'New Title'; // write — replaces all children

// Safe with user input:
element.textContent = userInput; // no XSS risk

innerHTML — يُستخدم بحذر

تقرأ element.innerHTML ترميز HTML داخل العنصر أو تضبطه. وهي مريحة، لكنها خطيرة مع إدخال المستخدم، إذ تحلّل HTML وقد تنفّذ البرامج النصية (XSS). لا تضبطوا innerHTML مطلقًا ببيانات مستخدم غير منقّاة.

card.innerHTML = '<strong>Loading...</strong>'; // safe: hardcoded string

// DANGER — never do this:
element.innerHTML = userInput; // XSS vulnerability

// Safe alternative:
const div = document.createElement('div');
div.textContent = userInput;   // won't parse as HTML

innerText مقابل textContent

تعيد innerText النص المرئي فقط، وتحترم CSS display:none، كما تفرض إجراءً للتخطيط. أما textContent فتعيد كل النص، بما في ذلك المخفي، وهي أسرع. يُفضَّل استخدام textContent ما لم تكونوا بحاجة تحديدًا إلى سلوك النص المرئي.

classList — إضافة الفئات وإزالتها

توفر element.classList أساليب لتعديل فئات CSS دون التعامل مع سلسلة className كاملة. وتشمل add() وremove() وtoggle() وcontains() وreplace().

const btn = document.querySelector('.btn');
btn.classList.add('active');         // add a class
btn.classList.remove('disabled');    // remove a class
btn.classList.toggle('open');        // add if absent, remove if present
console.log(btn.classList.contains('active')); // true

toggle مع معامل القوة

تضيف classList.toggle('class', condition) الفئة عندما تكون قيمة condition truthy، وتزيلها عندما تكون falsy. وهي طريقة واضحة لمزامنة فئة مع حالة منطقية.

const isDark = true;
document.body.classList.toggle('dark-mode', isDark);
// No more: if/else with add/remove

قراءة السمات وضبطها

تقرأ element.getAttribute('attr') أي سمة. وتضبطها element.setAttribute('attr', value). وتزيلها element.removeAttribute('attr'). أما element.hasAttribute('attr') فتحقق من وجودها.

const img = document.querySelector('img');
console.log(img.getAttribute('alt'));
img.setAttribute('alt', 'New description');
img.removeAttribute('loading');

سمات data-*

تخزّن سمات data-* المخصصة بيانات إضافية على العناصر دون التأثير في DOM. ويمكن الوصول إليها عبر element.dataset بصيغة camelCase.

<div id="card" data-user-id="42" data-role="admin"></div>

const card = document.querySelector('#card');
console.log(card.dataset.userId); // '42'
console.log(card.dataset.role);   // 'admin'
card.dataset.status = 'active';   // sets data-status

خاصية style

تضبط element.style.propertyName الأنماط المضمّنة. استخدموا صيغة camelCase للخصائص التي تحتوي على واصلات. ويُفضَّل تبديل فئات CSS بدلًا من ضبط الأنماط المضمّنة، إذ تُبقي الفئات الأنماط في ملفات CSS حيث ينبغي أن تكون.

element.style.backgroundColor = '#e2e8f0'; // camelCase
element.style.marginTop = '16px';
element.style.display = 'none';

// Reset inline style:
element.style.removeProperty('background-color');

قراءة الأنماط المحسوبة

يعيد getComputedStyle(element) الأنماط الفعلية المطبَّقة بعد التتالي، وليس الأنماط المضمّنة فقط. ويُستخدم لقراءة الأنماط التي تضبطها فئات CSS أو الإعداد الافتراضي للمتصفح.

const el = document.querySelector('.card');
const styles = getComputedStyle(el);
console.log(styles.fontSize);     // '16px'
console.log(styles.display);      // 'flex'

تعديل وسمي title وmeta

يمكن تغيير عنوان المستند، أي علامة تبويب المتصفح، في أي وقت باستخدام document.title = 'New Title'. وفي تطبيقات SPA، يوفر ذلك تجربة مستخدم أفضل عند الانتقال بين الواجهات.

// Update tab title on route change:
document.title = `${pageName} | MyApp`;

scrollIntoView()

تُمرّر element.scrollIntoView({ behavior: 'smooth' }) العنصر بسلاسة إلى موضع الظهور. وهي مثالية للتنقل بالتمرير إلى قسم ولإبراز أخطاء التحقق في النماذج.

document.querySelector('#pricing').scrollIntoView({ behavior: 'smooth', block: 'start' });

تحقق سريع

أي خاصية ينبغي استخدامها لعرض نص يقدمه المستخدم بأمان في DOM دون خطر XSS؟

مراجعة: تعديل DOM

يضبط textContent النص العادي بأمان. ويضبط innerHTML HTML، لكنه خطير مع إدخال المستخدم. تتولى classList.add/remove/toggle إدارة فئات CSS بوضوح. وتدير setAttribute/dataset سمات HTML. يُفضَّل تبديل الفئات على الأنماط المضمّنة. ويقرأ getComputedStyle الأنماط النهائية المطبَّقة.

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

هل درس «تغيير المحتوى: textContent وinnerHTML وclassList» مجاني؟

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

ماذا ستتعلم في «تغيير المحتوى: textContent وinnerHTML وclassList»؟

اقرأ محتوى النصوص في العناصر وحدّثه، وحقن HTML، وبدّل أصناف CSS وأضفها وأزلها برمجيًا. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «تغيير المحتوى: textContent وinnerHTML وclassList»؟

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

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

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

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

querySelector وquerySelectorAll
addEventListener وكائن Event
تغيير المحتوى: textContent وinnerHTML وclassList
إنشاء العناصر وإلحاقها

← العودة إلى Frontend Academy