| الخاصية/الدالة | الوظيفة | ملاحظة أمنية |
|---|---|---|
| textContent | تعديل نص خام فقط | آمن دائماً |
| innerHTML | تعديل محتوى HTML كامل | خطر XSS مع مدخلات غير موثوقة |
| setAttribute() | تعيين خاصية وسم | — |
| classList.add/remove/toggle | التحكم في فئات CSS | الطريقة الموصى بها للتصميم |
بعد تحديد عنصر من الصفحة، يمكن تعديل محتواه بعدة طرق. textContent تُعدّل النص الخام داخل العنصر فقط، بأمان تام دون تفسير أي وسوم HTML بداخله — الخيار الأكثر أماناً عندما تتعامل مع نص مُدخل من المستخدم. innerHTML تُعدّل المحتوى الداخلي وتُفسّره كـ HTML فعلي، مما يسمح بإدراج وسوم كاملة، لكنه يحمل خطر أمني حقيقي يُسمى XSS (Cross-Site Scripting) إذا احتوى النص المُدرَج على كود مُدخل مباشرة من مستخدم غير موثوق.
لتعديل خصائص وسم HTML مثل src أو href أو disabled، تستخدم setAttribute() لتعيين قيمة جديدة، وgetAttribute() لقراءة القيمة الحالية، وremoveAttribute() لحذف الخاصية بالكامل. كثير من الخصائص الشائعة (مثل id وclassName وvalue) متوفرة أيضاً كخصائص مباشرة على كائن العنصر نفسه (element.id، element.value) وهي أسرع وأبسط من setAttribute في هذه الحالات.
لتعديل التصميم (Style)، يمكنك الوصول لخاصية style على العنصر مباشرة وتعيين خصائص CSS عليها (مع ملاحظة أن أسماء الخصائص متعددة الكلمات تُكتب بصيغة camelCase في JavaScript، مثل backgroundColor بدل background-color). لكن الطريقة الأفضل والأكثر احترافية في المشاريع الحقيقية هي تعريف الأنماط في ملف CSS كفئات (Classes)، ثم استخدام classList.add() وclassList.remove() وclassList.toggle() للتحكم في إضافة أو إزالة أو تبديل هذه الفئات ديناميكياً — هذا يفصل المنطق (JS) عن التصميم (CSS) بشكل نظيف.
| 1 | const عنصر = document.querySelector("#box"); |
| 2 | |
| 3 | عنصر.textContent = "نص آمن"; |
| 4 | عنصر.innerHTML = "<strong>نص</strong> بتنسيق"; |
| 5 | |
| 6 | عنصر.setAttribute("data-id", "42"); |
| 7 | عنصر.style.backgroundColor = "blue"; // مباشر |
| 8 | |
| 9 | عنصر.classList.add("active"); // إضافة فئة |
| 10 | عنصر.classList.remove("hidden"); // إزالة فئة |
| 11 | عنصر.classList.toggle("open"); // تبديل الفئة |
مثال 1: التحكم في التصميم عبر classList
| 1 | // الطريقة الاحترافية: classList بدل style المباشر |
| 2 | const بطاقة = document.querySelector(".card"); |
| 3 | |
| 4 | function تفعيل() { |
| 5 | بطاقة.classList.add("card--active"); |
| 6 | بطاقة.classList.remove("card--disabled"); |
| 7 | } |
| 8 | |
| 9 | // في CSS: .card--active { border-color: blue; box-shadow: ...; } |
مثال 2: خطر XSS مع innerHTML وكيفية تجنبه
| 1 | // خطر innerHTML مع مدخلات مستخدم غير موثوقة |
| 2 | const تعليق_المستخدم = "<img src=x onerror=alert(1)>"; // كود ضار محتمل |
| 3 | |
| 4 | // ❌ خطير: قد ينفذ الكود الضار |
| 5 | // عنصر.innerHTML = تعليق_المستخدم; |
| 6 | |
| 7 | // ✅ آمن: يُعامل كنص خام فقط |
| 8 | عنصر.textContent = تعليق_المستخدم; |