การดำเนินการ CRUD บน DOM

Document Object Model (DOM) คือวิธีที่เบราว์เซอร์ใช้ในการแสดงผล HTML โดยจะเปลี่ยนทุกองค์ประกอบ (element), แอตทริบิวต์ (attribute) และข้อความ ให้กลายเป็นออบเจกต์ (object) ซึ่ง JavaScript จะใช้ออบเจกต์เหล่านี้ในการเปลี่ยนแปลงสิ่งที่คุณเห็นบนหน้าจอ

เมื่อคุณคลิกปุ่มแล้วหน้าเว็บอัปเดตโดยไม่ต้องรีเฟรช นั่นคือ JavaScript กำลังเปลี่ยนแปลง DOM อยู่

คุณสามารถดำเนินการ CRUD (Create, Read, Update, Delete) ได้ด้วยเมธอดเหล่านี้

  1. การเข้าถึงองค์ประกอบ (Read) หากต้องการเปลี่ยนแปลงบางสิ่ง คุณต้องค้นหามันให้พบก่อน โดยใช้เมธอดเหล่านี้:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. การสร้างองค์ประกอบ (Create) คุณสามารถสร้างองค์ประกอบ HTML ใหม่ได้โดยใช้ JavaScript
  • createElement("tagName") สร้างองค์ประกอบขึ้นในหน่วยความจำ
  • append() เพิ่มเนื้อหาต่อท้ายองค์ประกอบหลัก (parent)
  • appendChild() เพิ่มโหนดเดียวเป็นโหนดลูกลำดับสุดท้าย
  • prepend() เพิ่มเนื้อหาไว้ที่ส่วนเริ่มต้นขององค์ประกอบหลัก (parent)
  • before() แทรกองค์ประกอบไว้ก่อนหน้าไอเทมที่ระบุ
  • after() แทรกองค์ประกอบไว้หลังไอเทมที่ระบุ
  • insertBefore() วางองค์ประกอบไว้ก่อนหน้าโหนดลูกที่ระบุ

หมายเหตุ: องค์ประกอบจะอยู่ในหน่วยความจำจนกว่าคุณจะเพิ่มมันลงในหน้าเว็บ

  1. การอัปเดตองค์ประกอบ (Update) คุณสามารถเปลี่ยนเนื้อหาที่มีอยู่ได้โดยใช้คุณสมบัติ (properties) เหล่านี้:
  • innerText: เปลี่ยนเฉพาะข้อความที่มองเห็นได้
  • textContent: เปลี่ยนข้อความทั้งหมด รวมถึงข้อความที่ถูกซ่อนไว้ด้วย
  • innerHTML: เปลี่ยนเนื้อหาและช่วยให้คุณสามารถเพิ่มแท็ก HTML ได้
  1. การทำงานกับแอตทริบิวต์ (Update) แอตทริบิวต์ (Attributes) ให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบต่างๆ
  • setAttribute(name, value): กำหนดหรือแทนที่แอตทริบิวต์
  • getAttribute(name): ดึงค่าของแอตทริบิวต์
  • removeAttribute(name): ลบแอตทริบิวต์
  • hasAttribute(name): ตรวจสอบว่ามีแอตทริบิวต์นั้นอยู่หรือไม่

เคล็ดลับ: ใช้ classList.add() เพื่อเพิ่มคลาสโดยไม่ลบคลาสเดิมที่มีอยู่ ส่วน setAttribute() จะเป็นการแทนที่ค่าเดิมทั้งหมด

  1. การลบองค์ประกอบ (Delete) หากต้องการลบองค์ประกอบออกจากหน้าเว็บ ให้ใช้:
  • remove()

สรุปขั้นตอนการทำงานแบบ CRUD:

  • Create: createElement()
  • Update: innerText = "New text"
  • Add: appendChild()
  • Delete: remove()

การเชี่ยวชาญเมธอดเหล่านี้จะช่วยให้คุณสามารถสร้างแอปพลิเคชันที่มีการโต้ตอบได้ เช่น รายการสิ่งที่ต้องทำ (to-do lists) หรือเครื่องคิดเลข ซึ่งเป็นทักษะที่สำคัญอย่างยิ่งสำหรับการพัฒนา Front-end

Source: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka