DOM (Document Object Model)

សេចក្តីផ្តើម

DOM (Document Object Model) គឺជាការតំណាងរបស់ HTML document ក្នុងទម្រង់ object ដែល JavaScript អាចប្រើប្រាស់បាន។ DOM អនុញ្ញាតឱ្យយើងផ្លាស់ប្តូរ HTML និង CSS។

DOM Methods

Get Element by ID

let element = document.getElementById("demo");
element.innerHTML = "Hello World";

Method ដែលប្រើញឹកញាប់បំផុត

Change HTML Content

element.innerHTML = "New content";
element.innerText = "Text only";
element.textContent = "Text content";

Methods សម្រាប់ផ្លាស់ប្តូរខ្លឹមសារ

Change CSS Style

element.style.color = "red";
element.style.fontSize = "20px";
element.style.backgroundColor = "yellow";

ផ្លាស់ប្តូរ style តាម JavaScript

Change Attributes

element.setAttribute("class", "active");
element.getAttribute("class");
element.removeAttribute("class");
element.hasAttribute("class");

Methods សម្រាប់គ្រប់គ្រង attributes

Create & Add Elements

let newElement = document.createElement("p");
newElement.innerHTML = "New paragraph";
document.body.appendChild(newElement);

បង្កើត និងបន្ថែមធាតុថ្មី

Remove Elements

let element = document.getElementById("demo");
element.remove();

// Or
element.parentNode.removeChild(element);

លុបធាតុចេញពី DOM

Best Practices

• ប្រើ querySelector() សម្រាប់ flexibility
• Cache DOM references សម្រាប់ performance
• ប្រើ classList ជំនួស className
• ជៀសវាង innerHTML សម្រាប់ user input (XSS)

Interactive Examples

• Get Element Demo
• Change Content Demo
• Change Style Demo
• Add/Remove Class Demo
• Create Element Demo
• Remove Element Demo

សង្ខេប

• DOM អនុញ្ញាតឱ្យ JavaScript ផ្លាស់ប្តូរ HTML
• Select: getElementById, querySelector, querySelectorAll
• Change: innerHTML, innerText, style
• Attributes: setAttribute, getAttribute, removeAttribute
• Create/Remove: createElement, appendChild, remove