Operasi CRUD DOM

Document Object Model (DOM) adalah struktur pohon untuk HTML Anda. JavaScript menggunakannya untuk mengakses dan mengubah setiap elemen, atribut, dan potongan teks pada sebuah halaman.

Saat Anda mengklik sebuah tombol dan halaman diperbarui tanpa penyegaran (refresh), Anda sedang melihat manipulasi DOM secara langsung.

Berikut adalah cara melakukan operasi CRUD (Create, Read, Update, Delete).

  1. Read: Mengakses Elemen Gunakan metode-metode ini untuk menemukan elemen pada halaman Anda:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Create: Membuat Elemen Baru Anda dapat menghasilkan elemen HTML baru menggunakan JavaScript.
  • createElement(): Membuat tag baru 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 target tertentu.
  • after(): Menyisipkan elemen setelah target tertentu.
  • insertBefore(): Menempatkan elemen baru sebelum anak yang sudah ada.
  1. Update: Mengubah Konten Modifikasi apa yang dilihat pengguna di layar:
  • innerText: Memperbarui hanya teks yang terlihat.
  • textContent: Memperbarui semua teks, termasuk teks yang tersembunyi.
  • innerHTML: Memperbarui konten dan memungkinkan Anda untuk menambahkan tag HTML.
  1. Attributes: Mengelola Properti Atribut menambahkan informasi ekstra ke tag Anda.
  • setAttribute(): Mengatur nilai baru untuk sebuah atribut. Perlu dicatat bahwa ini akan menggantikan nilai lama.
  • getAttribute(): Mendapatkan nilai saat ini.
  • removeAttribute(): Menghapus atribut.
  • hasAttribute(): Memeriksa apakah sebuah atribut ada.

Tips pro: Gunakan classList.add() untuk menambahkan class tanpa menghapus class yang sudah ada. Gunakan setAttribute() untuk atribut kustom.

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

Ringkasan Alur CRUD:

  • Create: document.createElement("p")
  • Update: p.innerText = "Hello"
  • Read: document.getElementById("p")
  • Delete: p.remove()

Menguasai metode-metode ini memungkinkan Anda membangun alat interaktif seperti daftar tugas (to-do list), kalkulator, dan validator formulir. Ini adalah langkah penting menuju pembelajaran framework web modern.

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

Komunitas belajar opsional: https://t.me/GyaanSetuAi