HTML - DOM كائن الوثيقة
HTML - DOM
🔸 DOM أو Document Object Model هو تمثيل شجري (Tree Structure) لصفحة HTML داخل المتصفح، ويُتيح للغات البرمجة مثل JavaScript التفاعل مع العناصر وتعديلها.
✅ ما الذي يمكن عمله باستخدام DOM؟
- تغيير النص داخل عنصر
- تغيير خصائص CSS
- إضافة عناصر أو حذفها
- الاستجابة للأحداث (مثل الضغط على زر)
📌 الوصول إلى العناصر في DOM
يمكن الوصول إلى العناصر باستخدام دوال مثل:
getElementById()getElementsByClassName()querySelector()
document.getElementById("demo").innerHTML = "تم تغييره بواسطة DOM";
🧪 مثال عملي
<!DOCTYPE html>
<html>
<body>
<p id="demo">مرحبًا بك!</p>
<button onclick="changeText()">اضغط هنا</button>
<script>
function changeText() {
document.getElementById("demo").innerHTML = "تم تعديل النص!";
}
</script>
</body>
</html>
🔍 التفاعل مع خصائص CSS
يمكنك تغيير نمط عنصر باستخدام style:
document.getElementById("demo").style.color = "blue";
💡 ملاحظات مهمة
- DOM يتم إنشاؤه تلقائيًا عند تحميل الصفحة في المتصفح.
- أي تغيير يتم على DOM يظهر فورًا للمستخدم.
- من الأفضل وضع أكواد JavaScript بعد تحميل عناصر الصفحة لضمان وجود العناصر في DOM قبل التفاعل معها.
تعليقات
إرسال تعليق