این آموزش در تاریخ ۱۴۰۱/۰۵/۰۱ آپدیت شده است.
آموزش ویژگی children در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی children در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی children در DOM جاوااسکریپت
با استفاده از ویژگی children میتونیم به مجموعه ای از تگ های فرزند درون یک تگ، با استفاده از شماره ایندکس یا شماره جایگاه دسترسی پیدا نماییم.
توجه : یک ویژگی داریم بنام childNodes که این ویژگی میاد و کل گره هارو ( از جمله گره متن ، گره کامنت ، گره تگ ) رو برمیگردونه، ولی ویژگی children فقط و فقط گره خوده تگ رو برمیگردونه.
| مقدار برگشتی | برگشت مجموعه ای از تگ های فرزند داخل یک تگ |
|---|---|
| نسخه DOM | DOM Level 1 |
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : بدست آوردن تعداد عددی کل فرزندان یک تگ با استفاده از ویژگی length
|
1 2 3 4 5 6 7 8 9 10 |
<script> function Get(){ var MyBox , Result; MyBox = document.getElementById("Mybox"); Result = document.getElementById("Result") Result.innerHTML = MyBox.children.length; } </script> |
مثال شماره ۲ : انتخاب فرزند دوم از طریق شماره ایندکس ( Index ) ( شماره ایندکس همیشه از ۰ شروع میشه ، شماره ایندکس فرزند اول میشه ۰ و فرزند دوم میشه ۱ و همینجور تابره )
|
1 2 3 4 5 6 7 8 9 |
<script> function Get(){ var MyBox; MyBox = document.getElementById("MyBox"); MyBox.children[1].style.backgroundColor = "yellow"; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| children | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
|
1 |
Element.children[ Index_Number ]; |
- Index_Number : اون شماره ایندکس یا جایگاه تگ
Free-Learn
نکات و توضیحات
- برای بدست آوردن گره های یک عنصر ( که شامل گره متن ، گره خوده عنصر ، گره کامنت ) باشه ، باید از ویژگی childNodes استفاده نمایید.
Free-Learn
مثال های بیشتر
مثال شماره ۱ : انتخاب تمامی تگ های موجود در یک تگ ( به کمک حلقه For )
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function Get(){ var MyBox , i; MyBox = document.getElementById("MyBox").children; for( i = 0; i < MyBox.length; i++ ){ MyBox[i].style.backgroundColor = "yellow"; } } </script> |
