JavaScript - HTML DOM
JavaScript - HTML DOM
🔸 DOM اختصار لـ Document Object Model، وهو يمثل هيكل الصفحة HTML على شكل شجرة يمكن الوصول إليها والتعامل معها باستخدام JavaScript. كل عنصر في الصفحة (مثل العناوين، الفقرات، الأزرار...) يُمثل "كائن" (Object) في DOM.
---🔹 لماذا DOM مهم؟
- يسمح لك بتغيير محتوى الصفحة أثناء تشغيلها.
- يمكنك إضافة/حذف عناصر HTML باستخدام كود.
- التفاعل مع الأحداث مثل الضغط على الأزرار وإدخال البيانات.
🔹 نموذج شجرة DOM
<html>
<body>
<h1>عنوان</h1>
<p>فقرة نصية</p>
</body>
</html>
📌 DOM يمثّل كل وسم (Tag) كعنصر (Node) يمكن التفاعل معه عبر JavaScript.
---🔹 مثال بسيط على استخدام DOM
<p id="demo">نص قابل للتغيير</p>
<script>
document.getElementById("demo").innerHTML = "تم التغيير باستخدام JavaScript";
</script>
📌 document.getElementById تستخدم لاختيار عنصر معين وتعديله.
🔹 أنواع عناصر DOM
- document: يمثل كل الصفحة.
- element: أي وسم HTML مثل
<p>،<div>... - attribute: مثل
idوclass. - text: النص الموجود داخل العناصر.
⚠️ ملاحظات مهمة
- DOM يتم تحميله تلقائيًا عند تحميل الصفحة.
- كل شيء في HTML يمكن الوصول إليه وتعديله باستخدام DOM.
- ستتعلم في الدروس القادمة كيفية اختيار العناصر وتغيير المحتوى والتعامل مع الأحداث.
تعليقات
إرسال تعليق