خصوصیت element.children

مثال (خصوصیت element.children)

به دست آوردن یک مجموعه از فرزندان عنصر <body> :

var c = document.body.children;

در انتهای این صفحه، مثال های بیشتری آورده شده است.

تعریف و کاربرد

خصوصیت children یک مجموعه از عناصر فرزند یک عنصر را بعنوان یک شیء HTMLCollection برمی گرداند.

عناصر درون مجموعه، همان طور که در سورس کد ظاهر می شوند، ذخیره می شوند و می توان به وسیله ی اندیس به آنها دسترسی پیدا نمود. اندیس از 0 شروع می شود.

نکته: شما می توانید با استفاده از خصوصیت length از شیء HTMLCollection برای مشخص کردن تعداد عناصر فرزند استفاده کنید. سپس شما می توانید بر روی تمام عناصر فرزند یک حلقه ایجاد کنید و اطلاعات مورد نظر خود را استخراج کنید.

تفاوت بین این خصوصیت و خصوصیت childNodes در این است که خصویت childNodes در بر دارنده ی تمام گره ها، شامل گره های متنی و گره های کامنت می باشد اما خصوصیت children تنها شامل گره های عنصر می باشد.

پشتیبانی مرورگرها

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

متد
children	2.0	9.0*	3.5	4.0	10.0

نکته: خصوصیت children در IE6 و IE8 به طور کامل پشتیبانی می شود اما در این ورژن ها این دستور گره های عنصر و گره های کامنت را برمی گرداند.در IE9 و ورژن های جدید تر آن، تنها گره های عنصر برگردانده خواهند شد.

نحوه استفاده

element.children

جزئیات تکنیکی

مقدار برگشتی	یک شیء HTMLCollection که مشخص کننده ی یک مجموعه از گره های عنصر است. عناصر درون مجموعه ی برگشت داده شده همان گونه که در سورس کد ظاهر می شوند، ذخیره می شوند.
DOM Version	Core Level 1 کلیه توابع و خصوصیت های شیء Element در JavaScript

مثال - خودتان امتحان کنید

مثال (خصوصیت element.children)

فهمیدن اینکه یک عنصر <div> دارای چه تعداد فرزند است:

var c = document.getElementById("myDIV").children.length;

خروجی c در کد بالا:

2

خودتان امتحان کنید »

مثال (خصوصیت element.children)

تغییر دادن رنگ پس زمینه ی دومین عنصر فرزند از یک عنصر <div>:

var c = document.getElementById("myDIV").children;
c[1].style.backgroundColor = "yellow";

خودتان امتحان کنید »

مثال (خصوصیت element.children)

گرفتن متن از سومین عنصر فرزند (اندیس 2) از یک عنصر <selct>:

var c = document.getElementById("mySelect").children[2].text;

خروجی c در کد بالا:

Saab

خودتان امتحان کنید »

مثال (خصوصیت element.children)

ایجاد یک حلقه بر روی تمام فرزندان تگ <body> و تغییر دادن رنگ پس زمینه ی آنها به قرمز:

var c = document.body.children;
var i;
for (i = 0; i < c.length; i++) {
c[i].style.backgroundColor = "red";
}

خودتان امتحان کنید »

آموزش های مرتبط

مرجع مدل DOM در اچ تی ام ال childNodes Property

کلیه توابع و خصوصیت های شیء Element در JavaScript

: نوشته شده توسط احسان عباسی; بازدید: 4429

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

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

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی