Get – Set Content

🟦 أولاً: التعامل مع المحتوى (Content)

يوجد 3 خصائص أساسية للتحكم في محتوى العناصر:

الخاصيةالوصفتقرأ النص؟تكتب نص؟تقرأ HTML؟تكتب HTML؟
textContentالنص فقط✅✅❌❌
innerTextالنص المعروض (أشبه بـ CSS visible)✅✅❌❌
innerHTMLكل ما بداخل العنصر (HTML + نص)✅✅✅✅
✅ 1. textContent
  • يُستخدم لقراءة أو تعديل النص فقط داخل العنصر، بدون أي HTML.
<p id="para">مرحبًا <strong>بك</strong></p>

const p = document.getElementById("para");
console.log(p.textContent); // "مرحبًا بك"
p.textContent = "نص جديد";  // يغير المحتوى كله إلى "نص جديد"
JavaScript
✅ 2. innerText
  • مثل textContent لكن يأخذ في الاعتبار التنسيق المرئي (CSS مثل display: none)
  • أبطأ قليلاً
console.log(p.innerText);
p.innerText = "تم التحديث بالنص";
JavaScript
✅ الفرق باختصار:
الخاصيةالوصف
textContentتجلب كل النص داخل العنصر حتى لو مخفيًا بـ CSS
innerTextتجلب النص الظاهر فقط للمستخدم (يتأثر بـ CSS مثل display: none أو visibility: hidden)
📌 مثال عملي بـ CSS:
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>

  <div id="test">
    هذا نص ظاهر
    <span class="hidden">وهذا نص مخفي</span>
  </div>

  <script>
    let el = document.getElementById("test");

    console.log("textContent:", el.textContent);
    console.log("innerText:", el.innerText);
  </script>

</body>
</html>
JavaScript
🔍 التفسير:
  • textContent جلب كل النص داخل العنصر، سواء كان ظاهرًا أو مخفيًا.
  • innerText تجاهل النص الموجود داخل العنصر .hidden لأن display: none يمنعه من الظهور، وبالتالي لا يُعتبر جزءًا من النص المرئي.
⚠️ ملاحظة تقنية:
  • innerText أبطأ من textContent لأنه يعيد الحساب بناءً على تنسيق الصفحة الظاهري (layout).
  • لذا إن كنت لا تهتم بما هو مرئي للمستخدم، استخدم textContent.
✅ 3. innerHTML
  • يُستخدم لقراءة أو كتابة المحتوى بما في ذلك الوسوم (Tags)
console.log(p.innerHTML); // "مرحبًا <strong>بك</strong>"
p.innerHTML = "مرحبا <em>بك</em> مرة أخرى";
JavaScript
🟦 ثانيًا: التعامل مع السمات (Attributes)
✅ طرق التعامل:
الطريقةالوصف
getAttribute(name)للحصول على قيمة السمة
setAttribute(name, value)لتعيين أو تحديث السمة
removeAttribute(name)لإزالة السمة
hasAttribute(name)يتحقق إذا كانت السمة موجودة
<img id="logo" src="logo.png" alt="شعار الموقع" width="200" />

//////////////////////////
const img = document.getElementById("logo");

// قراءة السمات
console.log(img.getAttribute("src"));    // "logo.png"
console.log(img.getAttribute("alt"));    // "شعار الموقع"

// تعديل السمات
img.setAttribute("src", "new-logo.png");
img.setAttribute("alt", "شعار جديد");

// التحقق من وجود سمة
console.log(img.hasAttribute("width"));  // true

// إزالة سمة
img.removeAttribute("width");
JavaScript
🟦 ثالثًا: طريقة مختصرة باستخدام خصائص مباشرة لبعض السمات الشائعة

بعض السمات يمكن التعامل معها كمتغيرات مباشرة:

const link = document.querySelector("a");

link.href = "https://google.com";
link.target = "_blank";
link.textContent = "اذهب إلى جوجل";
JavaScript
🟨 ملخص عملي:
النوعطريقة القراءةطريقة التعديل
نص فقطelement.textContentelement.textContent = "..."
HTML كاملelement.innerHTMLelement.innerHTML = "..."
سمة Attributeelement.getAttribute("name")element.setAttribute("name", "value")
خاصية مباشرةelement.href, element.srcelement.href = "..."
✅ ما هي السمة (Attribute)؟

السمة (Attribute) هي خاصية داخل وسم HTML توضح معلومات إضافية.

مثال:

<input type="text" id="username" placeholder="اكتب اسمك" required />
JavaScript
  • type, id, placeholder, required → كلها سمات
  • نحتاج أحيانًا في الجافاسكربت أن نعرف:
    • هل السمة موجودة؟
    • ما قيمتها؟
    • هل يجب تعديلها أو حذفها؟
🟦 طرق التحقق من السمات في JavaScript
1. hasAttribute(name)

يتحقق هل السمة موجودة أم لا (ترجع true أو false)

2. getAttribute(name)

تُرجع قيمة السمة إذا كانت موجودة، أو null إذا لم تكن.

3. hasAttributes()

تتحقق هل لدى العنصر أي سمات على الإطلاق، وليس سمة معينة.

✅ مثال عملي شامل
<input type="text" id="username" placeholder="اسم المستخدم" required />


const input = document.getElementById("username");

// التحقق من وجود سمة
console.log(input.hasAttribute("placeholder")); // true
console.log(input.hasAttribute("maxlength"));   // false

// الحصول على قيمة السمة
console.log(input.getAttribute("placeholder")); // "اسم المستخدم"
console.log(input.getAttribute("type"));        // "text"

// التحقق من وجود أي سمات
console.log(input.hasAttributes()); // true (لديه عدة سمات)
JavaScript

🟨 استخدام داخل الشروط:

if (input.hasAttribute("required")) {
  console.log("هذا الحقل مطلوب!");
}
JavaScript
🔸 ملاحظات مهمة:
دالةماذا تُرجع؟تستخدم مع
hasAttribute("name")true أو falseهل السمة موجودة
getAttribute("name")القيمة أو nullقراءة السمة
hasAttributes()true أو falseهل يوجد أي سمة على الإطلاق
✅ مثال واقعي مع زر:
<button id="sendBtn" disabled>إرسال</button>

const btn = document.getElementById("sendBtn");

if (btn.hasAttribute("disabled")) {
  console.log("الزر معطّل حالياً");
}

console.log(btn.getAttribute("disabled")); // "" (قيمة فارغة، لكنها موجودة)
JavaScript
🟩 تلخيص:
الوظيفةالكود
هل السمة موجودة؟element.hasAttribute("name")
ما قيمة السمة؟element.getAttribute("name")
هل العنصر يحتوي على أي سمات؟element.hasAttributes()