DOM

មេរៀន​នេះ មាន​ជា​វីដេអូ ។

មេរៀន​ជា​វីដេអូ

ពាក្យពេញ​នៃ DOM គឺ Document Object Model ។ DOM គឺ​ជា Object ដែលក្ដោប​ក្ដាប់​អ្វីៗ​គ្រប់​យ៉ាង​ដែល​មាន​នៅ​លើ​ទំព័រ​បច្ចុប្បន្ន ដែល​វា​សំដៅ​ទៅ​លើ object document ។ រី​ឯ​របស់​ផ្សេងៗ​ដែល​មិន​នៅ​ក្នុង​ឯកសារ​បច្ចុប្បន្ន ដូចជា ទី​តាំង mouse, ទំហំ​កម្មវិធី​រុករក,... ទាំងអស់​នោះ​គឺ​ស្ថិត​នៅ​ក្នុង BOM ។

វិធី​ចាប់​យក​ធាតុ

មាន​វិធី​ចាប់​យក​ធាតុ​ជាច្រើន ដែល​អាច​ប្រើ​បាន​ក្នុង Javascript ៖

Method នៃ document សំរាប់​ចាប់​ធាតុ
Method នៃ document សំរាប់​ចាប់​យក​ធាតុ ... ត្រឡប់​មក​វិញ​នូវ
getElementsByTagName() តាម​ឈ្មោះ​ធាតុ array
getElementById() តាម​ឈ្មោះ​អត្តសញ្ញាណ object នៃ​ធាតុ​នោះ
getElementsByClassName() តាម​ឈ្មោះ​ថ្នាក់ array
querySelectorAll() ដោយ​ប្រើ​ការ​ហៅ​ដូច CSS array
querySelector() ដោយ​ប្រើ​ការ​ហៅ​ដូច CSS (មួយ​ធាតុ​ដំបូង) object នៃ​ធាតុ​នោះ
var h2 = document.getElementsByTagName("h2");
for (var i = 0, n = h2.length; i < n; i++)
    h2[i].style.color = "blue";

var two = document.getElementsByClassName("two");
for (var i = 0, n = two.length; i < n; i++)
    two[i].style.textDecoration = "underline";

var header = document.getElementById("header");
header.style.padding = "25px";
header.style.background = "aqua";
header.style.fontSize = "20px";

var allA = document.querySelectorAll(".a");
for (var i = 0, n = allA.length; i < n; i++)
    allA[i].style.background = "red";

var oneA = document.querySelector(".a")
oneA.style.color = "yellow";
<div id="header">ស្វាគមន៍​មក​កាន់ KHODE</div>
<h2>ចំណងជើង​<span class="a">មួយ</span></h2>
<p>អត្ថបទ​<span class="a">មួយ</span></p>
<h2 class="two">ចំណងជើង​<span class="a">ពីរ</span></h2>
<p class="two">អត្ថបទ​<span class="a">ពីរ</span></p>

មាន property មួយ​ចំនួន​នៃ document ដែល​ក្ដោប​ក្ដាប់​ធាតុ​ដែល​មាន​ក្នុង​ទំព័រ​បច្ចុប្បន្ន ។

Property នៃ document ដែល​ផ្ទុក​ធាតុ
property នៃ document ផ្ទុក
head <head>
body property <body>
scripts property array នៃ <script>
images property array នៃ <img>
links property array នៃ <a> ដែល​បាន​កំណត់ attribute href

បង្កើត​ធាតុ

ដើម្បី​បង្កើត​ធាតុ ត្រូវ​ប្រើ createElement() នៃ document ។

btn.onclick = function () {
    if (document.getElementById("welcome") !== null) return;
    var div = document.createElement("div");
    div.id = "welcome";
    div.style.background = "pink";
    div.style.fontSize = "20px";
    div.style.textAlign = "center";
    div.innerHTML = "ស្វាគមន៍​មក​កាន់ KHODE";
    document.body.appendChild(div);
}
<button id="btn">ស្វាគមន៍</button>

ធាតុ

