بسم الله الرحمن الرحيم
*******
"اللهم علمنا ما ينفعنا وانفعنا بما علمتنا انك انت العليم الحكيم"

------------------------------------------------------------------------
تحدثنا فيما سبق عن الاخطاء error وكيفية الامساك بها اذا حدث
درس اليوم لابد ان تعرف ما هى HTML وال tags او الوسوم وال properties
او الخصائص
نتحدث اليوم عن موضوع مهم للغاية فى الجافا سكربت وهو متعلق بصفحات
HTML وانا فى راى اعتبره المستوى الثانى فى الجافا سكربت الا وهو


HTML DOM
==============
هى اختصار (HTML document object model ) اى نمط الوصول للكائنات فى صفحات
HTML ما معنى هذا الكلام ؟!!! اى ان من خلال ال java script يمكنك التعديل على صفحات HTML


ماهى ال HTML DOM
================
هى تحديد وتعريف الطرق القياسية لكيفية الوصول الى الكائنات الموجودة فى HTML document
كما سبق وتعرفت (بنفسك ) ان صفحات HTML تتكون من وسوم TAGS وكل واحد من الوسوم له
عدة خصائص properties فى الجافا سكربت ليس هناك اختلاف سوى فى الاسماء


الاصلاحات فى جافا سكربت
الخاصة ب HTML

===================
نستطيع من خلال الجافا سكربت الوصول لكل TAGS او خاصية لهذا الوسم اينما كان
فى الصفحة وفى الجافا سكربت لا نقول TAGS لكن نقول Element (الا فى بعض الحالات سيم ذكرها )
ونقول على الخاصية atrribute عندما يتم استدعائها فى الجافا سكربت


توضيح
=====
الصفحة او document هى من اول ال Address bar او navigator الى اخر الصفحة
ومن <html> الى <html/> نقول عليه root element اى ليس فوقه اى شى اعلى منه
و <head > لنهاية الوسم يسمى element وكذالك اى tags فى الصفحة
اما < body id=""r> ال ID هنا نسميه attribute لانه خاصية للوسم body
كذلك <a href=""d > ال href يسمى ايضا attribute الى غير ذلك

لاحظ
كود HTML:
<!--                   Document              هنا نعتبر شريط عنوان              -->
<!DOCTYPE HTML> 
<html><!-- root element -->
<head><!-- element         -->
	******  /> <!-- element-->
	<title></title> <!--element -->
</head><!--end elemdnt head -->

<body><!--element -->
<a href="" ></a> <!-- href  <---atrribute    -->
<div id="" style=""></div><!-- id  and style <--- atrribute  -->
</body><!--element -->
</html><!-- end root element  -->


<!-- هنا نهاية الصفحة  -->
لو لاحظت فيما سبق ان element يشمل كل ما بداخله من element اذا احتوى عليها وخصائصها
ايضا ... مثلا وسم ال html الى نهايته يشمل كل ال element من body ,a ,div بالاضافة
الى خصائص كل element الموجودة بداخل كل ال element من body ,a ,divمضافا
عليها ايضا خصائص html element


HTML tree
==========
تعتبر بنية HTML مثل الشجرة التى تتكون من الشجرة الممثلة فى الوسم <html> لنهايته
ثم من افرع ثانوية <head> وال <body > ثم افرع ثانوية بداخل الافروع الثانوية وهى باقى
الوسوم المقصود من هذا التوضيح هو معرفة ما هو ال NODE


ما هو النود NODE
=============
اولا راجع التوضيح السابق
ثانيا بعد ان عرفت ان كل tag يسمى element والخاصية attribute ركز معى
وسم HTML كما عرفنا انه ال root element هنا فى النود نقول عليه parent node اى
انه هو الجزع الاساسى فى تكون صفحة ال HTML اى الاب لانه لا يوجد من قبله تمام
طبعا الاب لا بد ان يكون له ابناء اليس كذلك ؟!!
اذن قد توقعت ان الابناء هى الوسوم او ال element الموجودة بداخله اى اسفل من الاب
والابناء عادة لا يكونوا فى مستوى واحد الا اذا كانوا تؤام تمام
انت توقعت ان الابناء هنا اى شى بداخل HTML من head , body , div , a, p ...etc

لكن كيف نتعرف على الابن الاكبر هنا ؟!! لاحظ معى يكون الابن الاكبر هو الاقرب ناحية ابيه بمعنى هنا
ان الاقرب من HTML الى الاسفل مباشرة مثل head ونسمية فى هذه الحالة هنا first child
اما ال body نسمية last child وهكذا

لاحظ
كود HTML:
<html>
<head><!-- first child  of HTML -->
    <title>HTML DOM</title><!-- first child  of head -->
    <!--  head اى شى ياتى هنا يعتبر ابن من ابناء ال --> 
</head>

<body><!-- last child  of HTML -->
    <p>welcom to HTML DOM</p> <!-- first child  of body -->
    <b>by / zaizo max </b><!-- last child  of HTML -->
</body>
</html>
الخلاصة
========
اننا كما عرفنا ان صفحة HTML كالشجرة او كشجرة العائلة اى ان ال Tag اذا اشتمل على
tag اخر بداخله او عدة tags يكون ما بداخله ابناء childeren له والاقرب له نسميه
first node والاخير last nod وهكذا


وسيتم التفصيل اكثر عند التطبيق
====================
"اللهم لا علم لنا الا ما علمتنا انك انت العليم الحكيم "