الجزء العاشر – DOM – Document Object Model – سلسلة FSWD – JS

ahmedمنذ 4 أسابيع

0 90 2 دقائق

✅ DOM – Document Object Model

🟡 أولًا: الوصول للعناصر

✅ `getElementById`

دي الطريقة الأساسية للوصول لعناصر الصفحة باستخدام معرف (ID).

✅ مثال

<div id="message">مرحبا بك في الموقع!</div>

<script>
  let message = document.getElementById("message");
  console.log(message); // هترجع العنصر اللي فيه ID="message"
</script>

✅ `querySelector`

تتيح لك هذه الطريقة الوصول لأي عنصر باستخدام CSS selectors (زي id, class, أو حتى العناصر).

✅ مثال

<p class="greeting">أهلاً بك في JavaScript!</p>

<script>
  let greeting = document.querySelector(".greeting"); // باستخدام الـ class
  console.log(greeting);
</script>

تقدر تستخدم selectors زي:

#id للوصول لعنصر بالـ ID
.class للوصول لعنصر بالـ class
div للوصول لأي عنصر <div>

🟡 ثانيًا: التعديل على العناصر

✅ `textContent`

تستخدم لتغيير النص داخل العنصر.

✅ مثال

<p id="info">النص القديم هنا.</p>

<script>
  let info = document.getElementById("info");
  info.textContent = "النص الجديد هنا!";
</script>

✅ `innerHTML`

تستخدم لتغيير المحتوى الداخلي للعنصر (بما في ذلك العناصر الأخرى إذا كانت موجودة داخل العنصر).

✅ مثال

<div id="content"><p>النص القديم.</p></div>

<script>
  let content = document.getElementById("content");
  content.innerHTML = "<h2>العنوان الجديد</h2><p>النص المعدل.</p>";
</script>

ملاحظة: innerHTML يقدر يغير العناصر داخل العنصر نفسه.
أما textContent فقط يعدل النصوص.

✅ `style`

تستخدم لتغيير الأنماط (CSS) مباشرة عن طريق JavaScript.

✅ مثال

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
  let box = document.getElementById("box");
  box.style.backgroundColor = "red";  // تغيير اللون
  box.style.width = "200px";          // تغيير العرض
</script>

🟡 ثالثًا: التعامل مع الأحداث (Events)

تقدر تتعامل مع مجموعة كبيرة من الأحداث في HTML مثل:

click: عند الضغط على العنصر.
input: عند التغيير في حقل النصوص (مثل <input>).
keydown / keyup: عند الضغط أو رفع الضغط عن مفتاح من لوحة المفاتيح.
وغيرهم.

✅ `click` event

تستخدم للتفاعل مع العنصر عند النقر عليه.

✅ مثال

<button id="clickBtn">اضغط هنا</button>

<script>
  let btn = document.getElementById("clickBtn");
  btn.addEventListener("click", function() {
    alert("تم الضغط على الزر!");
  });
</script>

✅ `input` event

تستخدم للتفاعل مع النصوص في حقول الإدخال (<input>).

✅ مثال

<input type="text" id="nameInput" placeholder="أدخل اسمك">

<script>
  let inputField = document.getElementById("nameInput");
  inputField.addEventListener("input", function() {
    console.log("قيمة الحقل: " + inputField.value);
  });
</script>

🟡 رابعًا: إنشاء عناصر جديدة وحذفها

✅ إنشاء عنصر جديد:

تستطيع إنشاء عناصر جديدة باستخدام createElement، ثم إضافتها باستخدام appendChild أو insertBefore.

✅ مثال

<button id="addBtn">إضافة عنصر</button>

<script>
  let addButton = document.getElementById("addBtn");
  addButton.addEventListener("click", function() {
    let newElement = document.createElement("p"); // إنشاء عنصر <p>
    newElement.textContent = "تم إضافة هذا النص!";
    document.body.appendChild(newElement); // إضافة العنصر الجديد في النهاية
  });
</script>

✅ حذف عنصر:

تستطيع حذف العناصر باستخدام removeChild.

✅ مثال

<button id="removeBtn">حذف عنصر</button>
<p id="toRemove">أنا عنصر سيتم حذفه.</p>

<script>
  let removeButton = document.getElementById("removeBtn");
  let elementToRemove = document.getElementById("toRemove");

  removeButton.addEventListener("click", function() {
    elementToRemove.remove(); // حذف العنصر
  });
</script>

✅ 💯 مثال كامل يغطي كل النقاط:

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM Example</title>
</head>
<body>
  <h1>تعامل مع DOM باستخدام JavaScript</h1>

  <!-- عناصر HTML -->
  <button id="clickBtn">اضغط هنا</button>
  <input type="text" id="nameInput" placeholder="أدخل اسمك">
  <p id="info">هذا النص سيتم تغييره.</p>
  <div id="content">
    <p>هذا محتوى سيتم استبداله.</p>
  </div>

  <button id="addBtn">إضافة عنصر</button>
  <button id="removeBtn">حذف عنصر</button>

  <!-- سكربت JavaScript -->
  <script>
    // 1. التفاعل مع الأحداث
    let btn = document.getElementById("clickBtn");
    btn.addEventListener("click", function() {
      alert("تم الضغط على الزر!");
    });

    let inputField = document.getElementById("nameInput");
    inputField.addEventListener("input", function() {
      console.log("قيمة الحقل: " + inputField.value);
    });

    // 2. التعديل على العناصر
    let info = document.getElementById("info");
    info.textContent = "تم تغيير النص!";

    let content = document.getElementById("content");
    content.innerHTML = "<h2>تم تغيير المحتوى</h2><p>تم إضافة محتوى جديد!</p>";

    // 3. إضافة و حذف العناصر
    let addButton = document.getElementById("addBtn");
    addButton.addEventListener("click", function() {
      let newElement = document.createElement("p");
      newElement.textContent = "تم إضافة عنصر جديد!";
      document.body.appendChild(newElement);
    });

    let removeButton = document.getElementById("removeBtn");
    removeButton.addEventListener("click", function() {
      let elementToRemove = document.getElementById("info");
      elementToRemove.remove();
    });
  </script>
</body>
</html>

ده مثال كامل بيغطي كل العمليات اللي اتكلمنا عنها زي: