ဂျပန်စတား ဟောင်းပန်း ဒေါ်လုပ် ခြောက်လုံး
- ပြီးခဲ့သော စာရင်း အရေးပါသော စာရင်း
- DOM အဖွဲ့အစည်း ကြည့်ရှု နောက်ပိုင်း စာရင်း
通过 HTML DOM，您能够使用节点关系来导航节点树。
နောက်ပိုင်း စာရင်း
根据 W3C HTML DOM 标准，HTML 文档中的所有事物都是节点：
- အချင်း အချင်း စာတမ်း က စာတမ်း အပိုးဖော် ဖြစ်သည်
- အချင်း အချင်း အကိုးအချုပ် က အကိုးအချုပ် အပိုးဖော် ဖြစ်သည်
- HTML အကိုးအချုပ် အတွင်း အခွဲ က အခွဲ အပိုးဖော် ဖြစ်သည်
- အချင်း အချင်း အခွဲ က အခွဲ အပိုးဖော် ဖြစ်သည်
- အစီအစဉ် အချို့ က အစီအစဉ် အပိုးဖော် ဖြစ်သည်
HTML DOM ကို အသုံးပြုလျှင် အပိုးဖော် သုံးစွဲရာ အပိုးဖော် အချို့ ကို ဂျာနယ်သုံး ဖြင့် အားကစားနိုင်ပါသည်
အပိုးဖော် အချို့ ကို ဖွဲ့စည်းနိုင်ပြီး ပြင်လည်း အပိုးဖော် အချို့ ကို ပြင်ဆင် နှင့် လွတ်လပ်စေနိုင်ပါသည်
အပိုးဖော် အကြောင်းအရာ
အပိုးဖော် သုံးစွဲရာ အပိုးဖော် အချို့ ကြားတွင် အဆင်းအတန်း ဆိုင်သော အကြောင်းအရာ ဖြစ်သည်
- အကြောင်းအရာ အဖြစ် (အဖအိုး၊ အပိုးဖော် နှင့် အတူတူအဖအိုး) သုံးစွဲသည် ထို အကြောင်းအရာများ ကို ဖော်ပြသည်
- အပိုးဖော် သုံးစွဲရာ အပေါ်အဖအိုး ကို ပေါ်တိုက် ဟု ခေါ်သည်
- အပိုးဖော် က အဖအိုး ကို ရရှိသည် ရှိသော်လည်း အပေါ်အဖအိုး မရှိသေးသော ပါတီဂိုဏ်း ကို အဖအိုး မရှိပေ။
- အပိုးဖော် က တစ်ခုချင်းချင်း အဖအိုး ကို ရရှိနိုင်ပါသည်
- အတူတူအဖအိုး ဟူသည် အတူတူ အဖအိုး သို့မဟုတ် အမျက်တူ အဖအိုး ကို လျှောက်ထားသော အပိုးဖော်ကို လျှို့ဝှက်သည်
<html>
<head>
<title>DOM အစီအစဉ်</title>
</head>
<body>
<h1>DOM ပထမဆုံး အကြိမ်</h1>
<p>ဟော်လာ နိုင်ငံခြား!</p>
</body>
</html>
အရင်းအမြစ် HTML မှ မိမိ ကို ထင်တယ်လာကြားသော သတင်းများကို ကြည့်တွေ့နိုင်ပါသည်
- ဟော်လာ က ပါတီဂိုဏ်း ပေါ်တိုက် ဖြစ်သည်
- ဟော်လာ က အဖအိုး မရှိပေ။
- ဟော်လာ က ပါတီဂိုဏ်း နှင့် အုပ်ခုံ ကို အဖအိုးဖြစ်သည်
- ပါတီဂိုဏ်း က ဟော်လာ ကို ပါတီဂိုဏ်း အဖြစ် အပိုးဖော်သည်
- <body> တွင် <html> အပိုင်းစား နောက်ဆုံး ဖြစ်
တွင်ပါ
- <head> တွင် အပိုင်းစား တစ်ခု ရှိ: <title>
- <title> တွင် အပိုင်းစား တစ်ခု ရှိ（စကားလုံး ပုံစံ）: "DOM ပြည့်ပြည့်ပြည့်"
- <body> တွင် အပိုင်းစား နှစ်ခု ရှိ: <h1> နှင့် <p>
- <h1> တွင် အပိုင်းစား တစ်ခု ရှိ: "DOM ပထမဆုံး သုံးပုံစံ"
- <p> တွင် အပိုင်းစား တစ်ခု ရှိ: "Hello world!"
- <h1> နှင့် <p> တူညီ
အရာတွဲအကြား သွားလာ
JavaScript ဖြင့် အရာတွဲအကြား သွားလာ ရန် အခြေခံ ဗီရိုက် အခြေခံ ကို အသုံးပြု
- parentNode
- childNodes[nodenumber]
- firstChild
- lastChild
- nextSibling
- previousSibling
အရာတွဲ အပြင်းအထန်
DOM ဖွင့်ပြခြင်း တွင် အရာတွဲ ပုံစံများ တွင် စကားလုံး ကို ပါဝင်သည် ဟု ယူဆခြင်း သည် ပုံစံ တစ်ခု ဖြစ်
အမှတ်မှတ်
<title id="demo">DOM ပြည့်ပြည့်ပြည့်</title>
（အထူးအမှတ် ပုံစံတွင်）အရာတွဲ ပုံစံ <title> မပါဝင်စကားလုံး。
အရာတွဲများ ကို ပါဝင်စကားလုံး ပုံစံ。
ဗီရိုက် အခြေခံ ကို သတ်မှတ် innerHTML ဗီရိုက် အခြေခံ ကို သတ်မှတ်
var myTitle = document.getElementById("demo").innerHTML;
innerHTML ဗီရိုက် အခြေခံ ကို ပထမပုံစံ ပုံစံ သတ်မှတ် nodeValue：
var myTitle = document.getElementById("demo").firstChild.nodeValue;
လည်း ပထမပုံစံ ဖြင့် သတ်မှတ်နိုင်
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
အောက်ပါ သုံးပုံစံ တွင် နိုင် <h1> အရာတွဲ၏ စကားလုံးကို ကူးယူသွင်း <p> အရာတွဲများတွင်：
အမှတ် 1
<html>
<body>
<h1 id="id01">ကျော်ကြီးပုံစံ ပထမ</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>
</body>
</html>
အမှတ် 2
<html>
<body>
<h1 id="id01">ကျော်ကြီးပုံစံ ပထမ</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
အမှတ် 3
<html>
<body>
<h1 id="id01">ကျော်ကြီးပုံစံ ပထမ</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
InnerHTML
အချိန်ပြီး ကျမ်းများတွင် innerHTML ပုံစံအချက်အလက် ကို ဝင်ရောက်သွားသည်。
သို့သော်လည်း，အခြား ပုံစံအချက်အလက် ကို လေ့လာရှုသည် ကင်းပါးသည်
DOM အချက်အလက်
နှစ်ခုသော အချက်အလက် ကို ဝင်ရောက်သွားသည်
- document.body - အချက်အလက်
- document.documentElement - ပုံစံအချက်အလက်
အမှတ်
<html> <body> <p>Hello World!</p> <div> <p>DOM ကင်းပါးသည်！</p> <p>အမှတ်သုံး ကျော်စေးသူမှူးပုံ <b>document.body</b> ပုံစံအချက်အလက်</p> </div> <script> alert(document.body.innerHTML); </script> </body> </html>
အမှတ်
<html> <body> <p>Hello World!</p> <div> <p>DOM ကင်းပါးသည်！</p> <p>အမှတ်သုံး ကျော်စေးသူမှူးပုံ <b>document.documentElement</b> ပုံစံအချက်အလက်</p> </div> <script> alert(document.documentElement.innerHTML); </script> </body> </html>
nodeName ပုံစံအချက်အလက်
nodeName ပုံစံအချက်အလက် ကို ပုံနှိပ်သည်。
- nodeName ကင်းပါးသည်
- အစီအစဉ် ပုံစံအချက်အလက် ကို အမည် အမြင့်တက်သော အမည် အမြင့်တက်သည်
- ပုံစံအချက်အလက် ပုံစံအချက်အလက် ကို ပုံစံအချက်အလက် အမည် ဖြစ်သည်
- စကားလုံး ပုံစံအချက်အလက် ကို #text ပုံနှိပ်သည်。
- ဆိုင်းဆိုချက် ပုံစံအချက်အလက် ကို #document ပုံနှိပ်သည်。
အမှတ်
<h1 id="id01">ကျော်စေးသူမှူးပုံ</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>
အကြောင်းကြားချက်nodeName ကင်းပါးသည် HTML အစီအစဉ်ကို အမြင့်တက်သော အမည် ပါဝင်သည်。
nodeValue ပုံစံအချက်အလက်
nodeValue ပုံစံအချက်အလက် ကို ပုံနှိပ်သည်。
- အစီအစဉ် ပုံစံအချက်အလက် ကို undefined ပုံနှိပ်သည်。
- စကားလုံး ပုံစံအချက်အလက် ကို စကားလုံး ပုံနှိပ်သည်。
- ပုံစံအချက်အလက် ကို ပုံစံအချက်အလက် ကို ပုံနှိပ်သည်。
nodeType ပုံစံအချက်အလက်
nodeType ပုံစံအချက်အလက် ကို ပုံနှိပ်သည်。nodeType နှုတ်ချခြင်းသည်း
အမှတ်
<h1 id="id01">ကျော်စေးသူမှူးပုံ</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>
အရေးပါသော nodeType အကို
| အကို | အမျိုးအစား | အကြောင်းကျည်း |
|---|---|---|
| ELEMENT_NODE | 1 | <h1 class="heading">W3School</h1> |
| ATTRIBUTE_NODE | 2 | class = "heading" (အလွဲသုံးခဲ့သည်) |
| TEXT_NODE | 3 | W3School |
| COMMENT_NODE | 8 | <!-- သတင်းကျည်း --> |
| DOCUMENT_NODE | 9 | HTML ကျမ်းမျက်နှာကိုယ် (html အဖြစ်) |
| DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
Type 2 သည် HTML DOM တွင် အလွဲသုံးခဲ့သည်။ XML DOM တွင် အလွဲသုံးခဲ့သည်။
- ပြီးခဲ့သော စာရင်း အရေးပါသော စာရင်း
- DOM အဖွဲ့အစည်း ကြည့်ရှု နောက်ပိုင်း စာရင်း
