Operasi CRUD DOM

Document Object Model (DOM) ialah struktur pokok untuk HTML anda. JavaScript menggunakannya untuk mengakses dan mengubah setiap elemen, atribut, dan cebisan teks pada sesebuah halaman.

Apabila anda mengklik butang dan halaman dikemas kini tanpa perlu memuat semula (refresh), anda sedang melihat manipulasi DOM sedang berfungsi.

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

  1. Read: Mengakses Elemen Gunakan kaedah ini untuk mencari elemen pada halaman anda:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Create: Mencipta Elemen Baharu Anda boleh menjana elemen HTML baharu menggunakan JavaScript.
  • createElement(): Mencipta tag baharu dalam memori.
  • append(): Menambah kandungan ke penghujung elemen induk (parent).
  • appendChild(): Menambah satu nod sebagai anak terakhir.
  • prepend(): Menambah kandungan ke permulaan elemen induk.
  • before(): Memasukkan elemen sebelum sasaran tertentu.
  • after(): Memasukkan elemen selepas sasaran tertentu.
  • insertBefore(): Meletakkan elemen baharu sebelum anak yang sedia ada.
  1. Update: Mengubah Kandungan Ubah apa yang dilihat pengguna pada skrin:
  • innerText: Mengemas kini teks yang kelihatan sahaja.
  • textContent: Mengemas kini semua teks, termasuk teks yang tersembunyi.
  • innerHTML: Mengemas kini kandungan dan membolehkan anda menambah tag HTML.
  1. Attributes: Mengurus Sifat Atribut menambah maklumat tambahan pada tag anda.
  • setAttribute(): Menetapkan nilai baharu untuk atribut. Perhatikan bahawa ini akan menggantikan nilai lama.
  • getAttribute(): Mendapatkan nilai semasa.
  • removeAttribute(): Memadam atribut.
  • hasAttribute(): Menyemak jika sesuatu atribut wujud.

Tip Pro: Gunakan classList.add() untuk menambah kelas tanpa memadam kelas sedia ada. Gunakan setAttribute() untuk atribut tersuai (custom).

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

Ringkasan Aliran CRUD:

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

Menguasai kaedah-kaedah ini membolehkan anda membina alatan interaktif seperti senarai tugasan (to-do lists), kalkulator, dan pengesah borang (form validators). Ia merupakan langkah penting ke arah mempelajari rangka kerja (framework) web moden.

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

Komuniti pembelajaran pilihan: https://t.me/GyaanSetuAi