رتبها

أسامه إسماعيل

12 تغريدة 19 قراءة Apr 15, 2021

🔔
مر عليك شخصية Doctor doom من سلسله X-man ..؟
هذه الشخصيه تقدر تتحكم بكل شي عن طريق قدراته العقلية🧠
السيارات - الطيارات -الشجر (قدره خارقه جدا)
نفس الفكرة موجوده عندنا في Javascript
بنفس الاسم كذلك
👇تابع

ايش DOM..؟
عباره عن api للـ متصفح تتعامل معه عن طريق javascript او مكتبة Jquery
يعني بأنه يحول التاغات تبع الـ html الى تسلسل هرمي يفهمها المتصفح ويتعامل معها javascript
شي معقد صح ..؟ دايما الشرح النظري كذا 😂💁‍♂️

بكل بساطه
ال Dom يخليني اتحكم واتلاعب🎮
في جميع عناصر وتاغات الـHTML بدون ما اكتب تاغ واحد
كلو عن طريق الـ Javascript
اقدر اضيف تاغ - احذف - اغير محتوى - اضيف كلاس - اغير الستايل
كل شي بالويب اقدر اتحكم فيه عن طريق DOM عبر Javascript
شي رهيب ويشبهه شخصيه doctor Doom😍😍

ايش اللي اقصده بان DOM يحول HTml لتسلسل هرمي ..؟
يعني يحول لي اي كود HTML الى حاجه زي دي👇
كل شي هنا مكونه من Node مربع وكل node يمثل object
لها خصائص وmethod

وهذا يرجعنا لاسمها الاساسي DOM ومعناه 👇

طريقه كتابتها بنفس اسمها ..
- ملف الـ HTML
- الـ object او العنصر او التاغ اللي يمثل لي node
-الـ Method او الخصائص اللي تخليني اتحكم فيها
ملاحظه : ممكن تحفظها كـ variables
المثال اللي تحت بشكل مباشر

فمثلا هنا مثال على اضافه كلاس red وللي له ستايل
بدون ما اكتب الكلاس داخل تاغ HTML
وملاحظه مهمه انك تقدر تتحكم في event وهي اللي تعطي التفاعل مع صفحتك مثلا اذا حركت الماوس لفوق ايش يصير او ضغط ع الزر

النتيجه اني قدرت اضيف الستايل بدون ما اغير حاجه في كود HTML وصارت متفاعله مع الضغطه
كبر عشان تشوف 🧐

اهميه الـ DOM
بتسحب البيانات وتخليني اتحكم بالصفحه بالكامل واخليها متفاعله مع الشخص باستحدام الـ javascript
وكذلك تخليني ابني مشاريع كبيره مثل صفحه ويب كامله او حاسبة

👌وفعليا هنا يجي الربط بين javascript - html -css
واذا خرجت بمشاريع زي اله حاسبه ، حساب gpa ، لاندق بيج، صفحه ويب كامله (راح يكون متعب بس راح تستفيد)🤭
انت جاهز تنتقل للـ اطار العمل React او Angular او Vue

واخيرا جمعت لك كذه حاجه عشان تبحث وتطلع اكثر
🔗Dom cheat sheet فيها كل الخصائص و الايفينت
overapi.com
🔗حاب تقرا عن الموضوع اكثر
developer.mozilla.org
🔗بتطبق وتجرب اكثر
w3schools.com

overapi.com/html-dom