Operasi CRUD DOM

Document Object Model (DOM) adalah cara browser merepresentasikan HTML. Ia mengubah setiap elemen, atribut, dan potongan teks menjadi sebuah objek. JavaScript menggunakan objek-objek ini untuk mengubah apa yang Anda lihat di layar.

Saat Anda mengklik sebuah tombol dan halaman diperbarui tanpa memuat ulang (refresh), JavaScript sedang mengubah DOM.

Anda dapat melakukan operasi CRUD (Create, Read, Update, Delete) dengan metode-metode ini.

  1. Mengakses Elemen (Read) Untuk mengubah sesuatu, Anda harus menemukannya terlebih dahulu. Gunakan metode berikut:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Membuat Elemen (Create) Anda dapat menghasilkan elemen HTML baru menggunakan JavaScript.
  • createElement("tagName") membuat elemen di dalam memori.
  • append() menambahkan konten ke bagian akhir dari elemen induk (parent).
  • appendChild() menambahkan satu node sebagai anak terakhir.
  • prepend() menambahkan konten ke bagian awal dari elemen induk (parent).
  • before() menyisipkan elemen sebelum item tertentu.
  • after() menyisipkan elemen setelah item tertentu.
  • insertBefore() menempatkan elemen sebelum anak tertentu.

Catatan: Sebuah elemen tetap berada di memori sampai Anda menambahkannya ke halaman.

  1. Memperbarui Elemen (Update) Anda dapat mengubah konten yang ada menggunakan properti berikut:
  • innerText: Hanya mengubah teks yang terlihat.
  • textContent: Mengubah semua teks, termasuk teks yang tersembunyi.
  • innerHTML: Mengubah konten dan memungkinkan Anda untuk menambahkan tag HTML.
  1. Bekerja dengan Atribut (Update) Atribut memberikan informasi tambahan tentang elemen.
  • setAttribute(name, value): Mengatur atau mengganti atribut.
  • getAttribute(name): Mengambil nilai atribut.
  • removeAttribute(name): Menghapus atribut.
  • hasAttribute(name): Memeriksa apakah sebuah atribut ada.

Tips pro: Gunakan classList.add() untuk menambahkan class tanpa menghapus class yang lama. setAttribute() mengganti seluruh nilai.

  1. Menghapus Elemen (Delete) Untuk menghapus elemen dari halaman, gunakan:
  • remove()

Ringkasan alur CRUD:

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

Menguasai metode-metode ini memungkinkan Anda membangun aplikasi interaktif seperti daftar tugas (to-do list) atau kalkulator. Ini adalah keterampilan vital untuk pengembangan front-end.

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