JavaScript တွင် OOP အတွက် ပါဝင်ထားသော ကလက်စ်များ၏ အဆင့်ဆင့်ဖွဲ့စည်းပုံ

ပါဝင်ထားသော ကလက်စ်များတွင်လည်း အဆင့်ဆင့်ဖွဲ့စည်းပုံ ရှိပါသည်။ စာပိုဒ်တစ်ခုဖြင့် ဥပမာတစ်ခုကို ကြည့်ရအောင်-

<p>text</p>

ဒြပ်စင်အား ကိန်းရှင်တစ်ခုအတွင်းသို့ ရယူကြပါစို့-

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

ကွန်ဆိုးတွင် စာပိုဒ်ကို ကြည့်ရအောင်-

console.dir(elem);

သင်သိပြီးဖြစ်သည့်အတိုင်း၊ [[Prototype]] ဂုဏ်သတ္တိတွင် စာပိုဒ်၏ ကလက်စ်အမည် ပါဝင်ပါသည်။ ၎င်းမှာ HTMLParagraphElement ဖြစ်သည်။ အကယ်၍ ထိုကလက်စ်၏ ဂုဏ်သတ္တိများနှင့် နည်းလမ်းများစာရင်းကို ချဲ့ကြည့်လျှင် အောက်ခြေတွင် ၎င်း၏မိဘကလက်စ်ကို ပါဝင်မည့် [[Prototype]] ဂုဏ်သတ္တိကို ထပ်မံတွေ့ရမည်။ ၎င်းမှာ HTMLElement ဖြစ်လိမ့်မည်။ ၎င်းအတွက်လည်း မိဘကလက်စ်ကို ရှာဖွေနိုင်ပြီး ထိုနည်းအတိုင်း ဆက်သွားနိုင်ပါသည်။

ဤတဂ်အတွက် ကလက်စ်များ၏ အဆင့်ဆင့်ဖွဲ့စည်းပုံကို လေ့လာပါ-

<div>text</div>

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

ဤတဂ်အတွက် ကလက်စ်များ၏ အဆင့်ဆင့်ဖွဲ့စည်းပုံကို လေ့လာပါ-

<input>

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

ဤစုစည်းမှုအတွက် ကလက်စ်များ၏ အဆင့်ဆင့်ဖွဲ့စည်းပုံကို လေ့လာပါ-

<div>text</div>
<div>text</div>
<div>text</div>

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

ဤစုစည်းမှုအတွက် ကလက်စ်များ၏ အဆင့်ဆင့်ဖွဲ့စည်းပုံကို လေ့လာပါ-

<div>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

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

console.dir(elems);