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

تحدثنا فيما سبق عن 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
============================
الحمد لله الذى بنعمته تتم الصالحات