การทำงานของ DOMContentLoaded

 

การทำงานของ DOMContentLoaded

เหตุการณ์นี้จะถูกเรียกใช้เมื่อ:

• DOM ของเอกสาร HTML ถูกโหลดและแปลงโครงสร้างเป็นแบบ Tree เรียบร้อย
• ไม่รอให้โหลดทรัพยากรอื่น เช่น รูปภาพ หรือไฟล์ CSS/JS เสร็จสิ้น

---

รูปแบบการใช้งานและตัวอย่าง

1. รูปแบบมาตรฐาน (ทั่วไป)

ใช้สำหรับการทำงานเมื่อ DOM พร้อมใช้งาน

document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM is fully loaded and parsed!");
  // เริ่มต้นการทำงาน เช่น การเข้าถึงองค์ประกอบ DOM
});

---

2. ใช้กับฟังก์ชันที่แยกออกมา

เหมาะสำหรับกรณีที่ต้องการเรียกใช้ฟังก์ชันซ้ำในหลายที่

function initializeApp() {
  console.log("Initialize app!");
}

document.addEventListener("DOMContentLoaded", initializeApp);

---

3. ใช้งานร่วมกับตัวเลือกการตั้งค่า

การเพิ่ม options เป็นพารามิเตอร์เสริม:

document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM Loaded with options!");
}, { once: true });

• { once: true }: ทำให้ฟังก์ชันทำงานเพียงครั้งเดียวแล้วถูกลบออกจากตัวจัดการ (event listener)

---

4. การผสมผสานกับโครงสร้างแบบ Async/Await

เพื่อรองรับโค้ดที่มีการทำงานแบบอะซิงโครนัส

document.addEventListener("DOMContentLoaded", async () => {
  await fetchData();
  console.log("Data fetched and DOM is ready!");
});

async function fetchData() {
  // Fetch data or perform async tasks
  return new Promise(resolve => setTimeout(resolve, 1000));
}

---

5. ตรวจสอบสถานะ DOM ก่อนเพิ่ม Listener

หากต้องการให้โค้ดทำงานได้ในทุกกรณี (เช่น เมื่อ DOM โหลดแล้วก่อนที่โค้ดนี้จะทำงาน)

if (document.readyState === "loading") { // DOM ยังไม่โหลด
  document.addEventListener("DOMContentLoaded", () => {
    console.log("DOM is ready!");
  });
} else { // DOM โหลดแล้ว
  console.log("DOM is already ready!");
}

---

การใช้งานในกรณีที่เหมาะสม

สถานการณ์	วิธีที่แนะนำ
DOM ยังโหลดไม่เสร็จ	ใช้ DOMContentLoaded กับฟังก์ชัน
DOM โหลดเร็วและต้องการรองรับทุกกรณี	ใช้ตรวจสอบ document.readyState ร่วมด้วย
ใช้โค้ดหลายครั้งแต่ไม่ต้องการโหลดซ้ำ	เพิ่ม { once: true } ในตัวเลือก
การใช้งานที่มี Asynchronous	ใช้ร่วมกับฟังก์ชัน Async/Await