យ៉ាងណាម៉ិញ នៅពេលដែល browser ត្រូវបើកឡើង វត្ថុនៃភាសា JS ទាំងឡាយ ទាក់ទងនឹងធាតុ HTML និមួយៗនៅក្នុងទំព័ររបស់ browser ត្រូវបានបង្កើតឡើងក្នុងទំរង់ជាឋានានុក្រមមួយដ៏ជាក់លាក់ មានជាឧទាហរណ៍ដូចនៅក្នុងរូបខាងក្រោមនេះ៖
វត្ថុនិមួយៗនៅក្នុងឋានានុក្រមនៃឯកសារ HTML ដែលជាទំព័ររបស់ browser ត្រូវហៅថា ថ្នាំង (node) ដែលនៅក្នុងនោះមានវិធីនិងទិន្នន័យដែលយើងអាចយកមកប្រើប្រាស់ សំរាប់លុប បង្កើត និងឬ កែច្នៃធាតុ HTML នៅក្នុង browser បានគ្រប់ពេលវេលា។
មុនគេបង្អស់ យើងចាំបាច់ត្រូវយកវិធីមានស្រាប់នៅក្នុង DOM មួយចំនួនមកប្រើ ក្នុងគោលបំណងភ្ជាប់ទំនាក់ទំនងជាមួយនឹងធាតុ HTML ទាំងឡាយជាមុនសិន មុននឹងធ្វើការកែប្រែអ្វីមួយទៅលើធាតុ HTML ទាំងនោះ។ ពិនិត្យកម្មវិធីខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Odor+Mean+Chey' rel='stylesheet'>
</head>
<body style="font:14px/1.5 'Odor Mean Chey'">
<input onclick="myFunction()" type="button" value="សាកល្បង" />
<script>
function myFunction(){
var text = prompt("សរសេរអ្វីមួយនៅខាងក្រោមនេះ៖");
var element = document.getElementById("info");
element.innerHTML = "អត្ថបទដែលអ្នកបានសរសេរគឺ៖ «" + text + "»";
}
</script>
</body>
</html>
នៅលើបន្ទាត់លេខ 14 គឺជាការយកវិធីមានស្រាប់ឈ្មោះ getElementById() នៅក្នុង DOM មកប្រើ ក្នុងគោលបំណងភ្ជា់បទំនាក់ទំនងជាមួយនឹងធាតុ HTML ដែលមានអត្តសញ្ញាណជា info ។
នៅលើបន្ទាត់លេខ 15 គឺជាការបញ្ចូលអត្ថបទបានមកពីអ្នកប្រើប្រាស់ ចូលទៅក្នងធាតុ HTML មានអត្តសញ្ញាណជា info ដែលត្រូវបានភ្ជាប់ទំនាក់ទំនងនៅលើបន្ទាត់លេខ 14 ។
Finding 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 |
Changing HTML Elements
| Method/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 |
| element.setAttribute(attribute, value) | Change the attribute value of an HTML element |
Adding and Deleting Elements
| 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 |
