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

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

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

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

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

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

javascriptconsole.log(elem);

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

javascriptconsole.dir(elem);

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

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

Задание 1

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

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

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

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

Задание 2

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

html<input>

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

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

Задание 3

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

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

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

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

Задание 4

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

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

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

console.dir(elems);

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