JavaScript DOM

DOM Document Object Model គឺជា Programming Interface មួយដែលគេប្រើប្រាស់សម្រាប់ធ្វើការជាមួយ HTML ឱ្យមានលក្ខណៈ Dynamic ដែលអាចគ្រប់គ្រងទៅលើផ្នែកផ្សេងៗរបស់ដូចជា Element, Attribute និង Text ជាដើម ។

ដើម្បីធ្វើការកែប្រែ HTML Element គេអាចធ្វើបានតាមរយៈវិធីច្រើនខុសៗគ្នាមានដូចជាតាម ID, Class, Tag ឬ Form ជាដើម ។

ការចាប់យកតម្លៃ Element តាមឈ្មោះ ID

ដើម្បីទាញតម្លៃចេញពី HTML Tag ណាមួយតាមរយៈឈ្មោះ ID ត្រូវសរសេរតាមទម្រង់ដូចខាងក្រោម៖

សម្រាប់ Element ធម្មតា

-----------------------------------------------------------------------------------------

document.getElementById("idName").textContent/outerHTML;

-----------------------------------------------------------------------------------------

• textContent ប្រើសម្រាប់ចាប់យកតែអក្សរចេញពី Element 
• outerHTML ចាប់យកទាំងអក្សរ និងកូដ HTML ទាំងមូល 

សម្រាប់ Form Element

-----------------------------------------------------------------------------------------

document.getElementById("idName").value;

-----------------------------------------------------------------------------------------

ដើម្បីបោះតម្លៃចូលទៅក្នុង HTML Tag ណាមួយតាមរយៈឈ្មោះ ID ត្រូវសរសេរតាមទម្រង់ដូចខាងក្រោម៖

សម្រាប់ Element ធម្មតា

-----------------------------------------------------------------------------------------

document.getElementById("idName").textContent/innerHTML = value;

-----------------------------------------------------------------------------------------

• textContent បោះតែអក្សរប៉ុណ្ណោះ
• innerHTML បោះកូដ HTML ទាំងមូលចូល Element

សម្រាប់ Form Element

-----------------------------------------------------------------------------------------

document.getElementById("idName").value = value;

-----------------------------------------------------------------------------------------

ការចាប់យកតម្លៃ Element តាមឈ្មោះ Class

ដើម្បីទាញតម្លៃចេញពី HTML Tag ណាមួយតាមរយៈឈ្មោះ Class ត្រូវសរសេរតាមទម្រង់ដូចខាងក្រោម៖

សម្រាប់ Element ធម្មតា

-----------------------------------------------------------------------------------------

document.getElementsByClassName("className")[classIndex].textContent/outerHTML;

-----------------------------------------------------------------------------------------

សម្រាប់ Form Element

-----------------------------------------------------------------------------------------

document.getElementsByClassName("className")[classIndex].value;

-----------------------------------------------------------------------------------------

ដើម្បីបោះតម្លៃចូលទៅក្នុង HTML Tag ណាមួយតាមរយៈឈ្មោះ Class ត្រូវសរសេរតាមទម្រង់ដូចខាងក្រោម៖

សម្រាប់ Element ធម្មតា

-----------------------------------------------------------------------------------------

document.getElementsByClassName("className")[classIndex].textContent/innerHTML = value;

-----------------------------------------------------------------------------------------

សម្រាប់ Form Element

-----------------------------------------------------------------------------------------

document.getElementsByClassName("className")[classIndex].value = value;

-----------------------------------------------------------------------------------------

ការចាប់យកតម្លៃ Element តាមឈ្មោះ Tag

ដើម្បីទាញតម្លៃចេញពី HTML Tag ណាមួយតាមរយៈឈ្មោះ Tag ត្រូវសរសេរតាមទម្រង់ដូចខាងក្រោម៖

សម្រាប់ Element ធម្មតា

-----------------------------------------------------------------------------------------

document.getElementsByTagName("tagName")[tagIndex].textContent/outerHTML;

-----------------------------------------------------------------------------------------

សម្រាប់ Form Element

-----------------------------------------------------------------------------------------

document.getElementsByTagName("tagName")[tagIndex].value;

-----------------------------------------------------------------------------------------

ដើម្បីបោះតម្លៃចូលទៅក្នុង HTML Tag ណាមួយតាមរយៈឈ្មោះ Tag ត្រូវសរសេរតាមទម្រង់ដូចខាងក្រោម៖

សម្រាប់ Element ធម្មតា

-----------------------------------------------------------------------------------------

document.getElementsByTagName("tagName")[tagIndex].textContent/innerHTML = value;

-----------------------------------------------------------------------------------------

សម្រាប់ Form Element

-----------------------------------------------------------------------------------------

document.getElementsByTagName("tagName")[tagIndex].value = value;

-----------------------------------------------------------------------------------------

ការចាប់យកតម្លៃ Element តាម Form

ដើម្បីទាញតម្លៃចេញពី HTML Tag ណាមួយតាមរយៈ Form ត្រូវសរសេរតាមទម្រង់ដូចខាងក្រោម៖

-----------------------------------------------------------------------------------------

document.forms[formIndex/Name].elements[elementIndex/Name].value;

-----------------------------------------------------------------------------------------

ដើម្បីបោះតម្លៃចូលទៅក្នុង HTML Tag ណាមួយតាមរយៈ Form ត្រូវសរសេរតាមទម្រង់ដូចខាងក្រោម៖

-----------------------------------------------------------------------------------------

document.forms[formIndex/Name].elements[elementIndex/Name].value = value;

-----------------------------------------------------------------------------------------