خصوصیت element.firstChild

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

به دست آوردن محتوای HTML از اولین گره فرزند از یک عنصر <ul>:

var x = document.getElementById("myList").firstChild.innerHTML;

خروجی x در کد بالا

Coffee

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

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

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

خصوصیت firstChild ، اولین گره فرزند را از گره مورد نظر بعنوان یک شیء Node برمی گرداند.

تفاوت بین این خصوصیت و firstElementChild در این است که firstChild اولین گره فرزند را مانند یک گره عنصر، یا گره متنی یا گره کامنت برمی گرداند در حالی که firstElementChild ، اولین گره فرزند را مانند یک شیء عنصر برمی گرداند.(گره های text و comment را نادیده می گیرد).

نکته: فاصله ی سفید درون عناصر مانند متن در نظر گرفته می شود و متن نیز بعنوان گره در نظر گرفته می شود.

این خصوصیت فقط خواندنی می باشد.

نکته: می توانید از خصوصیت element.childNodes برای برگرداندن هر گره فرزند از یک گره مشخص، استفاده کنید. دستور [0]childNodes همان کاری را انجام می دهد که دستور firstChild انجام می دهد.

نکته: برای برگرداندن آخرین گره فرزند از یک گره مشخص، می توانید از خصوصیت lastChild استفاده کنید.

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

متد
firstChild	بله	بله	بله	بله	بله

نحوه استفاده

node.firstChild

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

مقدار برگشتی	یک شیء گره که مشخص کننده ی اولین فرزند از یک گره می باشد و در صورتی که هیچ گره فرزندی وجود نداشته باشد null را برمی گرداند.
DOM Version	Core Level 1 Node Object

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

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

در این مثال، ما نشان می دهیم که چطور فاصله ی سفید ممکن است با این خصوصیت تداخل ایجاد کند:

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

<div id="myDIV">
<p>Looks like first child</p>
<span>Looks like last Child</span>
</div>

<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>

خروجی x در کد بالا

#text

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

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

اما در صورتی که ما فاصله ی سفید را از سورس کد حذف کنیم ، هیچ گره text# در عنصر <div>، که عنصر <p> را تبدیل به اولین گره فرزند می کند، وجود نخواهد داشت.

<div id="myDIV"><p>First child</p><span>Last Child</span></div>

<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>

خروجی x در کد بالا

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