Operasi CRUD DOM

Document Object Model (DOM) adalah cara pelayar web mewakili HTML. Ia menukarkan setiap elemen, atribut, dan cebisan teks kepada objek. JavaScript menggunakan objek-objek ini untuk mengubah apa yang anda lihat pada skrin.

Apabila anda mengklik butang dan halaman dikemas kini tanpa memuat semula, JavaScript sedang mengubah DOM.

Anda boleh melakukan operasi CRUD (Create, Read, Update, Delete) dengan kaedah-kaedah ini.

  1. Mengakses Elemen (Read) Untuk mengubah sesuatu, anda mesti mencarinya terlebih dahulu. Gunakan kaedah-kaedah ini:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Mencipta Elemen (Create) Anda boleh menjana elemen HTML baharu menggunakan JavaScript.
  • createElement("tagName") mencipta elemen dalam memori.
  • append() menambah kandungan ke penghujung elemen induk.
  • appendChild() menambah satu nod tunggal sebagai anak terakhir.
  • prepend() menambah kandungan ke permulaan elemen induk.
  • before() memasukkan elemen sebelum item tertentu.
  • after() memasukkan elemen selepas item tertentu.
  • insertBefore() meletakkan elemen sebelum anak tertentu.

Nota: Sesuatu elemen akan kekal dalam memori sehingga anda menambahnya ke dalam halaman.

  1. Mengemas Kini Elemen (Update) Anda boleh mengubah kandungan sedia ada menggunakan sifat-sifat ini:
  • innerText: Mengubah teks yang kelihatan sahaja.
  • textContent: Mengubah semua teks, termasuk teks yang tersembunyi.
  • innerHTML: Mengubah kandungan dan membolehkan anda menambah tag HTML.
  1. Bekerja dengan Atribut (Update) Atribut menyediakan maklumat tambahan tentang elemen.
  • setAttribute(name, value): Menetapkan atau menggantikan atribut.
  • getAttribute(name): Mengambil nilai atribut.
  • removeAttribute(name): Memadam atribut.
  • hasAttribute(name): Menyemak jika atribut wujud.

Tip Pro: Gunakan classList.add() untuk menambah kelas tanpa membuang kelas lama. setAttribute() menggantikan keseluruhan nilai.

  1. Membuang Elemen (Delete) Untuk memadam elemen daripada halaman, gunakan:
  • remove()

Ringkasan aliran CRUD:

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

Menguasai kaedah-kaedah ini membolehkan anda membina aplikasi interaktif seperti senarai tugasan atau kalkulator. Ini adalah kemahiran penting untuk pembangunan front-end.

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