JavaScript HTML DOM လမ်းညွှန်
HTML DOM ဖြင့်၊ node ဆက်ဆံရေးများကို အသုံးပြု၍ node tree ကို လမ်းညွှန်နိုင်ပါသည်။
DOM Nodes
W3C HTML DOM စံနှုန်းအရ၊ HTML document တစ်ခုရှိ အရာအားလုံးသည် node တစ်ခုဖြစ်သည်။
- စာရွက်စာတမ်းတစ်ခုလုံးသည် document node တစ်ခုဖြစ်သည်။
- HTML element တိုင်းသည် element node တစ်ခုဖြစ်သည်။
- HTML ဒြပ်စင်များအတွင်းရှိ စာသားများသည် စာသားဆုံမှတ်များဖြစ်သည်။
- HTML ရည်ညွှန်းချက်တိုင်းသည် attribute node (ကန့်ကွက်ထားသည်)
- မှတ်ချက်အားလုံးသည် မှတ်ချက်များဖြစ်သည်။
HTML DOM ဖြင့်၊ node tree ရှိ node အားလုံးကို JavaScript ဖြင့် ဝင်ရောက်ကြည့်ရှုနိုင်ပါသည်။
node အသစ်များကို ဖန်တီးနိုင်ပြီး node အားလုံးကို ပြုပြင်နိုင်သည် သို့မဟုတ် ဖျက်နိုင်သည်။
Node ဆက်ဆံရေး
node tree ရှိ node များသည် တစ်ခုနှင့်တစ်ခု အထက်အောက် ဆက်စပ်မှုရှိသည်။
မိဘ၊ သားသမီး၊ နှင့် မွေးချင်းဆိုင်ရာ ဆက်ဆံရေးများကို ဖော်ပြရန်အတွက် အသုံးပြုသည့် ဝေါဟာရများ။
- node tree တွင်၊ top node ကို root (သို့မဟုတ် root node) ဟုခေါ်သည်။
- Node တိုင်းတွင် root (မိဘမရှိသော) မှတပါး၊
- node တစ်ခုတွင် ကလေးများစွာ ရှိနိုင်ပါသည်။
- မွေးချင်းများ (ညီအကိုမောင်နှမများ) သည် တူညီသောမိဘနှင့်အတူ ဆုံမှတ်များဖြစ်သည်။
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
အထက်ပါ HTML မှ သင်ဖတ်နိုင်သည်-
<html>root node ပါ။<html>မိဘ မရှိပါ။<html><head>နှင့် မိဘဖြစ်၏<body><head>၏ပထမဆုံးသောကလေးဖြစ်သည်။<html><body>၏နောက်ဆုံးကလေးဖြစ်သည်။<html>
နှင့်-
<head>ကလေးတစ်ယောက်ရှိတယ်<title><title>ကလေးတစ်ယောက် (စာသား node) ရှိသည်- "DOM Tutorial"<body>ကလေးနှစ်ယောက်ရှိသည်<h1>။<p><h1>ကလေးတစ်ယောက်ရှိတယ်- "DOM Lesson one"<p>ကလေးတစ်ယောက်ရှိတယ်- "Hello world!"<h1>မောင်နှမများ<p>ဖြစ်ကြသည်
Nodes များအကြား သွားလာခြင်း။
JavaScript ဖြင့် node များကြားတွင် သွားလာရန် အောက်ပါ node ဂုဏ်သတ္တိများကို သင်အသုံးပြုနိုင်သည်-
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
ကလေး Node နှင့် Node တန်ဖိုးများ
DOM လုပ်ဆောင်ခြင်းတွင် ဘုံအမှားတစ်ခုသည် စာသားပါရှိသော ဒြပ်စင် Node တစ်ခုကို မျှော်လင့်ရန်ဖြစ်သည်။
ဥပမာ-
<title
id="demo">DOM Tutorial</title>
element node
<title>(အထက်ဥပမာတွင်) တွင်စာသား မ ပါဝင်ပါ။
၎င်းတွင် "DOM ကျူတိုရီရယ်" တန်ဖိုးရှိသော စာသား node တစ်ခု ပါရှိသည်။
စာသား node ၏တန်ဖိုးကို node ၏
innerHTMLပိုင်ဆိုင်မှုအားဖြင့်ဝင်ရောက်ကြည့်ရှုနိုင်သည်-
myTitle = document.getElementById("demo").innerHTML;
အတွင်း HTML ပိုင်ဆိုင်မှုကို ဝင်ရောက်ခြင်းသည် nodeValue
ပထမကလေး၏ ဝင်ရောက်ခြင်းနှင့် အတူတူပင်ဖြစ်သည်
myTitle = document.getElementById("demo").firstChild.nodeValue;
ပထမကလေးအား ဝင်ရောက်ကြည့်ရှုရာတွင်လည်း ဤကဲ့သို့ လုပ်ဆောင်နိုင်သည်-
myTitle = document.getElementById("demo").childNodes[0].nodeValue;
အောက်ပါဥပမာ (၃) ခုစလုံးသည် ဒြပ်စင်တစ်ခု၏ စာသားကို ပြန်လည်ရယူပြီး <h1>၎င်းကို ဒြပ်စင်တစ်ခုအဖြစ် ကူးယူသည် <p>-
ဥပမာ
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").innerHTML;
</script>
</body>
</html>
ဥပမာ
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
ဥပမာ
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
အတွင်း HTML
ဤသင်ခန်းစာတွင် HTML အစိတ်အပိုင်းတစ်ခု၏ အကြောင်းအရာကို ပြန်လည်ရယူရန် အတွင်း HTML ပိုင်ဆိုင်မှုကို ကျွန်ုပ်တို့ အသုံးပြုပါသည်။
သို့သော်၊ အထက်ဖော်ပြပါ အခြားနည်းလမ်းများကို လေ့လာခြင်းသည် သစ်ပင်ဖွဲ့စည်းပုံနှင့် DOM ၏လမ်းညွှန်မှုကို နားလည်ရန်အတွက် အသုံးဝင်သည်။
DOM Root Nodes
စာရွက်စာတမ်းအပြည့်အစုံကို ဝင်ရောက်ကြည့်ရှုခွင့်ပေးသည့် အထူးဂုဏ်သတ္တိနှစ်ခုရှိသည်-
document.body- စာရွက်စာတမ်း၏ကိုယ်ထည်document.documentElement- စာရွက်စာတမ်းအပြည့်အစုံ
ဥပမာ
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p
id="demo"></p>
<script>
document.getElementById("demo").innerHTML
= document.body.innerHTML;
</script>
</body>
</html>
ဥပမာ
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
document.documentElement.innerHTML;
</script>
</body>
</html>
nodeName Property
ပိုင်ဆိုင်မှု သည် nodeNamenode တစ်ခု၏အမည်ကို သတ်မှတ်ပေးသည်။
- nodeName သည် ဖတ်ရန်သာဖြစ်သည်။
- ဒြပ်စင်တစ်ခု၏ nodeName သည် tag အမည်နှင့် တူညီသည်။
- nodeName သည် attribute node တစ်ခု၏ attribute အမည်ဖြစ်သည်။
- စာသား node တစ်ခု၏ node အမည်သည် အမြဲတမ်း #text ဖြစ်သည်။
- nodeName သည် document node ၏ အမြဲတမ်း #document ဖြစ်သည်။
ဥပမာ
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeName;
</script>
မှတ်ချက်- nodeName HTML ဒြပ်စင်တစ်ခု၏ စာလုံးအကြီးအမည် အမြဲပါရှိသည်။
nodeValue ပိုင်ဆိုင်မှု
ပိုင်ဆိုင်မှုသည် node တစ်ခု၏ nodeValueတန်ဖိုးကို သတ်မှတ်သည်။
- nodeValue သည် element node များအတွက်ဖြစ်သည်။
null - nodeValue သည် text node အတွက် စာသားကိုယ်တိုင်ဖြစ်သည်။
- nodeValue သည် attribute nodes အတွက် attribute value ဖြစ်သည်။
nodeType Property
nodeTypeပိုင်ဆိုင်မှုသည် ဖတ်ရန်သာဖြစ်သည် ။ ၎င်းသည် node အမျိုးအစားကို ပြန်ပေးသည်။
ဥပမာ
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeType;
</script>
အရေးကြီးဆုံး nodeType ဂုဏ်သတ္တိများမှာ-
| Node | Type | Example |
|---|---|---|
| ELEMENT_NODE | 1 | <h1 class="heading">W3Schools</h1> |
| ATTRIBUTE_NODE | 2 | class = "heading" (deprecated) |
| TEXT_NODE | 3 | W3Schools |
| COMMENT_NODE | 8 | <!-- This is a comment --> |
| DOCUMENT_NODE | 9 | The HTML document itself (the parent of <html>) |
| DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
အမျိုးအစား 2 ကို HTML DOM တွင် ငြင်းပယ်ထားသည် (သို့သော် အလုပ်လုပ်သည်)။ ၎င်းကို XML DOM တွင် ငြင်းပယ်ထားခြင်းမရှိပါ။