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