Node: appendChild() method

DOM API

web developer တော်တော်များများက အထူးသဖြင့် frontend developer တွေပေါ့ နေ့စဉ်နဲ့အမျှ DOM API တွေကို ထိတွေ့နေကြရတယ်appendChild method ကို သုံးဖူးကြမှာပါ

<div id="content"></div>
<script>
    const content = document.getElementById("content");
    const h1=document.createElement("h1");
    h1.textContent="Title h1";
    content.appendChild(h1);
</script>

အထက်က code ပုံစံမျိုး မကြာခဏသုံးဖူးကြလိမ့်မယ်ဒီလိုပဲ child ထပ်ထည့်ချင်လို့ သုံးတယ်ဒီလောက်ပဲ မှတ်လိုက်ကြတယ်မှားတော့မမှားဘူး ဒါပေမယ့် မှန်လားဆိုတော့လည်း အကုန်မမှန်ဘူးဘာကြောင့်လဲဆိုတော့သုံးသာသုံးနေတာ သူ့ရဲ့ semantics က ဘာလဲဆိုတာကို သေချာ မသိလို့ဘာတွေလာရောင်းနေတာလဲပေါ့ဆက်ကြည့်ရအောင်

<body>
<div id="content">
<h1>Title h1</h1>
</div>
<script>
    const copied = document.createElement('div');
    document.body.appendChild(copied);
    const content = document.getElementById("content");
    while(content.childNodes.length > 0){
        copied.appendChild(content.childNodes[0]);
    }
</script>
</body>

အထက်က code ကို run လိုက်ရင် Title h1 ဘယ်နှစ်ခါပေါ်မယ်လို့ထင်လဲerror တက်လောက်လား မတက်လောက်ဘူးလားတက်ရင်ရော ဘာ error တက်မလဲ မတက်ဘူးဆိုရင်ရောဘာလို့မတက်သလဲပေါ့ နည်းနည်းလေး ခေါင်းထဲမှာ အရင် run ကြည့်ပေါ့အဖြေကတော့ Title h1 တစ်ခါပဲ ပေါ်မယ် error မတက်ပါဘူးဒါဆို looping ပတ်တာ while ကြီးနဲ့ infinite loop ကြီးဖြစ်မနေဘူးလားပေါ့ increment/decrement လည်း ဘာမှမပါဘူးပေါ့မဖြစ်ပါဘူး အဓိကကတော့ appendChild ရဲ့ semantics ကြောင့်ပါappendChild သာမဟုတ်ဘဲ

while(content.childNodes.length > 0){
    console.log(content.childNodes[0]);
}

သာမာန်တိုင်း log ထုတ်ကြည့်ရင်တော့ infinite loop ဖြစ်နေမှာပါappendChild ရဲ့ semantics က ဘာလဲဆိုတော့document fragment ဆိုရင် target node ရဲ့ children ထဲကို နောက်ဆုံးကနေ ထည့်သွားမယ်document fragment ဆိုတာ ဘာလဲဆိုတော့ parent မရှိသေးသော document ထဲမှာရှိမနေသော document object တစ်ခုဖြစ်တယ်document ထဲမှာ ရှိနေပြီးသား node ဆိုရင်တော့ နဂိုရှိနေတဲ့ position ကနေ နောက် position တစ်ခုကို move လုပ်ပစ်လိုက်တယ်နားလည်အောင်ပြောရရင် parent reference ပြောင်းသွားတာပါပဲ ပိုရှုပ်သွားလားတော့မသိဘူး ရှုပ်တယ်ဆိုရင်တော့ javascript ပြန်သင်ပဲ ပြောရတော့မှာ

const parentNode1 = { tagName:"DIV" }
const parentNode2 = { tagName:"P" }
const childNode = { tagName:"H1" }
// existing
childNode.parentNode = parentNode1
// move
childNode.parentNode = parentNode2

ဒီသဘောကိုပြောတာ ဒီလိုလေးတင်တော့မဟုတ်ဘူးပေါ့under the hood ကတော့ ဒီထက်ပိုရှုပ်မှာပေါ့

move လုပ်ပြီဆိုတာနဲ့နဂိုparent ရဲ့ childNodes ကနေ remove လုပ်

သူ့ရဲ့ parentNode ကို null ထား

new parent ရဲ့ childNodes ထဲမှာထည့်သူရဲ့ parentNode ကို new parent နဲ့ update လုပ်

အဆင့်ဆင့်လုပ်ပြီး repaint and reflow လုပ်သွားတယ်

အဲ့လို move လုပ်တာဖြစ်လို့

while(content.childNodes.length > 0){
    copied.appendChild(content.childNodes[0]);
}

ဒီ code မှာ content.childNodes[0] ကို တစ်ခါ append လုပ်တိုင်းcontent.childNodes.length က လျော့လျော့သွားတယ်ပြောရရင် decrement ကပါတယ် ဒါကြောင့် infinite မဖြစ်သွားဘူးဒီလောက်ဆို appendChild သုံးတတ်ပါပြီ

PreviousDifferent approaches NextDate.prototype.toLocaleString()

Last updated 1 month ago