HTML DOM خاصية firstChild
مثال
احصل على محتوى HTML للعقدة الفرعية الأولى لعنصر <ul>:
var x = document.getElementById("myList").firstChild.innerHTML;
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تقوم الخاصية firstChild بإرجاع العقدة الفرعية الأولى للعقدة المحددة ، ككائن عقدة.
يتمثل الاختلاف بين هذه الخاصية و firstElementChild في أن firstChild تُرجع العقدة الفرعية الأولى كعقدة عنصر أو عقدة نصية أو عقدة تعليق (اعتمادًا على العقدة الأولى) ، بينما تُرجع firstElementChild العقدة الفرعية الأولى كعقدة عنصر (يتجاهل النص وعقد التعليق).
ملاحظة: يتم اعتبار المسافة البيضاء داخل العناصر كنص ، ويعتبر النص بمثابة عقد (راجع "مزيد من الأمثلة").
هذه الخاصيه للقراؤه فقط.
تلميح: استخدم خاصية element .childNodes لإرجاع أي عقدة فرعية لعقدة محددة. سينتج childNodes [0] نفس النتيجة مثل firstChild.
تلميح: لإرجاع العقدة الفرعية الأخيرة للعقدة المحددة ، استخدم الخاصية lastChild .
دعم المتصفح
Property | |||||
---|---|---|---|---|---|
firstChild | Yes | Yes | Yes | Yes | Yes |
بناء الجملة
node.firstChild
تفاصيل تقنية
قيمة الإرجاع: | كائن عقدة ، يمثل الطفل الأول للعقدة ، أو فارغ إذا لم تكن هناك عقد فرعية |
---|---|
إصدار DOM | كائن عقدة المستوى 1 الأساسي |
مزيد من الأمثلة
مثال
في هذا المثال ، نوضح كيف يمكن للمسافة البيضاء أن تتداخل مع هذه الخاصية.
احصل على اسم العقدة للعقدة الفرعية الأولى لعنصر <div>:
<!--
Whitespace inside elements is considered as text, and text is considered as nodes
In this example, there is whitespace before <p>, before <span> and after <span>
Therefore, the first child node of <div> is a #text node, and not the <p> element you expected
-->
<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>
مثال
ومع ذلك ، إذا أزلنا المسافة البيضاء من المصدر ، فلا يوجد #text nodes في <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>
مثال
احصل على نص العقدة الفرعية الأولى لعنصر <select>:
var x = document.getElementById("mySelect").firstChild.text;
الصفحات ذات الصلة
مرجع DOM HTML: العقدة. lastChild ممتلكات
مرجع DOM HTML: العقدة. خاصية childNodes
مرجع DOM HTML: العقدة. الخاصية parentNode
مرجع DOM HTML: العقدة. NextSibling الملكية
مرجع DOM HTML: العقدة. الممتلكات السابقة للأشقاء
مرجع DOM HTML: العقدة. خاصية nodeName