DOM CRUD ઓપરેશન્સ

Document Object Model (DOM) એ તમારા HTML માટે એક ટ્રી સ્ટ્રક્ચર (tree structure) છે. JavaScript તેનો ઉપયોગ પેજ પરના દરેક એલિમેન્ટ (element), એટ્રિબ્યુટ (attribute) અને ટેક્સ્ટને એક્સેસ કરવા અને બદલવા માટે કરે છે.

જ્યારે તમે બટન પર ક્લિક કરો છો અને પેજ રિફ્રેશ થયા વગર અપડેટ થાય છે, ત્યારે તમે DOM મેનિપ્યુલેશન (manipulation) કાર્યરત જુઓ છો.

અહીં તમે CRUD (Create, Read, Update, Delete) ઓપરેશન્સ કેવી રીતે કરી શકો છો તે આપેલ છે.

  1. Read: એલિમેન્ટ્સ એક્સેસ કરવા (Accessing Elements) તમારા પેજ પર એલિમેન્ટ્સ શોધવા માટે આ મેથડ્સનો ઉપયોગ કરો:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Create: નવા એલિમેન્ટ્સ બનાવવા (Making New Elements) તમે JavaScript નો ઉપયોગ કરીને નવા HTML એલિમેન્ટ્સ બનાવી શકો છો.
  • createElement(): મેમરીમાં નવું ટેગ બનાવે છે.
  • append(): પેરેન્ટના અંતમાં કન્ટેન્ટ ઉમેરે છે.
  • appendChild(): સિંગલ નોડને છેલ્લા ચાઇલ્ડ તરીકે ઉમેરે છે.
  • prepend(): પેરેન્ટની શરૂઆતમાં કન્ટેન્ટ ઉમેરે છે.
  • before(): ચોક્કસ ટાર્ગેટની પહેલા એલિમેન્ટ ઇન્સર્ટ કરે છે.
  • after(): ચોક્કસ ટાર્ગેટની પછી એલિમેન્ટ ઇન્સર્ટ કરે છે.
  • insertBefore(): હાલના ચાઇલ્ડની પહેલા નવો એલિમેન્ટ મૂકે છે.
  1. Update: કન્ટેન્ટ બદલવું (Changing Content) યુઝર્સ સ્ક્રીન પર જે જુએ છે તેમાં ફેરફાર કરો:
  • innerText: ફક્ત દેખાતા ટેક્સ્ટને અપડેટ કરે છે.
  • textContent: છુપાયેલા ટેક્સ્ટ સહિત તમામ ટેક્સ્ટને અપડેટ કરે છે.
  • innerHTML: કન્ટેન્ટ અપડેટ કરે છે અને તમને HTML ટેગ્સ ઉમેરવાની મંજૂરી આપે છે.
  1. Attributes: પ્રોપર્ટીઝ મેનેજ કરવી (Managing Properties) એટ્રિબ્યુટ્સ તમારા ટેગ્સમાં વધારાની માહિતી ઉમેરે છે.
  • setAttribute(): એટ્રિબ્યુટ માટે નવી વેલ્યુ સેટ કરે છે. નોંધો કે આ જૂની વેલ્યુને બદલી નાખશે.
  • getAttribute(): વર્તમાન વેલ્યુ મેળવે છે.
  • removeAttribute(): એટ્રિબ્યુટ ડિલીટ કરે છે.
  • hasAttribute(): એટ્રિબ્યુટ અસ્તિત્વ ધરાવે છે કે નહીં તે તપાસે છે.

Pro tip: તમારી હાલની ક્લાસ ડિલીટ કર્યા વગર ક્લાસ ઉમેરવા માટે classList.add() નો ઉપયોગ કરો. કસ્ટમ એટ્રિબ્યુટ્સ માટે setAttribute() નો ઉપયોગ કરો.

  1. Delete: એલિમેન્ટ્સ દૂર કરવા (Removing Elements) પેજ પરથી એલિમેન્ટ દૂર કરવા માટે, આનો ઉપયોગ કરો:
  • remove()

CRUD ફ્લોનો સારાંશ (Summary of CRUD Flow):

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

આ મેથડ્સમાં માસ્ટરી મેળવવાથી તમે ટુ-ડૂ લિસ્ટ (to-do lists), કેલ્ક્યુલેટર અને ફોર્મ વેલિડેટર્સ જેવા ઇન્ટરેક્ટિવ ટૂલ્સ બનાવી શકશો. આધુનિક વેબ ફ્રેમવર્ક શીખવા તરફનું તે એક મહત્વપૂર્ણ પગલું છે.

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

Optional learning community: https://t.me/GyaanSetuAi