HTML DOM ၏ ပထမကလေး ပိုင်ဆိုင်မှု
ဥပမာ
<ul> ဒြပ်စင်တစ်ခု၏ ပထမကလေး node ၏ HTML အကြောင်းအရာကို ရယူပါ-
var x = document.getElementById("myList").firstChild.innerHTML;
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
firstChild property သည် Node object တစ်ခုအနေဖြင့် သတ်မှတ်ထားသော node ၏ ပထမကလေး node ကို ပြန်ပေးသည်။
ဤပိုင်ဆိုင်မှုနှင့် firstElementChild အကြားခြားနားချက် မှာ firstChild သည် ပထမကလေး node အား ဒြပ်စင်အမှတ်အသားတစ်ခု၊ စာသား node သို့မဟုတ် မှတ်ချက် Node (မည်သူ၏ပထမဆုံးအရာပေါ်မူတည်၍) ကို firstElementChild မှ ပြန်ပေးမည်ဖြစ်ပြီး၊ firstElementChild သည် ပထမကလေး node ကို element node အဖြစ်ပြန်ပေးသည် (စာသားကို လျစ်လျူရှုထားသည် နှင့် comment node များ)။
မှတ်ချက်- ဒြပ်စင်များအတွင်း Whitespace ကို စာသားအဖြစ် သတ်မှတ်ပြီး စာသားကို nodes အဖြစ် သတ်မှတ်သည် ("နောက်ထပ် ဥပမာများကို ကြည့်ပါ")။
ဤပိုင်ဆိုင်မှုသည် ဖတ်ရန်သာဖြစ်သည်။
အကြံပြုချက်- သတ်မှတ်ထားသော node တစ်ခု၏ မည်သည့် ကလေး node ကိုမဆို ပြန်ပေးရန် အတွက် element .childNodes ပိုင်ဆိုင်မှုကို အသုံးပြုပါ။ childNodes[0] သည် firstChild နှင့်တူညီသောရလဒ်ကိုထုတ်ပေးလိမ့်မည်။
အကြံပြုချက်- သတ်မှတ်ထားသော node တစ်ခု၏ နောက်ဆုံးကလေး node ကို ပြန်ပေးရန်၊ LastChild ပိုင်ဆိုင်မှုကို အသုံးပြုပါ။
Browser ပံ့ပိုးမှု
| Property | |||||
|---|---|---|---|---|---|
| firstChild | Yes | Yes | Yes | Yes | Yes |
အထားအသို
node.firstChild
နည်းပညာဆိုင်ရာအသေးစိတ်
| ပြန်ပို့တန်ဖိုး- | Node အရာဝတ္ထုတစ်ခု၊ node တစ်ခု၏ ပထမကလေးအား ကိုယ်စားပြုသော သို့မဟုတ် ကလေး node မရှိပါက null |
|---|---|
| DOM ဗားရှင်း | Core Level 1 Node Object |
နောက်ထပ် ဥပမာများ
ဥပမာ
ဤဥပမာတွင်၊ whitespace သည် ဤပိုင်ဆိုင်မှုကို မည်ကဲ့သို့ အနှောင့်အယှက်ပေးနိုင်သည်ကို သရုပ်ပြပါသည်။
<div> ဒြပ်စင်တစ်ခု၏ ပထမကလေး node ၏ node အမည်ကို ရယူပါ-
<!--
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>
ဥပမာ
သို့သော်လည်း၊ ကျွန်ုပ်တို့သည် အရင်းအမြစ်မှ နေရာလွတ်ကို ဖယ်ရှားပါက၊ <div> တွင် #text node များ မရှိတော့ပါ၊၊ ၎င်းသည် <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;
ဆက်စပ်စာမျက်နှာများ
HTML DOM ရည်ညွှန်းချက်- node နောက်ဆုံးကလေးအိမ်ခြံမြေ
HTML DOM ရည်ညွှန်းချက်- node childNodes ပိုင်ဆိုင်မှု
HTML DOM ရည်ညွှန်းချက်- node parentNode ပိုင်ဆိုင်မှု
HTML DOM ရည်ညွှန်းချက်- node နောက်တစ်ခုက မွေးချင်းအိမ်ခြံမြေ
HTML DOM ရည်ညွှန်းချက်- node ယခင်ညီအကိုအိမ်ခြံမြေ
HTML DOM ရည်ညွှန်းချက်- node nodeName Property