JavaScript - DOM Elements

JavaScript - DOM Elements (عناصر الصفحة)

🔸 عناصر DOM هي تمثيلات كائنية لعناصر HTML. يمكنك استخدام JavaScript للوصول إليها وتغيير النصوص، السمات، الأنماط، وحتى حذفها أو إنشاؤها.

---

🔹 تغيير المحتوى باستخدام innerHTML و innerText

document.getElementById("demo").innerHTML = "مرحبًا بك!";
document.getElementById("demo").innerText = "نص بدون تنسيق HTML";

📌 innerHTML تسمح بإدخال وسوم HTML، أما innerText فهي لعرض النص فقط.

---

🔹 تغيير خصائص العنصر (Attributes)

const link = document.getElementById("myLink");
link.href = "https://google.com";
link.target = "_blank";

---

🔹 استخدام setAttribute() و getAttribute()

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

img.setAttribute("src", "logo.png");
img.setAttribute("alt", "الشعار");

let srcValue = img.getAttribute("src");

---

🔹 إزالة السمات

img.removeAttribute("alt");

---

🔹 حذف عنصر من الصفحة

const elem = document.getElementById("toRemove");
elem.remove();

---

🔹 إنشاء عنصر جديد وإضافته

const newDiv = document.createElement("div");
newDiv.innerHTML = "عنصر جديد";
document.body.appendChild(newDiv);

---

⚠️ ملاحظات مهمة

• يمكنك التحكم الكامل في عناصر الصفحة من خلال JavaScript.
• عند استخدام innerHTML احذر من إدخال كود غير آمن (XSS).
• setAttribute و getAttribute مفيدان للتعامل مع الخصائص المخصصة (custom attributes).