JavaScript HTML DOM စာရွက်စာတမ်း
HTML DOM စာရွက်စာတမ်းအရာဝတ္ထုသည် သင့်ဝဘ်စာမျက်နှာရှိ အခြားအရာဝတ္ထုအားလုံး၏ ပိုင်ရှင်ဖြစ်သည်။
HTML DOM Document Object
စာရွက်စာတမ်းအရာဝတ္ထုသည် သင့်ဝဘ်စာမျက်နှာကို ကိုယ်စားပြုသည်။
HTML စာမျက်နှာရှိ မည်သည့်ဒြပ်စင်ကိုမဆို ဝင်ရောက်အသုံးပြုလိုပါက၊ သင်သည် စာရွက်စာတမ်းအရာဝတ္တုကို အမြဲတမ်းဝင်ရောက်ခြင်းဖြင့် စတင်သည်။
အောက်ပါတို့သည် HTML ကိုဝင်ရောက်ရန်နှင့် ကိုင်တွယ်ရန် စာရွက်စာတမ်းအရာဝတ္တုကို သင်အသုံးပြုပုံအချို့ ဥပမာများဖြစ်သည်။
HTML Elements များကို ရှာဖွေခြင်း။
| Method | Description |
|---|---|
| document.getElementById(id) | Find an element by element id |
| document.getElementsByTagName(name) | Find elements by tag name |
| document.getElementsByClassName(name) | Find elements by class name |
HTML Elements များကို ပြောင်းလဲခြင်း။
| Property | Description |
|---|---|
| element.innerHTML = new html content | Change the inner HTML of an element |
| element.attribute = new value | Change the attribute value of an HTML element |
| element.style.property = new style | Change the style of an HTML element |
| Method | Description |
| element.setAttribute(attribute, value) | Change the attribute value of an HTML element |
ဒြပ်စင်များထည့်ခြင်းနှင့် ဖျက်ခြင်း
| Method | Description |
|---|---|
| document.createElement(element) | Create an HTML element |
| document.removeChild(element) | Remove an HTML element |
| document.appendChild(element) | Add an HTML element |
| document.replaceChild(new, old) | Replace an HTML element |
| document.write(text) | Write into the HTML output stream |
Events Handlers များထည့်ခြင်း။
| Method | Description |
|---|---|
| document.getElementById(id).onclick = function(){code} | Adding event handler code to an onclick event |
HTML Objects ကိုရှာဖွေခြင်း။
ပထမဆုံး HTML DOM Level 1 (1998) သည် HTML အရာဝတ္ထု 11 ခု၊ အရာဝတ္ထုစုဆောင်းမှုများနှင့် ဂုဏ်သတ္တိများကို သတ်မှတ်ခဲ့သည်။ ၎င်းတို့သည် HTML5 တွင် အကျုံးဝင်ဆဲဖြစ်သည်။
နောက်ပိုင်းတွင်၊ HTML DOM Level 3 တွင်၊ အရာဝတ္ထုများ၊ စုစည်းမှုများနှင့် ဂုဏ်သတ္တိများကို ထပ်မံထည့်သွင်းခဲ့သည်။
| Property | Description | DOM |
|---|---|---|
| document.anchors | Returns all <a> elements that have a name attribute | 1 |
| document.applets | Deprecated | 1 |
| document.baseURI | Returns the absolute base URI of the document | 3 |
| document.body | Returns the <body> element | 1 |
| document.cookie | Returns the document's cookie | 1 |
| document.doctype | Returns the document's doctype | 3 |
| document.documentElement | Returns the <html> element | 3 |
| document.documentMode | Returns the mode used by the browser | 3 |
| document.documentURI | Returns the URI of the document | 3 |
| document.domain | Returns the domain name of the document server | 1 |
| document.domConfig | Obsolete. | 3 |
| document.embeds | Returns all <embed> elements | 3 |
| document.forms | Returns all <form> elements | 1 |
| document.head | Returns the <head> element | 3 |
| document.images | Returns all <img> elements | 1 |
| document.implementation | Returns the DOM implementation | 3 |
| document.inputEncoding | Returns the document's encoding (character set) | 3 |
| document.lastModified | Returns the date and time the document was updated | 3 |
| document.links | Returns all <area> and <a> elements that have a href attribute | 1 |
| document.readyState | Returns the (loading) status of the document | 3 |
| document.referrer | Returns the URI of the referrer (the linking document) | 1 |
| document.scripts | Returns all <script> elements | 3 |
| document.strictErrorChecking | Returns if error checking is enforced | 3 |
| document.title | Returns the <title> element | 1 |
| document.URL | Returns the complete URL of the document | 1 |