خانه آموزش زبان جاوااسکریپت آموزش DOM در جاوااسکریپت ویژگی childNodes در DOM جاوااسکریپت

ویژگی childNodes در DOM جاوااسکریپت

توسط

۱۴۰۰-۰۱-۲۵

این آموزش در تاریخ ۱۴۰۰/۰۱/۲۸ آپدیت شده است.

آموزش ویژگی childNodes در DOM جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی childNodes در DOM جاوااسکریپت با من همراه باشید.

ویژگی childNodes در DOM جاوااسکریپت

Free-Learn

آنچه در این جلسه میخوانید :

1 ویژگی childNodes در DOM جاوااسکریپت
2 مثال از این ویژگی
3 پشتیبانی مرورگرها
4 شکل نوشتاری
5 نکات و توضیحات
6 مثال های بیشتر

ویژگی childNodes در DOM جاوااسکریپت

با استفاده از ویژگی childNodes میتونیم به مجموعه ای از گره های فرزند یک عنصر ( همه ی گره ها، از جمله گره متن ، گره کامنت و.. ) با استفاده از شماره ایندکس یا Index یا شماره جایگاه دسترسی پیدا نماییم.

توجه : خط فاصله های بین یک متن به عنوان گره متن ( سیستم گره متن رو اینجوری نشون میده text# ) شناخته میشه و خوده عنصر ( تگ ) هم به عنوان گره شناخته میشه و کامنت ها ( سیستم اینجوری نشون میده comment# ) هم به عنوان گره شناخته میشن. [ مثال برای نحوه نمایش گره ها ]

مقدار برگشتی	برگشت یک شئ از مجموعه گره های یک عنصر
نسخه DOM	Core Level 1 Element Object

Free-Learn

مثال از این ویژگی

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

مثال شماره ۱ : بدست آوردن تعداد کل گره های موجود در یک عنصر با استفاده از ویژگی length ( این مثال شامل خط فاصله می باشد )

<div id="MyBox">
 <p>سایت آموزشی فری لرن</p>
</div>

<p>سایت آموزشی فری لرن</p>

</div>

<script>

function get(){
 var mybox , result;
 mybox = document.getElementById("MyBox").childNodes.length;
 result = document.getElementById("Result").innerHTML = mybox;
}

</script>

function get(){

var mybox , result;

mybox = document.getElementById("MyBox").childNodes.length;

result = document.getElementById("Result").innerHTML = mybox;

}

</script>

امتحان کنید

توضیح مثال بالا :

در مثال بالا با کلیک بروی یک دکمه میخوایم ببینیم تعداد عددی کل فرزندان موجود در تگ DIV ( با محاسبه کل گره ها ) چقدر می باشد؟

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

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

مثال شماره ۲ : بدست آوردن تعداد کل گره های موجود در یک عنصر ( این مثال شامل خط فاصله نمی باشد )

<div id="MyBox"><p>سایت آموزشی فری لرن</p></div>

1	<div id="MyBox"><p>سایت آموزشی فری لرن</p></div>

امتحان کنید

مثال شماره ۳ : دسترسی به فرزند دوم از طریق شماره ایندکس ( Index ) ( این مثال شامل خط فاصله می باشد )

<script>

function get(){
 var mybox;
 mybox = document.getElementById("MyBox").childNodes[3];
 mybox.style.backgroundColor = "yellow";
}

</script>

function get(){

var mybox;

mybox = document.getElementById("MyBox").childNodes[3];

mybox.style.backgroundColor = "yellow";

}

</script>

امتحان کنید

مثال شماره ۴ : دسترسی به فرزند دوم از طریق شماره ایندکس ( Index ) ( این مثال شامل خط فاصله نمی باشد )

<script>

function get(){
 var mybox;
 mybox = document.getElementById("MyBox").childNodes[1];
 mybox.style.backgroundColor = "yellow";
}

</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) این ویژگی در جاوااسکریپت بصورت زیر می باشد.

Element.childNodes[ Index_Number ];

1	Element.childNodes[ Index_Number ];

Index_Number : اون شماره ایندکس یا جایگاه عنصر

Free-Learn

نکات و توضیحات

این ویژگی یک ویژگی فقط خواندنی یا Read-Only می باشد.
برای بدست آوردن فرزندان یک عنصر بدون محاسبه گره های متن یا گره های کامنت و.. باید از ویژگی children استفاده نمایید.

Free-Learn

مثال های بیشتر

مثال شماره ۱ : بدست آوردن کل گره های موجود در یک عنصر ( در این مثال میخوایم نام گره هارو بدست آوریم )

<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>

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>

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب