Phân cấp lớp dựng sẵn trong OOP trong JavaScript

Các lớp dựng sẵn cũng có phân cấp. Hãy xem xét ví dụ với một đoạn văn:

<p>văn bản</p>

Lấy tham chiếu đến đoạn văn vào biến:

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

Hãy xem đoạn văn của chúng ta trong bảng điều khiển:

console.dir(elem);

Như bạn đã biết, trong thuộc tính [[Prototype]] chứa tên lớp của đoạn văn. Đó là HTMLParagraphElement. Nếu mở rộng danh sách thuộc tính và phương thức của lớp này, thì phía dưới lại sẽ thấy thuộc tính [[Prototype]], nó sẽ chứa lớp cha và đó sẽ là HTMLElement. Đối với nó cũng có thể tìm thấy lớp cha và cứ tiếp tục như vậy.

Nghiên cứu phân cấp lớp cho thẻ này:

<div>văn bản</div>

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

Nghiên cứu phân cấp lớp cho thẻ này:

<input>

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

Nghiên cứu phân cấp lớp cho tập hợp này:

<div>văn bản</div>
<div>văn bản</div>
<div>văn bản</div>

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

Nghiên cứu phân cấp lớp cho tập hợp này:

<div>
	<p>văn bản</p>
	<p>văn bản</p>
	<p>văn bản</p>
</div>

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

console.dir(elems);