คลาส DOM ในตัวของ JavaScript

องค์ประกอบ DOM ก็เป็นอ็อบเจ็กต์ของคลาสในตัวเช่นกัน ลองดูตัวอย่างกัน สมมติว่ามีย่อหน้าของเรา:

<p>ข้อความ</p>

รับลิงก์ไปยังตัวแปร:

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

แสดงย่อหน้านี้ในคอนโซล:

console.log(elem);

และตอนนี้มาดูรายการคุณสมบัติ และวิธีการของย่อหน้าของเรา:

console.dir(elem);

สามารถกำหนดได้ว่าคลาสใด ย่อหน้าของเราเป็นของ สำหรับสิ่งนี้ ในรายการคุณสมบัติต้องหาคุณสมบัติพิเศษ [[Prototype]] ในนั้นเรา เห็นว่าย่อหน้าเป็นของ คลาส HTMLParagraphElement ตรวจสอบสิ่งนี้:

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

ศึกษาผลลัพธ์ของการทำงาน ของโค้ดต่อไปนี้:

<div>ข้อความ</div>

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

กำหนดว่าคลาสใดเป็นของ แท็กนี้

ศึกษาผลลัพธ์ของการทำงาน ของโค้ดต่อไปนี้:

<input>

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

กำหนดว่าคลาสใดเป็นของ แท็กนี้

ศึกษาผลลัพธ์ของการทำงาน ของโค้ดต่อไปนี้:

<div>ข้อความ</div>
<div>ข้อความ</div>
<div>ข้อความ</div>

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

กำหนดว่าคลาสใดเป็นของ ผลลัพธ์

ศึกษาผลลัพธ์ของการทำงาน ของโค้ดต่อไปนี้:

<div>
	<p>ข้อความ</p>
	<p>ข้อความ</p>
	<p>ข้อความ</p>
</div>

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

console.dir(elems);

กำหนดว่าคลาสใดเป็นของ ผลลัพธ์