شرح DOM و BOM في JavaScript مع أمثلة عملية

يعني إيه DOM في JavaScript؟ 🌐🧠​

DOM (Document Object Model) هو “تمثيل” صفحة الـ HTML على شكل شجرة عناصر (Nodes).
ومن خلاله JavaScript تقدر:

• تقرأ وتعدّل النصوص 📝
• تغيّر الصور والروابط 🖼️🔗
• تضيف عناصر جديدة أو تحذف عناصر ✅❌
• تتفاعل مع المستخدم بالأحداث (Events) 👆⌨️

ببساطة: DOM هو اللي بيخلّي JavaScript تتحكم في صفحة الويب.

---

الفرق بين getElementById و querySelector 🔍​

• getElementById بيدور على عنصر واحد بالـ ID فقط
• querySelector بيدور بأي CSS Selector زي:#id - .class - div p a

const title = document.getElementById("title");
const firstBtn = document.querySelector(".btn");

✅ لو عايز أكتر من عنصر استخدم:

const buttons = document.querySelectorAll(".btn");

---

إزاي تضيف عنصر جديد للـ DOM؟ ➕🧩​

الخطوات غالبًا:

1. تعمل عنصر بـ createElement
2. تحط فيه محتوى
3. تلزقه في الصفحة بـ appendChild أو insertBefore

const newDiv = document.createElement("div");
newDiv.textContent = "Hello World!";
document.body.appendChild(newDiv);

---

الفرق بين innerHTML و textContent 🧾⚠️​

• innerHTML بتجيب/تعدل HTML كامل جوه العنصر (وممكن تدخل عناصر جوه عناصر)
• textContent بتتعامل مع نص فقط (أأمن وأسهل)

const box = document.querySelector("#box");

box.innerHTML = "<b>Bold Text</b>";
box.textContent = "<b>مش هتتحول لبولد</b>";

✅ نصيحة أمنية: لو داخل بيانات من المستخدم… استخدم textContent علشان تتجنب مشاكل XSS.

---

إزاي تحذف عنصر من DOM؟ 🗑️​

فيه طريقتين مشهورين:

const el = document.getElementById("myElement");
el.remove();

أو:

document.body.removeChild(el);

---

يعني إيه Events وإزاي أربط حدث بعنصر؟ 🎯​

الأحداث هي تفاعل المستخدم زي:

• click 👆
• input ⌨️
• submit 📩
• mouseover 🖱️

والأفضل تربطها بـ addEventListener:

const button = document.getElementById("myButton");

button.addEventListener("click", () => {
  alert("Button clicked!");
});

---

classList: إضافة وحذف وتبديل الكلاسات 🎨​

classList بتسهّل التحكم في الكلاسات:

const el = document.getElementById("myElement");

el.classList.add("newClass");
el.classList.remove("oldClass");
el.classList.toggle("active");

---

إزاي تجيب كل العناصر اللي ليها نفس class؟ 👥​

const elements1 = document.getElementsByClassName("myClass");
const elements2 = document.querySelectorAll(".myClass");

✅ querySelectorAll بتدّيك NodeList وتقدر تلف عليها بسهولة.

---

Event Bubbling يعني إيه؟ 🫧​

لما تعمل click على عنصر جوه عنصر…
الحدث بيطلع لفوق “بالتدريج” لحد الـ parent وبعده… وده اسمه Event Bubbling.
وممكن توقفه:

element.addEventListener("click", (event) => {
  event.stopPropagation();
});

---

تعديل CSS من JavaScript 🎨🧷​

تقدر تعدّل CSS مباشرة بـ style:

const el = document.getElementById("myElement");
el.style.backgroundColor = "blue";
el.style.fontSize = "20px";

---

يعني إيه window في JavaScript؟ 🪟​

window هو الكائن الأعلى في المتصفح، ومن خلاله تقدر توصل لـ:

• document
• localStorage
• setTimeout
• location
• history

بمعنى: أي حاجة تخص المتصفح غالبًا هتلاقيها جوه window.

---

الفرق بين nodeName و tagName 🏷️​

• nodeName: اسم أي Node (عنصر/نص/تعليق)
• tagName: اسم الـ Tag بس (للعناصر فقط)

const el = document.getElementById("myElement");
console.log(el.nodeName); // "DIV"
console.log(el.tagName);  // "DIV"

---

dataset: قراءة data-* بسهولة 🧾​

<div id="myElement" data-role="admin" data-id="123"></div>

