التعامل مع DOM — JavaScript الأساسيات

التعامل مع DOM

DOM (Document Object Model) هو تمثيل برمجي لصفحة الويب يسمح لـ JavaScript بالتفاعل معها.

اختيار العناصر

// بالـ ID (الأسرع)
const element = document.getElementById("myId");

// بالـ Class
const elements = document.getElementsByClassName("myClass");
// يُرجع HTMLCollection (مصفوفة-شبيهة)

// بالوسم
const divs = document.getElementsByTagName("div");

// بـ CSS Selector (الأفضل والأكثر مرونة) ⭐
const one = document.querySelector(".myClass"); // أول عنصر
const all = document.querySelectorAll(".myClass"); // كل العناصر
// يُرجع NodeList

// أمثلة على Selectors
document.querySelector("#header");        // ID
document.querySelector(".card");          // Class
document.querySelector("div");            // Tag
document.querySelector("div.card");       // Tag + Class
document.querySelector("nav a");          // نسل
document.querySelector("nav > a");        // ابن مباشر
document.querySelector("[data-id]");      // Attribute
document.querySelector("input[type='text']");

تعديل المحتوى

const element = document.querySelector("#myDiv");

// النص
element.textContent = "نص جديد";     // نص فقط
element.innerText = "نص جديد";       // نص مرئي
element.innerHTML = "<strong>HTML</strong>"; // مع HTML

// ⚠️ تجنب innerHTML مع بيانات المستخدم (XSS)!

تعديل الأنماط (CSS)

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

// تعديل مباشر
box.style.color = "red";
box.style.backgroundColor = "blue"; // camelCase!
box.style.fontSize = "20px";
box.style.cssText = "color: red; background: blue;";

// Classes (الأفضل) ⭐
box.classList.add("active");
box.classList.remove("hidden");
box.classList.toggle("dark-mode");
box.classList.contains("active"); // true/false
box.classList.replace("old", "new");

تعديل السمات (Attributes)

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

// قراءة
console.log(link.getAttribute("href"));
console.log(link.href); // خاصية مباشرة

// كتابة
link.setAttribute("href", "https://google.com");
link.href = "https://google.com";

// حذف
link.removeAttribute("target");

// فحص
link.hasAttribute("href"); // true

// Data Attributes
const card = document.querySelector("[data-user-id]");
console.log(card.dataset.userId); // قراءة data-user-id
card.dataset.role = "admin";      // إضافة data-role

إنشاء العناصر

// إنشاء عنصر
const div = document.createElement("div");
div.textContent = "عنصر جديد";
div.className = "card";
div.id = "myCard";

// إضافة للصفحة
document.body.appendChild(div);

// إضافة في موقع محدد
const container = document.querySelector(".container");
container.appendChild(div);              // في النهاية
container.prepend(div);                  // في البداية
container.insertBefore(div, reference); // قبل عنصر
container.insertAdjacentElement("afterbegin", div);

// إنشاء من HTML
container.innerHTML += '<div class="new">جديد</div>';

// insertAdjacentHTML (أفضل للأداء)
container.insertAdjacentHTML("beforeend", '<div>جديد</div>');
// beforebegin, afterbegin, beforeend, afterend

حذف العناصر

const element = document.querySelector(".toDelete");

// الحذف
element.remove(); // الطريقة الحديثة
element.parentNode.removeChild(element); // الطريقة القديمة

// إفراغ المحتوى
element.innerHTML = "";
element.textContent = "";

التنقل في DOM

const element = document.querySelector(".item");

// الأب
element.parentElement;
element.parentNode;

// الأبناء
element.children;           // HTMLCollection
element.childNodes;         // NodeList (يشمل النصوص)
element.firstElementChild;
element.lastElementChild;

// الإخوة
element.nextElementSibling;
element.previousElementSibling;

// أقرب أب بشرط
element.closest(".container"); // أقرب أب له class container

الأحداث (Events)

const button = document.querySelector("button");

// إضافة حدث
button.addEventListener("click", function(event) {
  console.log("تم النقر!");
  console.log(event.target); // العنصر المنقور
});

// مع Arrow Function
button.addEventListener("click", (e) => {
  e.preventDefault(); // منع السلوك الافتراضي
  console.log("نقرة!");
});

// أحداث شائعة
element.addEventListener("click", handler);
element.addEventListener("dblclick", handler);
element.addEventListener("mouseenter", handler);
element.addEventListener("mouseleave", handler);
element.addEventListener("keydown", handler);
element.addEventListener("keyup", handler);
element.addEventListener("input", handler);
element.addEventListener("change", handler);
element.addEventListener("submit", handler);
element.addEventListener("load", handler);
element.addEventListener("scroll", handler);

// إزالة حدث
button.removeEventListener("click", handler);

Event Delegation

// بدلاً من إضافة حدث لكل عنصر...
const list = document.querySelector("ul");

list.addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log(`نقرت على: ${e.target.textContent}`);
  }
});

// يعمل حتى مع العناصر المضافة لاحقاً!

// اختيار عناصر
const title = document.querySelector("h1");
const buttons = document.querySelectorAll("button");

// تعديل المحتوى
if (title) {
  title.textContent = "مرحباً بك!";
  title.style.color = "blue";
}

// إنشاء عنصر جديد
const newDiv = document.createElement("div");
newDiv.textContent = "عنصر جديد من JavaScript!";
newDiv.classList.add("highlight");

// إضافة للصفحة
document.body.appendChild(newDiv);

// إضافة حدث
newDiv.addEventListener("click", () => {
  alert("تم النقر على العنصر!");
});