DOM Navigation به معنای حرکت و پیمایش بین عناصر HTML در ساختار DOM است.
با این قابلیت می‌توان والد، فرزند، برادر و خواص دیگر عناصر را دسترسی داد و تغییر داد.

🔹 1. دسترسی به والد عنصر

• parentNode → دسترسی به والد عنصر

• parentElement → دسترسی به والد از نوع Element

let item = document.getElementById("item1");
console.log(item.parentNode);      // والد عنصر
console.log(item.parentElement);   // والد عنصر (Element)

🔹 2. دسترسی به فرزندان

• childNodes → همه فرزندان شامل متن، کامنت و عناصر

• children → فقط فرزندان از نوع Element

let container = document.getElementById("container");
console.log(container.childNodes);  // همه فرزندان
console.log(container.children);    // فقط عناصر

• دسترسی به اولین و آخرین فرزند:

console.log(container.firstChild);    // اولین node
console.log(container.firstElementChild); // اولین element
console.log(container.lastChild);     // آخرین node
console.log(container.lastElementChild);  // آخرین element

🔹 3. دسترسی به برادران

• previousSibling → برادر قبلی (شامل متن و comment)

• previousElementSibling → برادر قبلی از نوع Element

• nextSibling → برادر بعدی

• nextElementSibling → برادر بعدی از نوع Element

let item = document.getElementById("item2");
console.log(item.previousElementSibling); // عنصر قبل
console.log(item.nextElementSibling);     // عنصر بعد

🔹 4. پیمایش عمقی با querySelector

• می‌توان به صورت ترکیبی فرزند یا نوه را انتخاب کرد

let firstSubItem = document.querySelector("#container .subItem");
console.log(firstSubItem.innerText);

🔹 5. دسترسی به والد والد

• با ترکیب parentNode یا parentElement می‌توان به سطوح بالاتر دسترسی داشت

let subItem = document.querySelector(".subItem");
console.log(subItem.parentElement.parentElement); // والد والد

🔹 6. پیمایش بین عناصر فرم

• دسترسی به عناصر فرم از طریق elements

let form = document.getElementById("myForm");
let username = form.elements["username"];
console.log(username.value);

✅ خلاصه

• DOM Navigation → حرکت بین والد، فرزند و برادر عناصر

• والد عنصر: parentNode, parentElement

• فرزندان: childNodes, children, firstChild, firstElementChild, lastChild, lastElementChild

• برادران: previousSibling, previousElementSibling, nextSibling, nextElementSibling

• ترکیب با querySelector → دسترسی به عناصر داخلی

• پیمایش فرم‌ها → form.elements