به طور کلی وقتی که با Dom سرو کار داریم باید بتونیم راحت بین عناصر مختلف جابجا شیم و برای انجام این کار به مفهومی مثل Dom Traversal میرسیم یعنی چی؟ یعنی از طریق Dom Traversal ما میتونیم یک عنصر رو بر مبنای یک عنصر دیگه انتخاب کنیم .
گاهی اوقات ممکنه که نیاز داشته باشیم که عنصری رو که به یک اِلِمان مهم دیگه مرتبطه انتخاب کنیم مثلا به عنصر فرزند یا والد (direct child / direct parent element ) برسیم یا حتی ممکنه که اصلا ندونیم که ساختار Dom در حالت اجرا به چه صورته تمامی این شرایط باعث میشن که ما به Dom Traversal نیاز داشته باشیم.
به عنوان مثال کد زیر رو در نظر بگیرید:
const span=document.querySelector(span); console.log(span.querySelectorAll('.name)
خروجی کد بالا یک nodeList حاوی تمام عناصری هست که کلاس name دارند.
NodeList(2) [div.name, h1.name]
حالا اگر Direct child هارو بخوایم باید از متد childNodes مثل زیر استفاده کنیم:
span.childNodes
این کد میاد تمام node هایی که داخل span ما وجود دارند رو به همراه Typeشون میریزه توی یک nodeList مثل زیر:
NodeList(5) [text, div.name, text, h1.name, text]
حالا اگر ما بخوایم فقط به عناصر html که توی اون span خاص مد نظر ماوجود دارند که نقش فرزند رو دارند برسیم متد children رو باید انتخاب کنیم:
span.childNodes
در این صورت خروجی ما یک htmlCollection خواهد بود
HTMLCollection(2)[div.name, h1.name]
اما js دوتا متد دیگه هم برای ما تعریف کرده که ما بتونیم به اولین/آخرین عنصرفرزند توی Dom برای بخش مد نظرمون هم دسترسی داشته باشیم که متدشون به ترتیب هست:
span.firstElementChild
span.lastElementChild
اما تا اینجا رویکرد ما از بالا به پایین (downWard) بود یعنی از سمت والد به سمت فرزند میرسیدیم ولی ما متد هایی هم داریم که میتونیم upWard یا از فرزندان به والد و یا حتی سایر فرزند ها در یک سطح (siblings)برسیم
span span.parentElement span.closest('.name')
خب همونطورکه میشه حدس زد این متدها دقیقا بر خلاف متد های downWard هستن ولی نکته جالبی که وجود داره در مورد متد closest هست که دقیقا مثل querySelector نیاز به تعیین یک سلکتور داره ولی با این تفاوت که اون سلکتور رو توی عناصر parent میگرده
و متدهای آخر هم مربوط به عناصر هم سطح یا sibling ها هستن
span.previousElementSibling span.nextElementSibling
برای اینکه node های هم سطح رو هم ببینیم کافیه که element رو از عبارات بالا حذف کنیم یعنی:
span.previousSibling span.nextSibling
