Hierarki Kelas Bawaan dalam OOP di JavaScript

Kelas bawaan juga memiliki hierarki. Mari kita lihat contoh paragraf:

<p>teks</p>

Dapatkan referensi ke paragraf dalam variabel:

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

Lihat paragraf kita di konsol:

console.dir(elem);

Seperti yang sudah Anda ketahui, dalam properti [[Prototype]] berisi nama kelas paragraf. Ini adalah HTMLParagraphElement. Jika membuka daftar properti dan metode kelas ini, maka di bawahnya akan ditemukan lagi properti [[Prototype]], yang akan berisi kelas induk dan ini akan menjadi HTMLElement. Untuk itu juga dapat ditemukan induknya dan seterusnya.

Pelajari hierarki kelas untuk tag ini:

<div>teks</div>

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

Pelajari hierarki kelas untuk tag ini:

<input>

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

Pelajari hierarki kelas untuk koleksi ini:

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

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

Pelajari 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);