بسم الله الرحمن الرحيم ********* "اللهم علمنا ما ينفعنا وانفعنا بما علمتنا انك انت العليم الحكيم " تحدثنا فيما سبق عن HTML DOM وماذا تعنى وتكلمنا عن ال element وتكلمنا ايضا عن ال node وال parent وال root الى غير ذلك لكن نسينا ان نوضح جزئية صغيرة الا وهى ال sibling ما هو ال sibling ============ كا ذكرنا ان صفحات ال HTML تشبه لشى ما الشجرة او شجرة العائلة وقلنا ان كل Tag عبارة عن Node اذا اشاملت على عدد مت ال tags او element كود HTML: <!DOCTYPE HTML> <html> <!-- root --> <head> <!-- first child from Html --> <title>Untitled 1</title> </head> <body> <h1>welcome With HTML DOM</h1> <!-- من هنا الى --> <b>by / zaizo max </b> <!-- sibling for <b > and <input> --> <input /> <!-- children هنا يسمى --> </body> </html> هذا توضيح لما سبق الجديد هنا موضوع ال sibling وهنا ان الوسم <h1 > والوسم <b > هما sibling اى انهم يندرجان تحت الوسم <body > وهو هنا parent لهما وكلا منهما h1 وال b مضافا عليهم input يعتربون children لل body اى ابناء له وكما قلنا فى السابق ان كل tag يحتوى على عدد من tags بداخله كل هذه ال tags تعتبر ابناء له وهو الاب لهم تطبيق على HTML DOM ================== ذكرنا فيما سبق كيفية تعريف المتغيرات وكيفية اسناد القيم لها لكن اليوم الموضوع مختلف . ارجع معى بالذاكرة الى ان تصل الى انواع المتغيرات قلنا ان هناك نوع بسمى Object ولم نتكلم عنه حان الان موعده ما هو ال object ============ ال object او الكائن على مختلف التعريفات له هو النسخة من الشئ ماذا يعنى هذا ؟!! لاحظ معى ( انت قمت بكتابة الكلمة (ZAizo MAx ) وقمت بعمل copy لها وعملت لها paste ماذا لاحظت ؟؟ ان الكلمة هى هى نفس الكمة فى عدد حروفها فى شكلها . كذلك ال object اذا عرفنا متتغير على انه object من HTML لاحظ انه سياخد كل وسوم HTML كاملة اى كل محتويات الصفحة ومع امكانية التعديل عليها ولاحظ ايضا ان كل Tag يعتبر object كما سياتى المطلوب الان انك تعرف ان ال object هو نسخة مطابقة من الشئ لاحظ معى كود HTML: <!DOCTYPE HTML> <html> <head> ****** http-*****="content-type" content="text/html" /> ****** charset="utf-8" /> ****** name="author" content="ZAizo_max" /> <title>HTML DOM</title> </head> <body> <div id="max"> <p> HTML DOM اهلا وسهلا بكم معنا فى </p> </div> <button onclick="zaizo();" style="width: 50px; height: 25px;" ></button> <script type="text/javascript"> function zaizo() { var x = document.getElementById("max"); x.firstChild.innerHTML="This Node انت الان قمت بتغيير محتوى"; } </script> </body> </html> كما سبق وان ذكرت ان كل tag يعتبر object اذن انت الان قد عرفت ان المتغير x تم تعريفه على انه object من div اى انه قد حصل على كل خصائصه بدليل انه قد غير محتواه عند الضغط على الزر . دعك الان من onClick وماذا تعنى سيتم شرح جميع الاحداث بالتفصيل ان شاء الله لكن المثير الان للاهتمام هو x.fiestChild هل لاحظت ذلك ؟!! اذا لاحظت ذلك انت الان قد فهمت ان كل tag وفى مثالنا هنا div اذا اشتمل على عدد من ال elements فهو بذلك الاب parent لهم وهم ابناء لهم children وهو هنا ال( p) وهو tag اى انه element كما ذكرت اليس كذلك ؟ اذن انت الان قد عرفت ان DOM تستطيع التعديل على صفحات HTML والتحكم بها مثال اخر عملى اخر لكى تتضح صورة parent وال node كود HTML: <html> <head> <title>HTML DOM </title> </head> <body style=""> <div> <br /> <b id="max2">node اضغط الزر ليظهر لك اب هذا ال</b> </div> <button onclick="zaizo();" style="width: 50px; height: 25px;" ></button> <script type="text/javascript"> function zaizo() { var x = document.getElementById("max2"); alert( x.parentNode.nodeName); } </script> </body> </html> هل لا حظت ذلك x.parentNode وكيفية عرض اسم ال parent لل element وهو B والاب له هو div مثال اخر لتوضيح فكرة ال object كود HTML: <html> <head> <title>HTML DOM </title> </head> <body style=""> <div id="max"> <br /> <b id="max2">object مثال يوضح ان كل تاج عبارة عن </b> </div> <button onclick="zaizo();" style="width: 50px; height: 25px;" ></button> <script type="text/javascript"> function zaizo() { var x = document.getElementById("max2"); alert( x.parentNode); } </script> </body> </html> هذا يوضح لك ان كل tag عبارة عن object ويمكن التعديل على اى خاصية داخل ال element او ال tag ============================ الحمد لله الذى بنعمته تتم الصالحات
<!DOCTYPE HTML> <html> <!-- root --> <head> <!-- first child from Html --> <title>Untitled 1</title> </head> <body> <h1>welcome With HTML DOM</h1> <!-- من هنا الى --> <b>by / zaizo max </b> <!-- sibling for <b > and <input> --> <input /> <!-- children هنا يسمى --> </body> </html>
<!DOCTYPE HTML> <html> <head> ****** http-*****="content-type" content="text/html" /> ****** charset="utf-8" /> ****** name="author" content="ZAizo_max" /> <title>HTML DOM</title> </head> <body> <div id="max"> <p> HTML DOM اهلا وسهلا بكم معنا فى </p> </div> <button onclick="zaizo();" style="width: 50px; height: 25px;" ></button> <script type="text/javascript"> function zaizo() { var x = document.getElementById("max"); x.firstChild.innerHTML="This Node انت الان قمت بتغيير محتوى"; } </script> </body> </html>
<html> <head> <title>HTML DOM </title> </head> <body style=""> <div> <br /> <b id="max2">node اضغط الزر ليظهر لك اب هذا ال</b> </div> <button onclick="zaizo();" style="width: 50px; height: 25px;" ></button> <script type="text/javascript"> function zaizo() { var x = document.getElementById("max2"); alert( x.parentNode.nodeName); } </script> </body> </html>
<html> <head> <title>HTML DOM </title> </head> <body style=""> <div id="max"> <br /> <b id="max2">object مثال يوضح ان كل تاج عبارة عن </b> </div> <button onclick="zaizo();" style="width: 50px; height: 25px;" ></button> <script type="text/javascript"> function zaizo() { var x = document.getElementById("max2"); alert( x.parentNode); } </script> </body> </html>
أنا لا أصدق احدا حتى اتأكد مما يقول ليس لضعف ثقــــــــة فيـــــــــــــــه ولكن هذا ما علمنى إياه ربى _____________________zAiZo_MaX________________
ابدعت والله اخي شروحات اكثر من متميزة ومن لم يشاهد دروسك راح عليه الابداع في الجافا ولن يتعلمها بعد ذلك لانك توضح كل كبيرة وصغيرة بارك الله فيك ولك مني اجمل تحيه بالتوفيق
دورة الفايروسات الدرس الاول من هنا الدرس الثاني من هنا الدرس الثالث الدرس الرابع + كشف التلغيم الدرس الخامس facebook
المشاركة الأصلية كتبت بواسطة Mr.JnOoN ابدعت والله اخي شروحات اكثر من متميزة ومن لم يشاهد دروسك راح عليه الابداع في الجافا ولن يتعلمها بعد ذلك لانك توضح كل كبيرة وصغيرة بارك الله فيك ولك مني اجمل تحيه بالتوفيق مشكور جدا اخى مرورك لموضوعاتى شرف كبير تمنياتى لك بالابداع فى مجالك تحياتى لك
التعديل الأخير تم بواسطة zaizo max ; 04-13-2013 الساعة 12:19 PM
قوانين المنتدى