کار با گره ها یا Nodes در جاوا اسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با گره ها یا Nodes در جاوا اسکریپت با من همراه باشید.

کار با گره ها یا Nodes در جاوا اسکریپت

Free-Learn

کار با گره ها یا Nodes در جاوا اسکریپت

میگه آقا، یک صفحه ی وب از مجموعه ای از گرِه ها یا به انگلیسی nodes تشکیل شده است که بهش میگن درخت گره یا Node Tree که ما میتونیم به این گره ها دسترسی داشته باشیم.

پس اینجوری میتونیم بگیم ، به هر یک از عناصر موجود در یک صفحه ی وب ( مثلا تگ Body یا تگ h2 یا هر تگ دیگه ای ) گره یا Node گفته میشه و ما میتونیم همین گره هارو تغییر، ایجاد و یا حذف نماییم.

رابطه ی بین گره ها

خب بلاخره باید یه رابطه ای ( یا Relationship ) بین گره ها باشه، همینجوری عشقی هم که نمیشه، مثلا شاید من بخوام به فرزند فلان عنصر دسترسی پیدا کنم؟! خب چجوری اینکارو کنم!؟ خب از طریق همین رابطه ها میتونیم اینکارو انجام بدیم.

چنتا اصطلاح برای تعریف این رابطه ها وجود داره که به شرح زیر می باشند :

  • Parent : یعنی عنصر والد یا پدر
  • Child : یعنی عنصر فرزند
  • Siblings : یعنی عنصر خواهر یا برادر

طبق تصویر زیر میتونید خیلی راحتتر این رابطه هارو درک نمایید :

کار با گره ها یا Nodes در جاوا اسکریپت

در تصویر بالا من مثال رو بروی تگ های html و head و body زدم ولی خب اینجوری نیست که بگیم فقط این تگ ها هستن که این رابطه هارو دارند! نه اینجوری نیست

کلا هر تگی که پدر باشه و داخلش یک تگ دیگه باشه میشه این رابطه رو روش پیاده کرد، بفرض مثال :

خب الان تگ div میشه والد یا پدر ، و تگ های P و H2 میشن فرزندان و در نهایت تگ P با تگ H2 رابطه ی خواهر یا برادری داره ( اینکه کدوم خواهر و کدوم برادر هست والا من نمیدونم، چون من نبودم پیششون خخخ )

حالا دور از شوخی وقتی میگیم خواهر یا برادر اینجوری نیست که بگیم مثلا فلان تگ خواهره و بهمان تگ برادر، کلی اومدن یه اصطلاح گذاشتن براشون و حرفشون اینه که آقا این ۲ تا تگ فرزند هستن و در کنار همدیگه هم هستن، پس بهشون میگیم خواهر و برادر.

Free-Learn

گره روت یا Root یا ریشه صفحه

در ادامه ی آموزش کار با گره ها یا Nodes در جاوا اسکریپت میخوایم با ۲ ویژگی document.body و document.documentElement آشنا شیم.

با استفاده از این ویژگی ها میتونیم به ترتیب به body و یا کل صفحه وبمون دسترسی پیدا نماییم.

  • document.body : دسترسی به تگ بادی یا بدنه اصلی صفحه
  • document.documentElement : دسترسی به کل صفحه وب

مثال شماره ۱ : در مثال زیر با استفاده از ویژگی innerHTML میخوایم محتوای تگ Body رو بدست آوریم و همین محتوا رو درون یک تگ دیگه به نمایش درآوریم.

امتحان کنید

مثال شماره ۲ : در مثال زیر میخوایم کل محتوای صفحه رو به نمایش درآوریم.

امتحان کنید

Free-Learn

ویژگی nodeName

با استفاده از این ویژگی nodeName میتونیم نام یک گره رو بدست آوریم.

  • این ویژگی فقط خواندنی یا read-only می باشد.
  • نام گره از گره عنصر یا تگ میشه نام خوده تگ
  • نام گره از گره صفت میشه نام صفت
  • نام گره از گره متن همیشه میشه text#
  • نام گره از گره صفحه وب همیشه میشه document#

مثال : بدست آوردن نام گره ( یا همون نام تگ یا عنصر ) از گره عنصر با استفاده از ویژگی nodeName

امتحان کنید

Free-Learn

ویژگی nodeValue

با استفاده از این ویژگی ما میتونیم مقدار یک گره رو بدست آوریم. ( بطور کلی مقدار یا محتوای همون تگ یا عنصر )

  • مقدار گره برای گره عناصر میشه null
  • مقدار گره برای گره متن میشه متن موجود در عنصر
  • مقدار گره برای گره صفت میشه مقدار صفت

مثال : بدست آوردن مقدار یا محتوای گره با استفاده از ویژگی nodeValue

امتحان کنید

Free-Learn

ویژگی nodeType

با استفاده از ویژگی nodeType همونطور که از اسمش هم مشخصه ، میتونیم نوع یک گره رو بدست آوریم، و مقداری که این ویژگی به خروجی میده یک مقدار عددی می باشد.

جدول مهمترین نوع های گره :

نام گره به فارسی نام گره به انگلیسی Type و مقدار برگشتی مثال
گره عنصر یا تگ ELEMENT_NODE ۱ <h2>
گره متن TEXT_NODE ۳ Test
گره کامنت یا توضیحات COMMENT_NODE ۸ <– Test –!>
گره سند یا صفحه DOCUMENT_NODE ۹ <html>
گره نوع سند یا صفحه DOCUMENT_TYPE_NODE ۱۰ <Doctype html!>

 

مثال شماره ۱ : بدست آوردن نوع یا Type گره عنصر ( تگ )

امتحان کنید

مثال شماره ۲ : بدست آوردن نوع یا Type گره سند یا صفحه وب

امتحان کنید

Free-Learn

فروشگاه فری لرن
دریافت PDF یا پرینت این مطلب