إذا كنت قد بدأت رحلتك في تعلم JavaScript، فمن الضروري أن تتعرف على مفهوم DOM، الذي يُعد البوابة الأساسية للتفاعل مع عناصر صفحات الويب. سواء كنت تريد تغيير نص، إخفاء زر، أو إنشاء عناصر جديدة ديناميكيًا، فكل ذلك يتم عبر DOM. في هذا المقال، سنتعرف على مفهوم DOM، كيفية التعامل معه باستخدام JavaScript، وسنقدم أمثلة عملية بسيطة لتسهيل الفهم.
1. ما هو DOM؟
DOM هو اختصار لـ Document Object Model، ويعني "نموذج كائني لوثيقة HTML". عندما يقوم المتصفح بتحميل صفحة HTML، يقوم بتحويلها إلى شجرة من العناصر يمكن لجافاسكريبت الوصول إليها والتعديل عليها. كل عنصر في الصفحة (مثل عنوان، صورة، زر) يُمثّل "كائن (Object)" يمكن التحكم فيه باستخدام الكود.
2. لماذا DOM مهم؟
من خلال DOM، يمكنك:
- تغيير النصوص، الصور، الألوان، والخطوط.
- إنشاء عناصر جديدة أو حذفها.
- التحكم في الأحداث مثل النقر، تمرير الفأرة، إدخال البيانات، إلخ.
- بناء تطبيقات تفاعلية بالكامل دون الحاجة لإعادة تحميل الصفحة.
3. كيفية الوصول إلى عناصر DOM باستخدام JavaScript
للوصول إلى عنصر في الصفحة، نستخدم دوال مثل:
document.getElementById("id") // اختيار عنصر حسب المعرف (ID)
document.getElementsByClassName("class") // اختيار عناصر حسب الصنف (class)
document.querySelector("selector") // اختيار عنصر حسب CSS selector
مثال عملي:
// HTML
<p id="text">مرحبا بك!</p>
<button onclick="changeText()">اضغط لتغيير النص</button>
// JavaScript
function changeText() {
document.getElementById("text").innerHTML = "تم تغيير النص بنجاح!";
}
4. التفاعل مع الأحداث (Events)
يمكنك ربط أي حدث بعملية معينة. مثلاً عند النقر على زر:
<button id="btn">انقر هنا</button>
<script>
document.getElementById("btn").addEventListener("click", function() {
alert("لقد نقرت على الزر!");
});
</script>
من بين أشهر الأحداث:
click: عند النقر على عنصر.mouseover: عند تمرير الفأرة على عنصر.keydown: عند الضغط على زر من لوحة المفاتيح.
5. إنشاء عناصر جديدة داخل الصفحة
يمكنك إنشاء عنصر وإضافته إلى الصفحة دون تعديل الكود الأصلي:
let newElement = document.createElement("h2");
newElement.textContent = "هذا عنوان تمت إضافته عبر جافاسكريبت";
document.body.appendChild(newElement);
6. تغيير خصائص العناصر (Attributes & Style)
يمكنك تغيير لون عنصر، حجمه، أو حتى خصائصه (مثل مصدر الصورة أو الرابط):
let img = document.getElementById("myImage");
img.src = "new-image.jpg";
img.style.border = "2px solid red";
7. مشروع صغير: تغيير محتوى ونمط فقرة
<p id="para">هذا نص قابل للتغيير.</p>
<button onclick="customize()">غير التنسيق</button>
<script>
function customize() {
let p = document.getElementById("para");
p.innerHTML = "تم تعديل المحتوى!";
p.style.color = "blue";
p.style.fontSize = "22px";
p.style.fontWeight = "bold";
}
</script>
✅ الخاتمة
فهمك لـ DOM هو أحد أهم الخطوات في رحلتك البرمجية باستخدام JavaScript. بمجرد أن تتمكن من التحكم في عناصر الصفحة، ستتمكن من بناء مواقع تفاعلية، ديناميكية، واحترافية. ابدأ بالتجربة، وابنِ مشاريع صغيرة لتثبيت المفاهيم، وستلاحظ تطور مستواك بسرعة كبيرة.