JavaScript ၏ DOM အလိုအလျောက်အတန်းများ

DOM အစိတ်အပိုင်းများသည်လည်း အလိုအလျောက်အတန်းများ၏ object များဖြစ်ကြသည်။ ဥပမာတစ်ခုဖြင့် ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် စာပိုဒ်တစ်ခုရှိသည်ဆိုပါစို့။

html<p>စာသား</p>

၎င်းကို variable တစ်ခုအတွင်း ရည်ညွှန်းရယူကြမည်။

javascriptlet elem = document.querySelector('p');

ထိုစာပိုဒ်ကို console တွင် ထုတ်ပြကြမည်။

javascriptconsole.log(elem);

ယခု ကျွန်ုပ်တို့၏ စာပိုဒ်၏ properties များနှင့် methods များစာရင်းကို ကြည့်ကြမည်။

javascriptconsole.dir(elem);

ကျွန်ုပ်တို့၏ စာပိုဒ်သည် မည်သည့်အတန်းနှင့် သက်ဆိုင်သည်ကို သတ်မှတ်နိုင်သည်။ ၎င်းအတွက် properties စာရင်းထဲတွင် အထူး property [[Prototype]] ကို ရှာရန် လိုအပ်သည်။ ၎င်းထဲတွင် ကျွန်ုပ်တို့ မြင်ရသည်မှာ စာပိုဒ်သည် HTMLParagraphElement အတန်းနှင့် သက်ဆိုင်သည်။ ၎င်းကို စစ်ဆေးကြည့်ကြမည်။

javascriptconsole.log(elem instanceof HTMLParagraphElement); // true

Задание 1

အောက်ပါကုဒ်ဖြင့် ရလဒ်ကို လေ့လာပါ။

html<div>စာသား</div>

javascriptlet elem = document.querySelector('div');
console.dir(elem);

ဤ tag သည် မည်သည့်အတန်းနှင့် သက်ဆိုင်သည်ကို သတ်မှတ်ပါ။

Задание 2

အောက်ပါကုဒ်ဖြင့် ရလဒ်ကို လေ့လာပါ။

html<input>

javascriptlet elem = document.querySelector('input');
console.dir(elem);

� tag သည် မည်သည့်အတန်းနှင့် သက်ဆိုင်သည်ကို သတ်မှတ်ပါ။

Задание 3

အောက်ပါကုဒ်ဖြင့် ရလဒ်ကို လေ့လာပါ။

html<div>စာသား</div>
<div>စာသား</div>
<div>စာသား</div>

javascriptlet elems = document.querySelectorAll('div');
console.dir(elems);

ရလဒ်သည် မည်သည့်အတန်းနှင့် သက်ဆိုင်သည်ကို သတ်မှတ်ပါ။

Задание 4

အောက်ပါကုဒ်ဖြင့် ရလဒ်ကို လေ့လာပါ။

html<div>
  <p>စာသား</p>
  <p>စာသား</p>
  <p>စာသား</p>
</div>

javascriptlet elem = document.querySelector('div');
let elems = elem.children;

console.dir(elems);

ရလဒ်သည် မည်သည့်အတန်းနှင့် သက်ဆိုင်သည်ကို သတ်မှတ်ပါ။