پیمایش در صفحه (Traversing)

متدهای پیمایش درخت DOM در jQuery کمک می کنند بین عناصر حرکت کنیم. در این درس خیلی ساده یاد می گیری از یک عنصر شروع کنی. بعد به والدها، فرزندان و خواهر-برادرهایش برسی.

پیمایش درخت DOM با jQuery چیست؟

DOM یا Document Object Model نمای درختی صفحه است. هر تگ مثل یک گره درخت است. وقتی می گوییم پیمایش درخت DOM یعنی از یک گره به گره های دیگر حرکت کنیم. معمولاً از یک انتخاب شروع می کنی و آرام جلو می روی.

در jQuery اول یک عنصر را انتخاب می کنی. بعد با متدهای پیمایش، بالا به سمت اجداد، پایین به سمت فرزندان، و کنار به سمت خواهر-برادرها حرکت می کنی. به این حرکت روی درخت، Traversing می گویند.

اگر بخش ابعاد عناصر در jQuery را دیدی، حالا یک قدم جلوتر می روی. این بار فقط اندازه نمی گیری، بلکه میان همان عناصر جابه جا می شوی.

برای مرور لیست کامل متدهای پیمایش، می توانی بعداً به jQuery Traversing Reference سر بزنی. آنجا همه متدهای Traversing فهرست شده است.

رابطه های والد، فرزند و خواهر-برادر

در تصویر منبع، یک <div> داریم که داخلش یک <ul> و چند <li> و تگ های دیگر هستند. این ساختار شبیه یک درخت خانوادگی است. هر تگ یک عضو خانواده است.

• <div> والد مستقیم <ul> است و جد همه داخل خودش است.
• <ul> فرزند <div> است و والد هر دو <li> است.
• <li> چپ، والد <span> است و فرزند <ul> و نوه <div> است.
• <span> فرزند <li> چپ است و نوه <ul> و <div> است.
• دو تگ <li> چون والد مشترک دارند، خواهر-برادر حساب می شوند.
• <li> راست، والد <b> است و خودش فرزند <ul> است.
• <b> فرزند <li> راست و نوه <ul> و <div> است.

نکته: اجداد یعنی والد، پدربزرگ و بالاتر. فرزندان یعنی بچه و نوه و پایین تر. خواهر-برادر یعنی عناصری که والد مشترک دارند؛ مثل دو فرزند یک پدر.

نمونه ساده پیمایش درخت DOM با کد

در مثال زیر منویی ساده با شناسه #menu را تصور کن. ما یک <li> را می گیریم و بعد به والد، فرزندان و خواهر-برادرهایش سر می زنیم. این شبیه پیدا کردن هم کلاسی ها و فامیل ها در یک شجره نامه است.

$(document).ready(function() {
  var $item;
  $item = $("#menu li:first-child");
  $item.parent().addClass("has-active-child");
  $item.children("span").css("color", "red");
  $item.siblings().addClass("is-sibling");
});

مشاهده در ادیتور

اول با $("#menu li:first-child") اولین مورد منو را می گیریم. بعد با parent() به والد می رویم و کلاس می گذاریم. سپس با children() سراغ فرزند <span> می رویم و رنگش را عوض می کنیم. در پایان با siblings() خواهر-برادرهایش را علامت می زنیم.

می توانی برای کار با اجداد بیشتر و مسیرهای بالاتر، بعداً صفحه پیمایش درخت DOM را هم بخوانی. آنجا حرکت به سمت والدها بیشتر تمرین می شود.

چطور قدم به قدم پیمایش کنیم؟

برای تمرین، یک درخت کوچک DOM در ذهن یا روی کاغذ بکش. مثلاً ساختار منوی سایت یا فرم ثبت نام. بعد مراحل زیر را با jQuery تکرار کن.

1. یک عنصر شروع انتخاب کن؛ مثلاً اولین <li> یا یک دکمه.
2. بالا برو و والد مستقیمش را پیدا کن و بررسی کن.
3. پایین برو و فرزندان مستقیمش را ببین و یادداشت کن.
4. کنار برو و خواهر-برادرهایش را پیدا کن و مقایسه کن.
5. این مسیر را چندبار تکرار کن تا درخت DOM را خوب حس کنی.

با این تمرین، مغزت صفحه را مثل یک درخت می بیند. بنابراین پیدا کردن عناصر با jQuery برایت خیلی ساده تر می شود.

جمع بندی سریع

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