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:

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

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

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

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

javascriptconsole.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.

Задание 1

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

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

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

Задание 2

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

html<input>

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

Задание 3

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

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

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

Задание 4

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

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

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

console.dir(elems);