پیمایش نودها در جاوا اسکریپت

به نام خدا با عرض سلانم و وقت بخی خدمت دوستان گرامی در راستای آموزش جاوا اسکریپت این جلسه به مبحث پیمایش نودها در جاوا اسکریپت خواهیم پرداخت.باماهمراه باشید.

نحوه پیمایش بین گره های DOM

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

گره DOM چندین ویژگی و روش ارائه می دهد که به شما امکان می دهد در ساختار درختی DOM پیمایش کنید و تغییرات را به راحتی انجام دهید.در این بخش نحوه حرکت به سمت بالا، پایین و پهلو در درخت DOM را  با استفاده از جاوا اسکریپت یاد خواهیم گرفت.

دسترسی به گره های فرزند

شما می توانید از ویژگی های firstChild و lastChild گره DOM برای دسترسی به اولین و آخرین گره فرزند مستقیم یک گره استفاده کنید. اگر گره مورد نظر فرزندی نداشته باشد،  nullرا برمی‌گرداند.

به عنوان مثال:

نکته:nodeName یک پراپرتی خواندنی است که نام گره فعلی را به عنوان یک رشته برمی گرداند.به عنوان مثال، نام تگ را برای گره عنصر،text# برای گره متن، comment#برای گره کامنت، document# برای گره سند، و … را برمی گرداند.

اگر به مثال بالا توجه کنید، nodeName گره فرزند اول عنصر اصلیDIV  به جای H1، مقدار  text#رابرمی گرداند.زیرا فضاهای خالی مانند فاصله ها، تب ها، خطوط جدید و … کاراکترهای معتبر هستند و گره های text# را تشکیل می دهند و بخشی از درخت DOM می شوند.بنابراین، از آنجایی که تگ<div>  حاوی یک خط جدید قبل از تگ  <h1>  است، بنابراین یک گره text# ایجاد می کند.

برای جلوگیری از بروز مشکل  برگرداندن  گره‌های text# یا comment# از  lastChild و  firstChild، می‌توانید از ویژگی‌های  firstElementChild و  lastElementChild استفاده کنید تا به ترتیب تنها اولین و آخرین گره عنصر را برگردانید. اما این متد ها ، در IE9 و قبل از آن کار نخواهد کرد.

به عنوان مثال:

همچنین، می‌توانید از ویژگی  childNodes برای دسترسی به تمام گره‌های فرزند یک عنصر معین استفاده کنید، جایی که اولین گره فرزند دارای ایندکس صفر است. به عنوان مثال:

 childNodes تمام گره های فرزند، از جمله گره های text و comment را برمی گرداند. برای به دست آوردن مجموعه ای از عناصر، میتوانید از پراپرتی children استفاده کنید.

نحوه دسترسی به گره های والد

با استفاده  از ویژگی parentNode میتوانید برای دسترسی به والد گره مشخص شده در درخت DOM استفاده کنید. parentNode همیشه برای گره سند null برمی‌گرداند، زیرا والد ندارد.

نکته: بالاترین گره های درخت DOM را می توان مستقیماً  از طریق پراپرتی های document به انها دسترسی پیدا کرد.برای مثال، عنصر <html> با پراپرتی document.documentElement ، عنصر <head> با ویژگی document.head و عنصر <body> با پراپرتی document.body قابل دسترسی میباشند.

با این حال، اگر می خواهید فقط گره های عنصر را دریافت کنید، می توانید از  parentElement,مانند مثال زیر استفاده کنید:

دسترسی به گره های خواهر و برادر

برای دسترسی به گره قبلی و بعدی در درخت DOM می توانید از ویژگی های  previousSiblingو  nextSiblingاستفاده کنید.

به عنوان مثال:

از طرف دیگر، می‌توانید از  previousElementSibling و nextElementSibling استفاده کنید تا المنت خواهر و برادر قبلی و بعدی را از هر گره text# یا فضای خالی رد کنید.اگر چنین خواهر و برادری وجود نداشته باشد، انگاه null  برگردانده میشود. 

به عنوان مثال:

ویژگی textContent محتوای متن یک گره و همه فرزندان آن را نشان می دهد.

انواع گره های DOM

درخت DOM از انواع مختلفی از گره ها مانند عناصر، text، کامنتهاو ….تشکیل شده است.

هر گره دارای یک ویژگی nodeType است که می توانید از آن استفاده کنید تا متوجه شوید با چه نوع گره ای سروکار دارید.جدول زیر مهمترین انواع گره ها را فهرست می کند:

پیمایش نودها در جاوا اسکریپت | JavaScript DOM Navigation

خب دوستان عزیز به پایان بخش پیمایش نودها در جاوا اسکریپت رسیدیم امیدواریم مورد توجه شما واقع گردد.
سایر مقالات:

 

 

 

 

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 1 میانگین: 4]
اشتراک‌گذاری

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *