Operesheni za CRUD za DOM

Document Object Model (DOM) ni muundo wa mti (tree structure) kwa ajili ya HTML yako. JavaScript huitumia ili kufikia na kubadilisha kila kipengele (element), sifa (attribute), na sehemu ya maandishi kwenye ukurasa.

Unapobonyeza kitufe na ukurasa unajisasisha bila kuhitaji kuurefresh, unaona ubadilishaji wa DOM (DOM manipulation) ukifanya kazi.

Hivi ndivyo unavyofanya operesheni za CRUD (Create, Read, Update, Delete).

  1. Read: Kufikia Vipengele Tumia njia hizi ili kupata vipengele kwenye ukurasa wako:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Create: Kutengeneza Vipengele Vipya Unaweza kutengeneza vipengele vipya vya HTML kwa kutumia JavaScript.
  • createElement(): Hutengeneza tag mpya kwenye kumbukumbu (memory).
  • append(): Huongeza maudhui mwishoni mwa kipengele mzazi (parent).
  • appendChild(): Huongeza node moja kama mtoto wa mwisho.
  • prepend(): Huongeza maudhui mwanzoni mwa kipengele mzazi.
  • before(): Huingiza kipengele kabla ya lengo fulani.
  • after(): Huingiza kipengele baada ya lengo fulani.
  • insertBefore(): Huweka kipengele kipya kabla ya mtoto aliyepo.
  1. Update: Kubadilisha Maudhui Badilisha kile ambacho watumiaji wanaona kwenye skrini:
  • innerText: Husasisha maandishi yanayoonekana tu.
  • textContent: Husasisha maandishi yote, ikiwa ni pamoja na maandishi yaliyofichwa.
  • innerHTML: Husasisha maudhui na kukuruhusu kuongeza tag za HTML.
  1. Attributes: Kusimamia Sifa Attributes huongeza taarifa za ziada kwenye tag zako.
  • setAttribute(): Huweka thamani mpya kwa sifa fulani. Kumbuka kuwa hii inachukua nafasi ya thamani ya zamani.
  • getAttribute(): Hupata thamani ya sasa.
  • removeAttribute(): Hufuta sifa.
  • hasAttribute(): Hukagua ikiwa sifa fulani ipo.

Kidokezo: Tumia classList.add() kuongeza class bila kufuta zile ulizo nazo sasa. Tumia setAttribute() kwa sifa za kipekee (custom attributes).

  1. Delete: Kuondoa Vipengele Ili kuondoa kipengele kwenye ukurasa, tumia:
  • remove()

Muhtasari wa Mtiririko wa CRUD:

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

Kufahamu njia hizi kunakuwezesha kutengeneza zana zinazoingiliana (interactive tools) kama vile orodha za mambo ya kufanya (to-do lists), kikokotozi (calculators), na wathibitishaji wa fomu (form validators). Ni hatua muhimu kuelekea kujifunza mifumo ya kisasa ya wavuti (modern web frameworks).

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

Jumuiya ya hiari ya kujifunza: https://t.me/GyaanSetuAi