JavaScript HTML DOM - HTML ကိုပြောင်းခြင်း။
HTML DOM သည် JavaScript ကို HTML ဒြပ်စင်များ၏အကြောင်းအရာကိုပြောင်းလဲရန်ခွင့်ပြုသည်။
HTML အကြောင်းအရာကို ပြောင်းလဲခြင်း။
HTML ဒြပ်စင်တစ်ခု၏ အကြောင်းအရာကို မွမ်းမံရန် အလွယ်ဆုံးနည်းလမ်းမှာ innerHTML
ပိုင်ဆိုင်မှုကို အသုံးပြုခြင်းဖြစ်သည်။
HTML ဒြပ်စင်တစ်ခု၏ အကြောင်းအရာကို ပြောင်းလဲရန်၊ ဤ syntax ကို အသုံးပြုပါ-
document.getElementById(id).innerHTML = new HTML
ဤဥပမာသည် ဒြပ်စင်တစ်ခု၏ အကြောင်းအရာကို ပြောင်းလဲစေသည် <p>
-
ဥပမာ
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
ဥပမာ ရှင်းပြထားသည်-
- အထက်ဖော်ပြပါ HTML စာရွက်စာတမ်းတွင်
<p>
ဒြပ်စင်တစ်ခု ပါရှိသည်။id="p1"
- ဒြပ်စင်ကိုရယူရန် ကျွန်ုပ်တို့သည် HTML DOM ကို အသုံးပြုသည်။
id="p1"
- JavaScript
innerHTML
သည် ထိုဒြပ်စင်၏ အကြောင်းအရာ ( ) ကို "စာသားအသစ်!"
<h1>
ဤဥပမာသည် အစိတ်အပိုင်းတစ်ခု၏ အကြောင်းအရာကို ပြောင်းလဲစေသည် -
ဥပမာ
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
ဥပမာ ရှင်းပြထားသည်-
- အထက်ဖော်ပြပါ HTML စာရွက်စာတမ်းတွင်
<h1>
ဒြပ်စင်တစ်ခု ပါရှိသည်။id="id01"
- ဒြပ်စင်ကိုရယူရန် ကျွန်ုပ်တို့သည် HTML DOM ကို အသုံးပြုသည်။
id="id01"
- JavaScript
innerHTML
သည် ထိုဒြပ်စင်၏ အကြောင်းအရာ ( ) ကို "ခေါင်းစီးအသစ်" သို့ ပြောင်းသည်
Attribute တစ်ခု၏တန်ဖိုးကိုပြောင်းလဲခြင်း။
HTML ရည်ညွှန်းချက်တစ်ခု၏တန်ဖိုးကိုပြောင်းလဲရန်၊ ဤ syntax ကိုအသုံးပြုပါ-
document.getElementById(id).attribute = new value
ဤဥပမာသည် ဒြပ်စင်တစ်ခု၏ src attribute ၏တန်ဖိုးကို ပြောင်းလဲသည် <img>
-
ဥပမာ
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
ဥပမာ ရှင်းပြထားသည်-
- အထက်ဖော်ပြပါ HTML စာရွက်စာတမ်းတွင်
<img>
ဒြပ်စင်တစ်ခု ပါရှိသည်။id="myImage"
- ဒြပ်စင်ကိုရယူရန် ကျွန်ုပ်တို့သည် HTML DOM ကို အသုံးပြုသည်။
id="myImage"
- JavaScript
src
သည် ထိုဒြပ်စင်၏ အရည်အချင်းကို "smiley.gif" မှ "landscape.jpg" သို့ ပြောင်းသည်
Dynamic HTML အကြောင်းအရာ
JavaScript သည် ပြောင်းလဲနေသော HTML အကြောင်းအရာကို ဖန်တီးနိုင်သည်-
ရက်စွဲ : စနေ ဇန်နဝါရီ 29 2022 21:37:36 GMT+0000 (ညှိနှိုင်းထားသော Universal အချိန်)
ဥပမာ
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
document.write()
JavaScript တွင် document.write()
HTML output stream သို့ တိုက်ရိုက်ရေးရန် အသုံးပြုနိုင်သည်။
ဥပမာ
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
document.write()
စာရွက်စာတမ်းကို တင်ပြီးနောက် မည်သည့် အခါမျှ မသုံး ပါနှင့်။ ၎င်းသည် စာရွက်စာတမ်းကို overwrite လုပ်လိမ့်မည်။