[h=2]مقدمه آموزش مدل DOM[/h] مقدمه و معرفی مدل DOM : مدل DOM ، مخفف عبارت Document Object Model است . DOM يک شيوه يا مدل استاندارد ، برای دسترسی به کليه عناصر درون يک سند HTML را ارائه می دهد . قبل از مطالعه اين بخش ، شما بايد به طور کامل با مباحث و زبان های برنامه نويسی زير آشنايي داشته باشيد . برای دريافت اطلاعات راجع به هر کدام ، بر روی نام آن کليک کنيد : HTML JavaScript همانطور که در بخش HTML مطالعه کرديد ، به وسيله اين زبان شما می توانيد صفحات وب را با کليه عناصر و اجزای مورد نظر خود ايجاد نماييد . در واقع HTML زبان طراحی صفحات وب است . سپس در بخش بعدی شما با روش قالب دهی صفحات وب يا CSS آشنا شديد . به وسيله اين روش می توان کليه اجزای ايجاد شده در زبان HTML را دسته بندی و قالب دهی کرده و خواص مورد نظر خود را به آنها اعمال نمود . همچنين در بخش آموزش جاوا اسکريپت ، با يکی از زبان های برنامه نويسی صفحات وب آشنا شديد . JavaScript به ما يک ابزار ساده برای طراحی و اجرای برنامه های مورد نظر خود در صفحات وب را ارائه می دهد . به وسيله زبان JavaScript ، شما می توانيد يک صفحه HTML را به همراه کليه عناصر درون آن را تغيير داده و يا اضافه و حذف نماييد . در هنگام کار با جاوا اسکريپت ، برای تغيير هر چيزی بر روی صفحه ، برنامه نياز دارد تا به آن عنصر خاص دسترسی داشته باشد . برای مثال ما می خواهيم اندازه قلم يک پاراگراف را در صفحه تغيير دهيم ، در حالی که در درون صفحه پاراگراف های زياد ديگری نيز وجود دارند که بايد بدون تغيير باقی بمانند . در اين هنگام ما ابتدا بايد به پاراگراف مورد نظر دسترسی داشته و سپس آن را تغيير دهيم . اين امکان دسترسی به عناصر در يک صفحه HTML ، به همراه تمام متدهای آن برای تغيير ، حذف و اضافه کردن عناصر به وسيله مدل DOM فراهم شده است . در واقع مدل DOM ، عبارتست از يک روش استاندارد برای دستيابی به عناصر مورد نظر بر روی يک صفحه HTML . [HR][/HR] مفهوم و نحوه عملکرد مدل DOM : مدل DOM برای دسترستی به اشيا و عناصر موجود در يک صفحه HTML ، از يک درخت سلسله مراتبی استفاده می کند . اين درخت از شی Window به عنوان عنصر مادر يک صفحه HTML شروع شده و به ترتيب به عناصر رده پايين تر ادامه مي يابد، تا به پايين ترين رده عناصر يعنی متن و نوشته برسد . شکل 1 يک نمای کلی را از درخت سلسله مراتب در مدل DOM را نشان می دهد : نمای کلی مدل سلسله مراتبی - DOM تصوير 1 در اين مدل شی Window به عنوان شی اصلی و مادر يک سند HTML محسوب می شود . اين شی دارای 3 زير شاخه يا فرزند اصلی ، به نام های document , history و location است . شی document شامل محتوی اصلی يک صفحه HTML بوده و در برگيرنده کليه عناصر از قبل متن ، نوشته و ... که به وسيله تگ های HTML ايجاد شده اند ، می باشد . اين شی دارای 2 زير شاخه اصلی به نام head و body است . اين دو شی نيز به نوبه خود دارای زير شاخه های ديگر هستند . شی location در برگيرنده اطلاعات کلی درباره URL يا آدرس اينترتی صفحه می باشد . شی history نيز شامل آرايه ای از صفحات و URL هايي است که کاربر توسط مرورگر از هنگام بازشدن آن مرور کرده است ، می باشد .
پاسخ : مقدمه آموزش مدل DOM [h=2]مقدمه آموزش مدل DOM[/h] مفهوم گره ( Node ) در مدل DOM : بر طبق استاندارد مدل DOM هر عنصر ، تگ ، خاصيت و يا نوشته در يک صفحه HTML يک گره ( Node ) محسوب می شود . بر طبق اين اصل تعاريف زير را می توانيم داشته باشيم : کل صفحه HTML ، يک گره صفحه ( documnet Node ) محسوب می شود . هر تگ HTML ، يک گره عنصر ( element Node ) محسوب می شود . متن ها و نوشته های بين تگ ها ( در مواردی مانند پاراگراف ها و لينک ها ) گره های متنی ( text Node ) محسوب می شوند . هر خاصيت در تگ ها و کنترل های HTML ، يک گره صفت ( attribute Node ) محسوب می شوند . توضيحات comments در صفحات HTML ، گره های توضيحی ( comment Node ) محسوب می شوند . [HR][/HR] ارتباط و سلسله مراتب در گره ها : همانطور که در بخش مقدمه مدل DOM گفتيم ، اين مدل دارای يک سيستم سلسله مراتبی برای رده بندی عناصر در يک صفحه HTML است . بر اين اساس ، گره ها نيز در مدل DOM دارای همان ترتيب سلسله مراتبی هستند . به عبارت ديگر ، گره ها در مدل DOM ، از گره صفحه يا document شروع شده و به ترتيب به گره های رده پايين تر ادامه می يابند تا به متن ها که در پايين ترين رده گره ها هستند ، برسند . برای درک بهتر به مثال زير و توضيحات آن دقت کنيد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] <html> <head> <title> Page Title </title> </head> <body> <h1> Titr Safhe </h1> <p> Matn Safhe </p> </body> </html> [/TD] [/TR] [/TABLE] در قطعه کد بالا ، تمامی گره ها ( Nodes ) به هم مرتبط بوده و دارای رده سلسله مراتب نسبت به هم می باشند . هر گره ای به جزء گره صفحه ( document Node ) دارای يک گره مادر ( parent Node ) می باشد . گره مادر گره ای است که در سيستم سلسه مراتبی يک رده بالاتر از گره ای که مادر آن است بوده و در واقع شامل آن می شود . برای مثال در قطعه کد فوق ، گره مادر گره های < head > و < body > گره < html > است و يا گره مادر عبارت متنی Matn Safhe ، گره < p > می باشد . بيشتر گره ها نيز ممکن است دارای يک يا چندين فرزند ( child Node ) باشند . گره فرزند ، گره ای است که در سيستم سلسله مراتبی يک رده پايين تر از گره مادر بوده و در واقع زير مجموعه آن محسوب می شود . برای مثال در قطعه کد فوق گره < html > دارای 2 گره فرزند < head > و < body > بوده و يا عبارت متنی Titr Safhe گره فرزند تگ < h1 > محسوب می شود . گره ها زمانی که دارای مادر مشترک هستند ، برادر خواهر محسوب می شوند . برای مثال در قطعه کد فوق دو گره < head > و < body > ، به دليل اينکه گره مادر هر دو آنها مشترک بوده و مادر آنها تگ < html > است ، خواهر برادر خوانده می شوند . همچنين گره ها می توانند دارای نوه باشند . گره نوه ، گره ای است که بيش از يک رده از گره جد خود پايين تر بوده و در واقع فرزند فرزند يک گره باشد . برای مثال در قطعه کد فوق تمامی عبارت های متنی ، نوه گره < html > بوده و نيز گره متنی Page Title نوه گره < head > محسوب می شود . نکته : يک گره زمانی نوه جد خود محسوب می شود که بر اساس استاندارد های کدنويسی به زبان HTML ، زير مجموعه آن تگ باشد . به عنوان مثال گره متنی Titr Safhe بيش از يک رده از گره < head > پايين تر است ، ولی به دليل اينکه در زير مجموعه تگ < head > قرار ندارد ، نوه آن محسوب نمی شود . به علاوه گره ها می تواندد دارای جد نيز باشند . جد يک گره ، گره ای است که بيش از يک رده از گره نوه خود بالاتر بوده و در واقع مادر مادر آن گره محسوب می شود . برای مثال جد گره های < h1 > و < p > ، گره < html > است .
پاسخ : مقدمه آموزش مدل DOM [h=2]مقدمه آموزش مدل DOM[/h] همانطور که در بخش قبل اشاره شد ، شما به وسيله مدل DOM می توانيد به هر عنصری در يک صفحه HTML که می خواهيد آن را تغيير داده و يا اطلاعاتی درباره آن کسب نماييد ، دسترسی داشته باشيد . در ادامه 2 روش کلی زير را برای دسترسی به عناصر مختلف در يک صفحه HTML را مورد بررسی قرار می دهيم : با استفاده از متدهای ( ) getElementById و ( ) getElementByTagName . با استفاده از خواص parentNode , firstNode و lastChild يک گره . [HR][/HR] متد های ( ) getElementById و ( ) getElementByTagName : متدهای ( ) getElementById و ( ) getElementByTagName می توانند به هر عنصری در يک صفحه HTML دسترسی داشته باشند . اين متدها کاری به ساختار و چيدمان صفحه ندارند و مهم نيست که عنصر مورد نظر در کجای صفحه قرار گرفته باشد . اين در متد آنها را پيدا خواهند کرد : 1 ) متد ( ) getElementById : نحوه دسترسی اين متد به عناصر بر اساس خاصيت id آن عصر در HTML می باشد . اين متد دقيقا عنصری که id آن را در پرانتز مقابل اين متد تعيين کرده باشيد ، را بر می گرداند . بنابراين خروجی اين متد يک عنصر منحصر به فرد با id تعيين شده خواهد بود . توجه : اين متد يکی از متدهای شی document است . نکته مهم : همانطو که در بخش آموزش HTML آموختيد ، هر عنصر ( تگ ) در يک صفحه ، می تواند دارای يک شناسه يا id منحصر به فرد و غير تکراری باشد . به عبارت ديگر هيچ دو عنصری در يک صفحه HTML ، نمی توانند دارای id يکسان باشند . از اين id برای شناسايي و دسترسی به عنصر مورد نظر در صفحه استفاده می شود . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax[/TD] [TD="class: prdes, align: left"] documnet.getElementById ( " عنصر مورد نظر id " ) ; [/TD] [/TR] [/TABLE] مثال : برای مثال فرض کنيد که شما در يک صفحه 3 پاراگراف ( تگ p ) با id های P1 ، P2 و P3 داريد . حال می خواهيد که متن درون يکی از پاراگراف ها که id آن برابر P1 است ، را در جای ديگری نمايش دهيد . برای اين منظور از متد getElementById استفاده کرده و به وسيله id پاراگراف مورد نظر ابتدا به آن عنصر دسترسی پيدا کرده و سپس متن درون آن را توسط خاصيت InnerText ، آنگونه که در کد مثال زير نمايش داده شده است ، بر روی صفحه نمايش دهيد : توجه : در ادامه با خواص بيشتری از عناصر مختلف در مدل DOM آشنا خواهيد شد . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] <html> <head> <title>Title of the Page</title> </head> <body> <p id="P1"> www.DevelopperStudio.ir </p> <p id="P2"> An Investigation for Developement </p> <p id="P3"> HTML , CSS , SQL , Java Script and more ... free tutorial </p> <script type="text/javascript"> document.write ( document.getElementById( "P1").innerText ) </script> </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] www.DevelopperStudio.ir An Investigation for Developement HTML , CSS , SQL , Java Script and more ... free tutorial undefined [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] نکته : همانطور که در قسمت قبل گفتيم ، عنصر ( گره ) مادر يک عنصر ديگر ، عنصری است که در رده سلسلمه مراتبی يک رده بالاتر از عنصر مذکور بوده و در واقع آن را در برگرفته است .در مدل DOM می توان به عنصر يک مادر ديگر دسترسی داشت و آن را نمايش داد . برای اين منظور به مثال زير دقت کنيد : مثال 2 :در مثال زير يک عنصر پاراگراف ( تگ p ) و يک ليست ترتيبی ايجاد کرده ايم ، که در درون ليست چندين آيتم ( تگ li ) قرار گرفته است . در اين مثال با استفاده از متد getElementById ابتدا به دو عنصر Pex و li_1دسترسی پيدا کرده و سپس توسط خاصيت parenElement عنصر مادر آنها را در خروجی نمايش داده ايم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] <html> <head> <title>Title of the Page</title> </head> <body id ="BODY"> <p id="Pex"> www.DevelopperStudio.ir </p> <ol id="List"> <li id="li_1">HTML</li> <li id="li_2">CSS</li> <li id="li_3">SQL</li> </ol> <script type="text/javascript"> document.write ( document.getElementById( "Pex" ).parentElement.id ); document.write ( document.getElementById( "li_1" ).parentElement.id ); </script> </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] www.DevelopperStudio.ir HTML CSS SQL [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : مقدمه آموزش مدل DOM [h=2]مقدمه آموزش مدل DOM[/h] متد ( ) getElementByTagName : در قسمت قبل با متد getElementById و نحوه کار با آن آشنا شديد . در اين قسمت به توضيح يکی ديگر از روش های دسترسی به عناصر در صفحات HTML آشنا می شويد . اين متد عناصر را بر حسب تگ سازنده آنها در صفحه پيدا می کند . اين متد کليه عناصری را که تگ سازنده آنها را در پرانتز مقابل آن تعريف کرده باشيد ، به صورت آرايه ای از عناصر ( گره ها ) بر می گرداند . نحوه کلی اسفاده از اين عنصر به صورت زير است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax[/TD] [TD="class: prdes, align: left"] documnet.getElementByTagName ( " تگ سازنده عنصر يا عناصر مورد نظر " ) ; [/TD] [/TR] [/TABLE] مثال : برای مثال شما می خواهيد به کليه عناصر از جنس پاراگراف در يک صفحه که به وسيله تگ < p > ساخته می شوند ، دسترسی داشته باشيد . برای اين منظور از قطعه کد زير بايد استفاده کنيد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] document.getElementByTagName( "p" ) ; [/TD] [TD="class: header"] کد [/TD] [/TR] [/TABLE] هانطور که گفتيم ، متد getElementByTagName ، عناصری در داخل يک صفحه را ، که تگ سازنده آنها را در پرانتز مقابل اين متد تعيين کرده باشيد را به صورت آرايه ای از رشته ها بر می گرداند . بنابراين می توان با استفاده از يک انديس به هر يک از اعضای اين آرايه دسترسی پيدا کرد . به عبارت ديگر اگر ما به دنبال عناصر پاراگراف ( تگ p ) در درون يک صفحه باشيم و تعداد 5 پاراگراف در آن صفحه موجود باشد ، خروجی اين متد يک آرايه پنج عضوی از id پاراگراف بوده ، که آنها را به ترتيب ، شماره ( انديس ) گذاری کرده است . پس می توانيم از اين ليست از عناصر هانند آرايه استفاده نماييم . برای اين منظور ابتدا بايد ليست عناصر را در يک متغير به روش زير ذخيره نماييم : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax[/TD] [TD="class: prdes, align: left"] var نام يک متغير = getElementByTagName ( تگ سازنده عناصر مورد نظر ) ; [/TD] [/TR] [/TABLE] مثال : برای مثال ليست عناصر < p > را در يک آرايه به نام MyP ذخيره کرده ايم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] var MyP= getElementByTagName ( " p " ) ; [/TD] [TD="class: header"] کد [/TD] [/TR] [/TABLE] بنابراين اکنون ما دارای يک آرايه از کليه عناصری که با تگ < p > در يک صفحه ساخته می شوند ، هستيم و می توانيم به هر يک از آنها به وسيله يک انديس دسترسی داشته باشيم . برای درک بهتر به مثال زير توجه نماييد : مثال : فرض کنيد در يک صفحه HTML که دارای کد فرضی زير است ، دارای 3 پاراگراف ( ساخته شده با تگ < p > ) با id های خاص خود و به ترتيب برابر با Ex2 , Ex1 و Ex3 هستيم . حال می خواهيم در انتهای صفحه متن دومين پاراگراف از مجموع کليه پارگراف های صفحه را در خروجی مجددا چاپ نماييم . برای اين منظور ابتدا ليست ( آرايه ) کليه پاراگراف ها را در يک متغير فرضی به نام MyP ذخيره کرده و سپس در دستور خروجی به دومين عضو اين آرايه که در واقع دومين پاراگراف موجود در آن صفحه است ، دسترسی پيدا کرده و متن درون آن را در خروجی چاپ می کنيم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] <html> <head> <title>Title of the Page</title> </head> <body> <p id="Ex1"> HTML is designing language of web </p> <p id="Ex2"> Java Script is a client side language </p> <p id="Ex3"> ASP.NET is a server side language </p> <script type="text/javascript"> var MyP = document.getElementsByTagName ( "p" ) ; document.write ( MyP[1].innerText + " . It's code excute in copmuter of the visitor . " ); </script> </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] HTML is designing language of web Java Script is a client side language ASP.NET is a server side language undefined . It's code excute in copmuter of the visitor . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] مثال 2 : مثال بالا را با يک حالت جالب ديگر برای درک بهتر کاربرد متد getElementByTagName بازنويسی کرده ام . در اين مثال نيز فرض کنيد که دارای همان صفحه با همان کد و پاراگراف ها هستيم . در اينجا نيز ابتدا ليست پاراگراف ها را در يک متغير فرضی به نام MyList ذخيره کرده ايم . سپس با استفاده از يک حلقه ساده ، متن درون تمامی 3 پاراگراف را به صورت يک ليست که در ابتدای هر پاراگراف شماره آن را نيز قرار داده ايم ، چاپ کرده ايم . به کد مثال دقت کنيد : توجه : در اين مثال از خاصيت length متغير آرايه ای MyList استفاده کرده ايم . اين خاصيت طول يا به عبارت ديگر تعداد اعضای متغير آرايه ای را شامل می شود . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] <html> <head> <title>Title of the Page</title> </head> <body> <p id="Ex1"> HTML is designing language of web </p> <p id="Ex2"> Java Script is a client side language </p> <p id="Ex3"> ASP.NET is a server side language </p> <script type="text/javascript"> var MyP = document.getElementsByTagName ( "p" ) ; for ( i = 0 , j = 1 ; i < MyP.length ; i ++ , j ++) { document.write ( j + " . " + MyP[ i ].innerText + "<br /> " ); } </script> </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] HTML is designing language of web Java Script is a client side language ASP.NET is a server side language 1 . HTML is designing language of web 2 . Java Script is a client side language 3 . ASP.NET is a server side language [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : مقدمه آموزش مدل DOM [h=2]مقدمه آموزش مدل DOM[/h] خواص parentNode , firstChild و lastChild : به وسيله خواص parentNode , firstChild و lastChild می توان به طور محدود به برخی از عناصر در يک صفحه HTML دسترسی داشت . اين خواص ساختار صفحه را دنبال کرده و بر حسب رده سلسله مراتب عناصر ، به آنها دسترسی پيدا می کنند . در ادامه ابتدا به توضيح اين خواص پرداخته و سپس سعی می کنيم تا با ارائه مثال هايي کاربرد آنها را در عمل نشان دهيم : توضيح خواص : خاصيت parentNode : اين خاصيت به تگ مادر يک عنصر اشاره می کند . تگ مادر تگی است که عنصر مورد نظر را در بر گرفته است و در رده سلسله مراتب ، يک رده بالاتر از عنصر فرزند خود است . خاصيت firstChild : اين خاصيت به اولين فرزند يک تگ يا عنصر اشاره می کند . خاصيت lastChild : اين خاصيت به آخرين فرزند يک تگ يا عنصر اشاره می کند . مثا ل: برای درک بهتر مفاهيم فوق به مثال زير و توضيحات آن دقت کنيد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] <table> <tr> <td id="Td1"> Cell 1 </td> <td id="Td2"> Cell 2 </td> <td id="Td3"> Cell 3 </td> </tr> </table> [/TD] [/TR] [/TABLE] توضيح مثال فوق : در مثال فوق تگ < tr > ، عنصر parentNode يا مادر 3 عنصر < td > و تگ < table > نيز عنصر parentNode تگ < tr > است . همچنين تگ < td > با id = Td1 ، اولين فرزند يا firstChild تگ < tr > و تگ < td > با id = Td3 آخرين فرزند يا lastChild تگ < tr > است . در مثال های زير سعی کرده ام تا برخی از کاربردهای اين 3 خاصيت را در عمل نشان دهم : مثال 1 : در مثال زير يک جدول فرضی را با يک سطر ( تگ < tr > ) و 3 خانه ( تگ < td > ) ايجاد کرده ايم . سپس به وسيله 2 خاصيت firstChild و lastChild به محتوای اولين و آخرين خانه اين جدول دسترسی پيدا کرده و متن درون آنها را به وسيله خاصيت innerText بر روی صفحه نمايش داده ايم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] <table border ="1"> <tr id="MainTr"> <td id="Td1"> This is the firstChild . </td> <td id="Td2"> Cell 2 </td> <td id="Td3"> And this is the lastChild . </td> </tr> </table> <script type="text/javascript"> document.write ( document.getElementById("MainTr").firstChild.innerText + "<br />" ) ; document.write ( document.getElementById("MainTr").lastChild.innerText ) ; </script> [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body"] [TABLE] [TR] [TD] This is the firstChild . [/TD] [TD] Cell 2 [/TD] [TD] And this is the lastChild . [/TD] [/TR] [/TABLE] undefined undefined [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] نکته : در مثال شماره 1 ما با استفاده از متد getElementById به تگ < tr > دسترسی پيدا کرديم ، اما می توان به صورت مستقيم و بدون استفاده از متد getElementById به عنصر مورد نظر خود نيز اشاره کرد . مثال شماره 1 را به اين صورت بازنويسی کرده ايم ، به آن دقت کنيد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] <table border ="1"> <tr id="MainTr"> <td id="Td1"> This is the firstChild . </td> <td id="Td2"> Cell 2 </td> <td id="Td3"> And this is the lastChild . </td> </tr> </table> <script type="text/javascript"> document.write ( MainTr.firstChild.innerText + "<br />" ) ; document.write ( MainTr.lastChild.innerText ) ; </script> [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body"] [TABLE] [TR] [TD] This is the firstChild . [/TD] [TD] Cell 2 [/TD] [TD] And this is the lastChild . [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] مثال 2 : همانطور که گفتيم به وسيله خاصيت parentNode می توان به عنصر مادر يک تگ دسترسی پيدا کرد . در مثال زير نيز از جدول مثال قبل استفاده کرده ايم ، با اين تفاوت که در اين مثال از خاصيت parentNode برای دسرستی و نمايش id عنصر مادر تگ < td > استفاده کرده ايم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] <table border ="1"> <tr id="Tr1"> <td id="Td_1"> This is the firstChild . </td> <td id="Td_2"> Cell 2 </td> <td id="Td_3"> And this is the lastChild . </td> </tr> </table> <script type="text/javascript"> document.write ( "parentNode of the td objects is : " + document.getElementById("Tr1").parenNode.id ) ; </script> [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body"] [TABLE] [TR] [TD] This is the firstChild . [/TD] [TD] Cell 2 [/TD] [TD] And this is the lastChild . [/TD] [/TR] [/TABLE] parentNode of the td objects is : Tr1 [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
