JavaScript HTML DOM ဒြပ်စင်များ (Nodes)
Nodes ထည့်ခြင်းနှင့် ဖယ်ရှားခြင်း (HTML Elements)
HTML Elements အသစ်များ (Nodes) ဖန်တီးခြင်း
HTML DOM တွင် ဒြပ်စင်အသစ်တစ်ခုထည့်ရန်၊ သင်သည် ဒြပ်စင် (ဒြပ်စင် Node) ကို ဦးစွာဖန်တီးရမည်ဖြစ်ပြီး ၎င်းကို ရှိပြီးသားဒြပ်စင်တစ်ခုသို့ ပေါင်းထည့်ရပါမည်။
ဥပမာ
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>
နမူနာရှင်းပြထားပါတယ်။
<p>
ဤကုဒ်သည် အစိတ်အပိုင်း အသစ်တစ်ခုကို ဖန်တီးသည် -
const para = document.createElement("p");
ဒြပ်စင် သို့ စာသားထည့်ရန် <p>
၊ သင်သည် ပထမဦးစွာ စာသား node တစ်ခုကို ဖန်တီးရပါမည်။ ဤကုဒ်သည် စာသား node တစ်ခုကို ဖန်တီးသည်-
const node = document.createTextNode("This is a new paragraph.");
<p>
ထို့နောက် အစိတ်အပိုင်း တွင် စာသား node ကို ပေါင်းထည့်ရပါမည် ။
para.appendChild(node);
နောက်ဆုံးတွင် သင်သည် ဒြပ်စင်အသစ်ကို လက်ရှိဒြပ်စင်တစ်ခုသို့ ပေါင်းထည့်ရပါမည်။
ဤကုဒ်သည် ရှိပြီးသားအရာတစ်ခုကို ရှာတွေ့သည်-
const element = document.getElementById("div1");
ဤကုဒ်သည် ဒြပ်စင်အသစ်ကို လက်ရှိဒြပ်စင်သို့ ပေါင်းထည့်သည်-
element.appendChild(para);
HTML Elements အသစ်များကို ဖန်တီးခြင်း - insertBefore()
ယခင် appendChild()
နမူနာရှိ နည်းလမ်းသည် မိဘ၏ နောက်ဆုံးကလေးအဖြစ် ဒြပ်စင်အသစ်ကို ပေါင်းထည့်ထားသည်။
မလိုချင်ရင် ဒီ insertBefore()
နည်းလမ်းကို သုံးနိုင်ပါတယ်။
ဥပမာ
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
ရှိပြီးသား HTML အစိတ်အပိုင်းများကို ဖယ်ရှားခြင်း
HTML အစိတ်အပိုင်းတစ်ခုကို ဖယ်ရှားရန် remove()
နည်းလမ်းကို အသုံးပြုပါ-
ဥပမာ
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1");
elmnt.remove();
</script>
နမူနာရှင်းပြထားပါတယ်။
HTML စာရွက်စာတမ်းတွင် <div>
ကလေး node နှစ်ခု (ဒြပ်စင်နှစ်ခုပါရှိသည် <p>
)
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
သင်ဖယ်ရှားလိုသော အစိတ်အပိုင်းကို ရှာပါ-
const elmnt = document.getElementById("p1");
ထို့နောက် ထိုဒြပ်စင်ပေါ်ရှိ remove() နည်းလမ်းကို လုပ်ဆောင်ပါ။
elmnt.remove();
နည်းလမ်းသည် ရှေး remove()
ဘရောက်ဆာများတွင် အလုပ်မလုပ်ပါ၊ ၎င်း
removeChild()
အစား အသုံးပြုနည်းအတွက် အောက်ပါ ဥပမာကို ကြည့်ပါ။
ကလေး Node ကိုဖယ်ရှားခြင်း။
နည်းလမ်းကို မပံ့ပိုးသောဘရောက်ဆာများအတွက် remove()
၊ အစိတ်အပိုင်းတစ်ခုကို ဖယ်ရှားရန် ပင်မနိတ်ကို သင်ရှာရပါမည်။
ဥပမာ
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>
နမူနာရှင်းပြထားပါတယ်။
ဤ HTML စာရွက်စာတမ်းတွင် <div>
ကလေး node နှစ်ခု (ဒြပ်စင်နှစ်ခုပါရှိသည် <p>
)
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
ဒြပ်စင်ကို ရှာ id="div1"
ပါ
const parent = document.getElementById("div1");
<p>
ဒြပ်စင်ကို ရှာ id="p1"
ပါ
const child = document.getElementById("p1");
ကလေးအား မိဘထံမှ ဖယ်ရှားပါ-
parent.removeChild(child);
ဤသည်မှာ ယေဘူယျဖြေရှင်းနည်းတစ်ခုဖြစ်သည်- သင်ဖယ်ရှားလိုသောကလေးကိုရှာပါ၊
parentNode
မိဘကိုရှာဖွေရန် ၎င်း၏ပိုင်ဆိုင်မှုကိုအသုံးပြုပါ-
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
HTML Elements များကို အစားထိုးခြင်း။
HTML DOM သို့ အစိတ်အပိုင်းတစ်ခုအား အစားထိုးရန် replaceChild()
နည်းလမ်းကို အသုံးပြုပါ-
ဥပမာ
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>