في لغة JavaScript، الكائن document هو واجهة برمجة تطبيقات (API) تمثل صفحة الويب المعروضة في المتصفح. يُعتبر document جزءًا من نموذج كائن المستند (DOM)، وهو تمثيل هيكلي لصفحة HTML. من خلال الكائن document، تستطيع JavaScript الوصول إلى جميع عناصر HTML في الصفحة والتفاعل معها وتعديلها.

بمعنى آخر، document هو نقطة الوصول الرئيسية للتعامل مع محتوى HTML و CSS لصفحة الويب من خلال JavaScript.

أهم خصائص واستخدامات الكائن document:

  • الوصول إلى عناصر HTML: يُمكن استخدام طرق مختلفة للوصول إلى عناصر HTML من خلال document:

    • document.getElementById(id): للحصول على عنصر HTML بناءً على id الخاص به.
    • document.getElementsByClassName(className): للحصول على مجموعة من عناصر HTML بناءً على className الخاص بها.
    • document.getElementsByTagName(tagName): للحصول على مجموعة من عناصر HTML بناءً على اسم الوسم (tag name).
    • document.querySelector(selector): للحصول على أول عنصر HTML يطابق محدد CSS معين.
    • document.querySelectorAll(selector): للحصول على جميع عناصر HTML التي تطابق محدد CSS معين.

    مثال:

    JavaScript
    let myElement = document.getElementById("my-id");
    let allParagraphs = document.getElementsByTagName("p");
    let firstLink = document.querySelector("a");

  • تعديل محتوى HTML: بعد الوصول إلى عنصر HTML، يُمكن تعديل محتواه باستخدام خصائص مثل innerHTML و textContent:

    • innerHTML: يُستخدم للحصول على أو تعيين محتوى HTML داخل عنصر، بما في ذلك وسوم HTML.
    • textContent: يُستخدم للحصول على أو تعيين محتوى النص فقط داخل عنصر.

    مثال:

    JavaScript
    myElement.innerHTML = "<p>محتوى جديد</p>"; // إضافة فقرة جديدة داخل العنصر
    myElement.textContent = "نص جديد"; // تغيير النص داخل العنصر

  • تعديل خصائص CSS: يُمكن تعديل أنماط CSS لعناصر HTML باستخدام الخاصية style:

    مثال:

    JavaScript
    myElement.style.color = "red"; // تغيير لون النص إلى الأحمر
    myElement.style.backgroundColor = "yellow"; // تغيير لون الخلفية إلى الأصفر

  • إنشاء عناصر HTML جديدة: يُمكن إنشاء عناصر HTML جديدة وإضافتها إلى الصفحة باستخدام طرق مثل createElement و appendChild:

    مثال:

    JavaScript
    let newParagraph = document.createElement("p");
    newParagraph.textContent = "فقرة جديدة تم إنشاؤها بواسطة JavaScript";
    document.body.appendChild(newParagraph); // إضافة الفقرة إلى نهاية body الصفحة

  • التعامل مع الأحداث (Events): يُمكن ربط وظائف JavaScript بأحداث HTML، مثل النقر على زر أو تحميل الصفحة:

    مثال:

    JavaScript
    let myButton = document.getElementById("my-button");
    myButton.addEventListener("click", function() {
      alert("تم النقر على الزر!");
    });

  • معلومات عن المستند: يوفر الكائن document معلومات عن المستند نفسه، مثل:

    • document.title: عنوان الصفحة.
    • document.URL: عنوان URL للصفحة.
    • document.doctype: نوع المستند.

أمثلة إضافية:

  • تغيير عنوان الصفحة:

    JavaScript
    document.title = "عنوان جديد للصفحة";

  • الحصول على جميع الروابط في الصفحة:

    JavaScript
    let allLinks = document.querySelectorAll("a");
    for (let link of allLinks) {
      console.log(link.href);
    }

باختصار، الكائن document هو أداة أساسية في JavaScript للتعامل مع صفحات الويب بشكل ديناميكي. من خلاله، يُمكن التحكم الكامل في محتوى HTML و CSS والتفاعل مع المستخدم.