Các lớp DOM tích hợp trong JavaScript

Các phần tử DOM cũng đại diện cho các đối tượng của các lớp tích hợp. Hãy xem xét qua một ví dụ. Giả sử chúng ta có một đoạn văn:

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

Lấy tham chiếu đến nó vào một biến:

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

In đoạn văn này ra console:

console.log(elem);

Và bây giờ hãy xem danh sách các thuộc tính và phương thức của đoạn văn của chúng ta:

console.dir(elem);

Có thể xác định lớp mà đoạn văn của chúng ta thuộc về. Để làm điều này, trong danh sách thuộc tính cần tìm một thuộc tính đặc biệt [[Prototype]]. Trong đó, chúng ta thấy rằng đoạn văn thuộc về lớp HTMLParagraphElement. Hãy kiểm tra điều này:

console.log(elem instanceof HTMLParagraphElement); // true

Nghiên cứu kết quả thực thi của mã sau:

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

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

Xác định lớp mà thẻ này thuộc về.

Nghiên cứu kết quả thực thi của mã sau:

<input>

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

Xác định lớp mà thẻ này thuộc về.

Nghiên cứu kết quả thực thi của mã sau:

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

Xác định lớp mà kết quả thuộc về.

Nghiên cứu kết quả thực thi của mã sau:

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

Xác định lớp mà kết quả thuộc về.