Operesheni za CRUD za DOM

Document Object Model (DOM) ndivyo vivinjari vinavyowasilisha HTML. Inageuza kila kipengele (element), sifa (attribute), na kipande cha maandishi kuwa kitu (object). JavaScript hutumia vitu hivi kubadilisha kile unachokiona kwenye skrini.

Unapobonyeza kitufe na ukurasa ukajisasisha bila kuhitaji kuurefresh, JavaScript inakuwa inabadilisha DOM.

Unaweza kufanya operesheni za CRUD (Create, Read, Update, Delete) kwa kutumia njia (methods) hizi.

  1. Kupata Vipengele (Read) Ili kubadilisha kitu, lazima kwanza ukipate. Tumia njia hizi:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Kutengeneza Vipengele (Create) Unaweza kutengeneza vipengele vipya vya HTML kwa kutumia JavaScript.
  • createElement("tagName") inatengeneza kipengele kwenye kumbukumbu (memory).
  • append() inaongeza maudhui mwishoni mwa mzazi (parent).
  • appendChild() inaongeza node moja kama mtoto wa mwisho.
  • prepend() inaongeza maudhui mwanzoni mwa mzazi.
  • before() inaingiza kipengele kabla ya kipengele fulani.
  • after() inaingiza kipengele baada ya kipengele fulani.
  • insertBefore() inaweka kipengele kabla ya mtoto fulani.

Kumbuka: Kipengele hubaki kwenye kumbukumbu hadi ukiongeza kwenye ukurasa.

  1. Kusasisha Vipengele (Update) Unaweza kubadilisha maudhui yaliyopo kwa kutumia sifa (properties) hizi:
  • innerText: Inabadilisha maandishi yanayoonekana tu.
  • textContent: Inabadilisha maandishi yote, ikiwemo maandishi yaliyofichwa.
  • innerHTML: Inabadilisha maudhui na inakuwezesha kuongeza lebo (HTML tags).
  1. Kufanya Kazi na Sifa (Attributes) (Update) Sifa (attributes) hutoa maelezo ya ziada kuhusu vipengele.
  • setAttribute(name, value): Inaset au inabadilisha sifa.
  • getAttribute(name): Inachukua thamani ya sifa.
  • removeAttribute(name): Inafuta sifa.
  • hasAttribute(name): Inakagua ikiwa sifa ipo.

Kidokezo: Tumia classList.add() kuongeza class bila kufuta zile za zamani. setAttribute() inabadilisha thamani nzima.

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

Muhtasari wa mtiririko wa CRUD:

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

Kufahamu njia hizi kunakuwezesha kutengeneza programu zinazoingiliana (interactive apps) kama vile orodha za mambo ya kufanya (to-do lists) au kimitambo ya hesabu (calculators). Hii ni ujuzi muhimu kwa maendeleo ya upande wa mbele (front-end development).

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