ឧទាហរណ៍​ខាងក្រោម​បង្ហាញ​អំពី Property និង Method មួយ​ចំនួន​ដែល​អាច​ប្រើ​ជាមួយ​ធាតុ ។

var select = document.querySelector("select");
var list = document.getElementById("list");
for (var i = 0, n = list.children.length; i < n; i++) {
    var option = document.createElement("option");
    option.innerHTML = list.children[i].innerText.split(" ")[0];
    select.appendChild(option);
}
select.onchange = function () {
    document.getElementById("description").innerHTML = list.children[this.selectedIndex].innerHTML;
}
<ul id="list">
    <li>attributes property ចាប់​យក​ឈ្មោះ attribute ។</li>
    <li>classList property ចាប់​យក​ឈ្មោះ​នៃ​ថ្នាក់ (បង្ហាញ​ជា Array) ។</li>
    <li>className property ចាប់​យក​ឈ្មោះ​នៃ​ថ្នាក់ (បង្ហាញ​ជា String) ។</li>
    <li>id property ចាប់​យក​ឈ្មោះ​នៃ​អត្តសញ្ញាណ ។</li>
    <li>innerHTML property ចាប់​យក​កូដ HTML ដែល​នៅ​ក្នុង ។</li>
    <li>textContent property ចាប់​យក​អត្ថបទ​ដែល​នៅ​ក្នុង ។</li>
    <li>nextElementSibling property ចាប់​យក​ធាតុ​បន្ទាប់ ។</li>
    <li>previousElementSibling property ចាប់​យក​ធាតុ​មុន​ធាតុ​បច្ចុប្បន្ន ។</li>
    <li>childElementCount property ចាប់​យក​ចំនួន​ធាតុ​ដែល​វា​ផ្ទុក ។</li>
    <li>children property ចាប់​យក​ធាតុ​ដែល​វា​ផ្ទុក ។</li>
    <li>offsetParent property ចាប់​យក​ធាតុ​ដែល​ផ្ទុក​ធាតុ​បច្ចុប្បន្ន ។</li>
    <li>firstElementChildren property ចាប់​យក​ធាតុ​មួយ​ដែល​វា​ផ្ទុក​ដំបូង​គេ ។</li>
    <li>lastElementChildren property ចាប់​យក​ធាតុ​មួយ​ដែល​វា​ផ្ទុក​ចុងក្រោយ​គេ ។</li>
    <li>offsetWidth property ចាប់​យក​ប្រវែង​ផ្ដេក ។</li>
    <li>offsetHeight property ចាប់​យក​ប្រវែង​បញ្ឈរ ។</li>
    <li>offsetTop property ចាប់​យក​គម្លាត​ខាង​លើ ។</li>
    <li>offsetLeft property ចាប់​យក​គម្លាត​ខាង​ឆ្វេង ។</li>
    <li>appendChild() method កំណត់​បញ្ចូល​កូន​ចូល​ទៅ​ក្នុង ។</li>
    <li>insertBefore() method កំណត់​បញ្ចូល​កូន​ចូល​ទៅ​ក្នុង មុន​កូន​ណាមួយ​ដែល​នៅ​ក្នុង​នោះ ។</li>
    <li>setAttribute() method កំណត់​ឈ្មោះ Attribute និង​តម្លៃ​របស់​វា ។</li>
    <li>getAttribute() method ចាប់​យក​តម្លៃ​នៃ Attribute ណាមួយ ។</li>
    <li>removeAttribute() method លុប Attribute ណាមួយ ។</li>
</ul>
<select></select>
<p id="description"></p>#list { display: none; }
ទំព៏រ​ដើម កូដ វីដេអូ បញ្ជី ចែករំលែក បោះពុម្ភ ឡើង​លើ Facebook Google Plus Twitter មតិ ឧបត្ថម្ភ ទំនាក់ទំនង អាជ្ញាប័ណ្ឌ សិទ្ធ​អ្នក​និពន្ធ បិទ Khode Academy មុន បន្ទាប់ ប្ដូរ​ម៉ូត