کار با گره ها یا Nodes در جاوا اسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با گره ها یا Nodes در جاوا اسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با گره ها یا Nodes در جاوا اسکریپت
میگه آقا، یک صفحه ی وب از مجموعه ای از گرِه ها یا به انگلیسی nodes تشکیل شده است که بهش میگن درخت گره یا Node Tree که ما میتونیم به این گره ها دسترسی داشته باشیم.
پس اینجوری میتونیم بگیم ، به هر یک از عناصر موجود در یک صفحه ی وب ( مثلا تگ Body یا تگ h2 یا هر تگ دیگه ای ) گره یا Node گفته میشه و ما میتونیم همین گره هارو تغییر، ایجاد و یا حذف نماییم.
رابطه ی بین گره ها
خب بلاخره باید یه رابطه ای ( یا Relationship ) بین گره ها باشه، همینجوری عشقی هم که نمیشه، مثلا شاید من بخوام به فرزند فلان عنصر دسترسی پیدا کنم؟! خب چجوری اینکارو کنم!؟ خب از طریق همین رابطه ها میتونیم اینکارو انجام بدیم.
چنتا اصطلاح برای تعریف این رابطه ها وجود داره که به شرح زیر می باشند :
- Parent : یعنی عنصر والد یا پدر
- Child : یعنی عنصر فرزند
- Siblings : یعنی عنصر خواهر یا برادر
طبق تصویر زیر میتونید خیلی راحتتر این رابطه هارو درک نمایید :
در تصویر بالا من مثال رو بروی تگ های html و head و body زدم ولی خب اینجوری نیست که بگیم فقط این تگ ها هستن که این رابطه هارو دارند! نه اینجوری نیست
کلا هر تگی که پدر باشه و داخلش یک تگ دیگه باشه میشه این رابطه رو روش پیاده کرد، بفرض مثال :
|
1 2 3 4 |
<div> <p>Salam</p> <h2>Khobi?</h2> </div> |
خب الان تگ div میشه والد یا پدر ، و تگ های P و H2 میشن فرزندان و در نهایت تگ P با تگ H2 رابطه ی خواهر یا برادری داره ( اینکه کدوم خواهر و کدوم برادر هست والا من نمیدونم، چون من نبودم پیششون خخخ )
حالا دور از شوخی وقتی میگیم خواهر یا برادر اینجوری نیست که بگیم مثلا فلان تگ خواهره و بهمان تگ برادر، کلی اومدن یه اصطلاح گذاشتن براشون و حرفشون اینه که آقا این ۲ تا تگ فرزند هستن و در کنار همدیگه هم هستن، پس بهشون میگیم خواهر و برادر.
Free-Learn
گره روت یا Root یا ریشه صفحه
در ادامه ی آموزش کار با گره ها یا Nodes در جاوا اسکریپت میخوایم با ۲ ویژگی document.body و document.documentElement آشنا شیم.
با استفاده از این ویژگی ها میتونیم به ترتیب به body و یا کل صفحه وبمون دسترسی پیدا نماییم.
- document.body : دسترسی به تگ بادی یا بدنه اصلی صفحه
- document.documentElement : دسترسی به کل صفحه وب
مثال شماره ۱ : در مثال زیر با استفاده از ویژگی innerHTML میخوایم محتوای تگ Body رو بدست آوریم و همین محتوا رو درون یک تگ دیگه به نمایش درآوریم.
|
1 |
result.innerHTML = document.body.innerHTML; |
مثال شماره ۲ : در مثال زیر میخوایم کل محتوای صفحه رو به نمایش درآوریم.
|
1 |
result.innerHTML = document.documentElement.innerHTML; |
Free-Learn
ویژگی nodeName
با استفاده از این ویژگی nodeName میتونیم نام یک گره رو بدست آوریم.
- این ویژگی فقط خواندنی یا read-only می باشد.
- نام گره از گره عنصر یا تگ میشه نام خوده تگ
- نام گره از گره صفت میشه نام صفت
- نام گره از گره متن همیشه میشه text#
- نام گره از گره صفحه وب همیشه میشه document#
مثال : بدست آوردن نام گره ( یا همون نام تگ یا عنصر ) از گره عنصر با استفاده از ویژگی nodeName
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> var a1 = document.getElementById("test1"); var a2 = document.getElementById("test2"); var a3 = document.getElementById("test3"); document.write( "نام گره اول هست : " + a1.nodeName ); document.write("<br><br>"); document.write( "نام گره دوم هست : " + a2.nodeName ); document.write("<br><br>"); document.write( "نام گره سوم هست : " + a3.nodeName ); </script> |
Free-Learn
ویژگی nodeValue
با استفاده از این ویژگی ما میتونیم مقدار یک گره رو بدست آوریم. ( بطور کلی مقدار یا محتوای همون تگ یا عنصر )
- مقدار گره برای گره عناصر میشه null
- مقدار گره برای گره متن میشه متن موجود در عنصر
- مقدار گره برای گره صفت میشه مقدار صفت
مثال : بدست آوردن مقدار یا محتوای گره با استفاده از ویژگی nodeValue
|
1 2 3 4 5 6 |
<script> var a = document.getElementById("test"); document.write( "مقدار گره هست : " + a.childNodes[0].nodeValue ); </script> |
Free-Learn
ویژگی nodeType
با استفاده از ویژگی nodeType همونطور که از اسمش هم مشخصه ، میتونیم نوع یک گره رو بدست آوریم، و مقداری که این ویژگی به خروجی میده یک مقدار عددی می باشد.
جدول مهمترین نوع های گره :
| نام گره به فارسی | نام گره به انگلیسی | Type و مقدار برگشتی | مثال |
|---|---|---|---|
| گره عنصر یا تگ | ELEMENT_NODE | ۱ | <h2> |
| گره متن | TEXT_NODE | ۳ | Test |
| گره کامنت یا توضیحات | COMMENT_NODE | ۸ | <– Test –!> |
| گره سند یا صفحه | DOCUMENT_NODE | ۹ | <html> |
| گره نوع سند یا صفحه | DOCUMENT_TYPE_NODE | ۱۰ | <Doctype html!> |
مثال شماره ۱ : بدست آوردن نوع یا Type گره عنصر ( تگ )
|
1 2 3 4 5 6 |
<script> var a = document.getElementById("test"); document.write( "Type : " + a.nodeType ); </script> |
مثال شماره ۲ : بدست آوردن نوع یا Type گره سند یا صفحه وب
|
1 2 3 4 5 |
<script> document.write( "Type : " + document.nodeType ); </script> |
