JavaScript - DOM Methods

JavaScript - دوال DOM (DOM Methods)

🔸 توفر JavaScript مجموعة من الدوال (DOM Methods) للتعامل مع عناصر HTML داخل الصفحة، مثل تحديد العناصر، تعديل النصوص، إنشاء عناصر جديدة، وغير ذلك.

---

🔹 getElementById()

تُستخدم لتحديد عنصر حسب قيمة id الخاصة به.

document.getElementById("demo").innerHTML = "تم التعديل";

---

🔹 getElementsByTagName()

تُعيد مصفوفة من العناصر التي تحمل نفس اسم الوسم (tag).

const allParagraphs = document.getElementsByTagName("p");
console.log(allParagraphs[0].innerText);

---

🔹 getElementsByClassName()

const boxes = document.getElementsByClassName("box");
boxes[0].style.backgroundColor = "yellow";

---

🔹 querySelector() و querySelectorAll()

تُستخدم لاختيار عناصر باستخدام نفس صيغة CSS.

document.querySelector("#demo").innerHTML = "نص جديد";

const allItems = document.querySelectorAll(".item");
allItems.forEach(el => el.style.color = "blue");

---

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

const newPara = document.createElement("p");
newPara.innerText = "تمت الإضافة ديناميكيًا";
document.body.appendChild(newPara);

---

🔹 حذف عنصر

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

---

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

• استخدم querySelector عند الحاجة لاختيار عنصر باستخدام CSS selector.
• getElementsByTagName و getElementsByClassName تُعيدان HTMLCollection، وليس Array.
• يُفضل التحقق من وجود العنصر قبل محاولة تعديله أو حذفه.