HTML DOM textContent Property
ဥပမာ
အစိတ်အပိုင်းတစ်ခု၏ စာသားအကြောင်းအရာကို ရယူပါ-
var x =
document.getElementById("myBtn").textContent;
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
textContent ပိုင်ဆိုင်မှုသည် သတ်မှတ်ထားသော node ၏ စာသားအကြောင်းအရာ နှင့် ၎င်း၏သားစဉ်မြေးဆက်အားလုံးကို သတ်မှတ်ပေးသည် သို့မဟုတ် ပြန်ပေးသည် ။
သင်သည် textContent ပိုင်ဆိုင်မှုကို သတ်မှတ်ပါ က၊ မည်သည့် ကလေး node များကိုမဆို ဖယ်ရှားပြီး သတ်မှတ်ထားသော စာကြောင်းပါရှိသော Text node တစ်ခုတည်းဖြင့် အစားထိုးပါသည်။
မှတ်ချက်- ဤပိုင်ဆိုင်မှုသည် အတွင်း စာသား ပိုင်ဆိုင်မှု နှင့် ဆင်တူသော်လည်း ကွဲလွဲချက်အချို့ရှိပါသည်-
- textContent သည် <script> နှင့် <style> ဒြပ်စင်များ မှလွဲ၍ innerText မှဒြပ်စင် အားလုံး၏ အကြောင်းအရာကို ပြန်ပေးသော်လည်း အတွင်းစာသားသည် ဒြပ်စင် အားလုံး၏ စာသားအကြောင်းအရာကို ပြန်ပေးသည်။
- အတွင်းစာသားသည် CSS ဖြင့် ဝှက်ထားသော အစိတ်အပိုင်းများ၏ စာသားကို ပြန်ပေးမည်မဟုတ်ပါ (စာသားအကြောင်းအရာဖြစ်လိမ့်မည်)။
အကြံပြုချက်- တစ်ခါတစ်ရံတွင် ဤပိုင်ဆိုင်မှုကို nodeValue ပိုင်ဆိုင်မှု အစား အသုံးပြုနိုင် သော်လည်း ဤပိုင်ဆိုင်မှုသည် ကလေး node အားလုံး၏ စာသားကိုလည်း ပြန်ပေးကြောင်း သတိရပါ။
အကြံပြုချက်- ဒြပ်စင်တစ်ခု၏ HTML အကြောင်းအရာကို သတ်မှတ်ရန် သို့မဟုတ် ပြန်ပေးရန်၊ အတွင်း HTML ပိုင်ဆိုင်မှုကို အသုံးပြု ပါ ။
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
textContent | 1.0 | 9.0 | Yes | Yes | Yes |
အထားအသို
node တစ်ခု၏ စာသားအကြောင်းအရာကို ပြန်ပေးသည်-
node.textContent
node တစ်ခု၏ စာသားအကြောင်းအရာကို သတ်မှတ်ပါ-
node.textContent = text
အိမ်ခြံမြေတန်ဖိုးများ
Value | Type | Description |
---|---|---|
text | String | Specifies the text content of the specified node |
နည်းပညာဆိုင်ရာအသေးစိတ်
ပြန်ပို့တန်ဖိုး- | node ၏စာသားနှင့် ၎င်း၏သားစဉ်မြေးဆက်အားလုံးကို ကိုယ်စားပြုသော စာကြောင်းတစ်ခု။ ဒြပ်စင်သည် စာရွက်စာတမ်း၊ စာရွက်စာတမ်းအမျိုးအစား သို့မဟုတ် အမှတ်အသားဖြစ်လျှင် null ပြန်ပေးသည်။ |
---|---|
DOM ဗားရှင်း | Core Level 3 Node Object |
နောက်ထပ် ဥပမာများ
ဥပမာ
id="demo" ဖြင့် <p> ဒြပ်စင်တစ်ခု၏ စာသားအကြောင်းအရာကို ပြောင်းပါ-
document.getElementById("demo").textContent = "Paragraph changed!";
ဥပမာ
id="myList" ဖြင့် <ul> ဒြပ်စင်တစ်ခု၏ စာသားအကြောင်းအရာအားလုံးကို ရယူပါ-
var x = document.getElementById("myList").textContent;
x ၏တန်ဖိုးသည် -
Coffee Tea
ဥပမာ
ဤဥပမာသည် အတွင်းစာသား၊ innerHTML နှင့် textContent အကြား ခြားနားချက်အချို့ကို သရုပ်ပြသည်-
<p id="demo"> This element has extra spacing and contains <span>a span
element</span>.</p>
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText)
}
function getHTML()
{
alert(document.getElementById("demo").innerHTML)
}
function
getTextContent() {
alert(document.getElementById("demo").textContent)
}
</script>
သတ်မှတ်ထားသော ဂုဏ်သတ္တိများဖြင့် အထက်ဖော်ပြပါ <p> ဒြပ်စင်၏ အကြောင်းအရာကို ရယူပါ-
အတွင်းစာသားကို ပြန်ပို့သည်- "ဤဒြပ်စင်တွင် အကွာအဝေးပိုရှိပြီး အပိုင်းတစ်ခုပါရှိသည်။"
innerHTML မှ ပြန်ပို့သည်- "ဤဒြပ်စင်တွင် အကွာအဝေးပိုရှိပြီး <span>အပိုင်းတစ်ခု</span> ပါဝင်ပါသည်။
textContent မှ ပြန်ပို့သည်- "ဤဒြပ်စင်တွင် အကွာအဝေးပိုရှိပြီး အပိုင်းတစ်ခုပါရှိသည်။"
အတွင်းစာသားပိုင်ဆိုင်မှုသည် အကွာအဝေးနှင့် အတွင်းဒြပ်တဂ်များမပါဘဲ စာသားကိုသာ ပြန်ပေးသည်။
အတွင်း HTML ပိုင်ဆိုင်မှုသည် အကွာအဝေးနှင့် အတွင်းဒြပ်တဂ်များအပါအဝင် စာသားကို ပြန်ပေးသည်။
textContent ပိုင်ဆိုင်မှုသည် စာသားကို အကွာအဝေးဖြင့် ပြန်ပေးသည်၊ သို့သော် အတွင်းဒြပ်စင်များ တဂ်များမပါဝင်ပါ။