Hierarki Kelas Terbina Dalam OOP dalam JavaScript

Kelas terbina dalam juga mempunyai hierarki. Mari kita lihat menggunakan contoh perenggan:

<p>teks</p>

Dapatkan rujukan kepada perenggan dalam pembolehubah:

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

Lihat perenggan kita dalam konsol:

console.dir(elem);

Seperti yang anda sudah tahu, dalam sifat [[Prototype]] terkandung nama kelas perenggan. Ia ialah HTMLParagraphElement. Jika dikembangkan senarai sifat dan kaedah kelas ini, maka di bawah sekali akan ditemui sekali lagi sifat [[Prototype]], yang akan mengandungi kelas induk dan ia akan menjadi HTMLElement. Untuknya juga boleh dicari induk dan seterusnya.

Kaji hierarki kelas untuk tag ini:

<div>teks</div>

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

Kaji hierarki kelas untuk tag ini:

<input>

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

Kaji hierarki kelas untuk koleksi ini:

<div>teks</div>
<div>teks</div>
<div>teks</div>

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

Kaji hierarki kelas untuk koleksi ini:

<div>
	<p>teks</p>
	<p>teks</p>
	<p>teks</p>
</div>

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

console.dir(elems);