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