فرزندان (Descendants)

در این بخش با پیمایش فرزندان DOM آشنا می شوی. یعنی از یک عنصر شروع می کنی و رو به پایین می روی. مثل وقتی از یک پوشه شروع می کنی و وارد زیرپوشه ها و فایل هایش می شوی.

فرزندان درخت DOM در jQuery چیست؟

DOM یا Document Object Model یک درخت از تگ ها است. فرزندان (Descendants) یعنی همه تگ هایی که داخل یک تگ دیگر هستند. بچه، نوه و نوه نوه و پایین تر.

در اجداد (Ancestors) رو به بالا حرکت می کردیم. اما اینجا فقط پایین می رویم. به این حرکت رو به پایین، پیمایش فرزندان DOM می گوییم.

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

متد children() برای فرزندان مستقیم

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

در مثال منبع، همه فرزندان مستقیم هر تگ <div> گرفته می شوند:

$(document).ready(function() {
  $("div").children();
});

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

اول منتظر آماده شدن صفحه می مانیم. سپس همه <div>ها انتخاب می شوند. متد children() روی آن ها اجرا می شود و فقط فرزندان مستقیم هر div برگردانده می شود.

نکته: children() هرگز نوه ها را برنمی گرداند. فقط یک طبقه پایین تر را می بیند.

فیلترکردن فرزندان با children(selector)

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

مثال زیر فقط تگ های <p> با کلاس first را که فرزند مستقیم <div> هستند برمی گرداند:

$(document).ready(function() {
  $("div").children("p.first");
});

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

حالا jQuery فقط به فرزندان مستقیم نگاه می کند. اما فقط آن هایی که تگ p هستند و کلاس first دارند در نتیجه می مانند. مثل این است که بگویی فقط دانش آموزان کلاس هشتم الف را نشان بده.

متد find() برای همه فرزندان

متد find() سخت کوش تر است. این متد همه فرزندان را در همه لایه ها می گردد. از بچه ها تا نوه ها و پایین تر. یعنی کل زیرشاخه یک عنصر را جستجو می کند.

در مثال اول، همه <span>هایی که فرزند هر <div> هستند برمی گردند:

$(document).ready(function() {
  $("div").find("span");
});

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

اینجا فقط spanها مهم هستند. فرقی ندارد چقدر عمیق توی div باشند. اگر در هر سطحی فرزند div باشند، در نتیجه می آیند.

در مثال دوم، از find("*") استفاده شده است. ستاره یعنی همه تگ ها. پس همه فرزندان div گرفته می شوند.

$(document).ready(function() {
  $("div").find("*");
});

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

این کد تمام زیرساخت داخل div را برمی گرداند. یعنی تک تک تگ هایی که به نوعی داخل div هستند. گاهی برای شمارش یا اعمال یک استایل کلی مفید است.

نکته: تفاوت مهم این است که children() فقط یک سطح پایین می رود، اما find() همه لایه ها را بررسی می کند.

چطور مرحله به مرحله با فرزندان کار کنیم؟

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

1. از jQuery برای انتخاب یک <div> شروع کن.
2. با children() فقط فرزندان مستقیم همان div را ببین.
3. با children("p.first") یک نوع فرزند خاص را فیلتر کن.
4. با find("span") دنبال همه spanهای داخل div بگرد.
5. با find("*") همه فرزندان div را بررسی و ساختار را حس کن.

بعد از این تمرین، حرکت رو به پایین در درخت DOM برایت طبیعی می شود. در ادامه سری می توانی برای تمرین حرکت افقی، صفحه خواهر-برادرها (Siblings) را بخوانی.

جمع بندی سریع

• فرزندان DOM یعنی بچه ها، نوه ها و پایین تر یک عنصر.
• متد children() فقط فرزندان مستقیم را برمی گرداند.
• می توانی با children(selector) فرزندان را فیلتر کنی.
• متد find() همه فرزندان را در همه لایه ها می گردد.
• find("*") همه عناصر زیر یک گره را برمی گرداند.