const el = document.getElementById("myElement");
console.log(el.dataset.role); // admin
console.log(el.dataset.id);   // 123

---

التنقل داخل DOM: parent/child/sibling 🧭​

• firstChild / lastChild
• nextSibling / previousSibling
• parentNode

console.log(el.firstChild);
console.log(el.lastChild);
console.log(el.nextSibling);
console.log(el.previousSibling);
console.log(el.parentNode);

✅ ملحوظة: firstChild ممكن تكون Text Node (مسافات/سطر جديد).
لو عايز عناصر بس استخدم: firstElementChild و nextElementSibling.

---

nodeType و nodeValue ببساطة 🧩​

• nodeType:
  • 1 عنصر
  • 3 نص
  • 8 تعليق
• nodeValue:
  • قيمة النص/التعليق
  • العنصر نفسه غالبًا nodeValue = null

---

الفرق بين offsetWidth و clientWidth 📏​

• offsetWidth: العرض + border + scrollbar
• clientWidth: العرض الداخلي بدون border و scrollbar

console.log(el.offsetWidth);
console.log(el.clientWidth);

---

scrollHeight و scrollWidth 🧻​

بتجيب أبعاد المحتوى حتى لو أكبر من مكان العرض:

console.log(el.scrollHeight);
console.log(el.scrollWidth);

---

innerHTML vs outerHTML 🧱​

• innerHTML: اللي جوه العنصر
• outerHTML: العنصر نفسه + اللي جواه

console.log(el.innerHTML);
console.log(el.outerHTML);

---

attributes: قراءة كل Attributes 🔧​

const attrs = el.attributes;

for (let i = 0; i < attrs.length; i++) {
  console.log(attrs[i].name + " = " + attrs[i].value);
}

---

يعني إيه BOM في JavaScript؟ 🌍​

BOM (Browser Object Model) هو تعامل JavaScript مع المتصفح نفسه، مش الصفحة.
زي:

• فتح تاب جديد
• معرفة الـ URL
• الرجوع للخلف
• التعامل مع التايمرز

---

أهم كائنات BOM 🧠​

• window
• navigator
• location
• history
• screen

---

فتح نافذة جديدة وإعادة توجيه المستخدم 🔗​

window.open("https://www.google.com", "_blank", "width=500,height=500");

تحويل لرابط:

location.href = "https://www.google.com";

Reload:

location.reload();

---

الفرق بين location.href و location.assign ⚡​

• location.href ينقلك فورًا
• location.assign() نفس الفكرة بس بتضيف صفحة في History (تقدر ترجع)

---

التايمرز: setTimeout و setInterval ⏱️​

setTimeout(() => {
  console.log("بعد 3 ثواني");
}, 3000);

const timer = setInterval(() => {
  console.log("كل ثانية");
}, 1000);

setTimeout(() => {
  clearInterval(timer);
}, 5000);

---

Destructuring: استخراج قيم بسرعة 🧩✨​

مع Arrays​

const numbers = [1, 2, 3];
const [a, b, c] = numbers;

قيمة افتراضية:

const [x, y = 2] = [1];

مع Objects​

const person = { name: "Ali", age: 25 };
const { name, age } = person;

إعادة تسمية:

const { name: fullName, age } = person;

متداخل:

const p = { address: { city: "Riyadh", zip: 12345 } };
const { address: { city, zip } } = p;

---

يعني إيه Set في JavaScript؟ ✅​

Set بيخزن قيم Unique بس (مفيش تكرار):

const mySet = new Set([1, 2, 2, 3]);
console.log(mySet); // Set {1, 2, 3}
console.log(mySet.size); // 3

إضافة/حذف/فحص:

mySet.add(4);
mySet.delete(2);
console.log(mySet.has(3)); // true

تحويل لـ Array:

const arr = [...mySet];

---

الفرق بين Set و WeakSet 🧠🧼​

• Set: يقبل أي نوع بيانات + تقدر تعمل عليه loop + فيه size
• WeakSet: يقبل Objects فقط + مفيش loop + مفيش size
  وكمان بيساعد في إدارة الذاكرة لأنه weak reference

const cache = new WeakSet();
let user = { id: 1 };

cache.add(user);
user = null; // يتشال تلقائيًا من الذاكرة

---

الخلاصة 🔥​

• DOM: تحكم في عناصر الصفحة
• Events: تفاعل المستخدم
• BOM: تحكم في المتصفح
• Destructuring: كود أقصر وأوضح
• Set/WeakSet: إدارة بيانات فريدة وذاكرة أفضل