DOM CRUD કામગીરીઓ
ડોક્યુમેન્ટ ઓબ્જેક્ટ મોડલ (DOM) એ બ્રાઉઝર દ્વારા HTML ને રજૂ કરવાની રીત છે. તે દરેક એલિમેન્ટ, એટ્રિબ્યુટ અને ટેક્સ્ટના ટુકડાને ઓબ્જેક્ટમાં ફેરવે છે. JavaScript આ ઓબ્જેક્ટ્સનો ઉપયોગ સ્ક્રીન પર તમે જે જુઓ છો તેમાં ફેરફાર કરવા માટે કરે છે.
જ્યારે તમે બટન પર ક્લિક કરો છો અને પેજ રિફ્રેશ થયા વગર અપડેટ થાય છે, ત્યારે JavaScript DOM માં ફેરફાર કરી રહ્યું હોય છે.
તમે આ પદ્ધતિઓ (methods) દ્વારા CRUD (Create, Read, Update, Delete) કામગીરી કરી શકો છો.
- એલિમેન્ટ્સને એક્સેસ કરવા (Read) કંઈક બદલવા માટે, તમારે પહેલા તેને શોધવું પડશે. આ પદ્ધતિઓનો ઉપયોગ કરો:
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
- એલિમેન્ટ્સ બનાવવા (Create) તમે JavaScript નો ઉપયોગ કરીને નવા HTML એલિમેન્ટ્સ બનાવી શકો છો.
createElement("tagName")મેમરીમાં એલિમેન્ટ બનાવે છે.append()પેરેન્ટના અંતમાં કન્ટેન્ટ ઉમેરે છે.appendChild()સિંગલ નોડને છેલ્લા ચાઇલ્ડ તરીકે ઉમેરે છે.prepend()પેરેન્ટની શરૂઆતમાં કન્ટેન્ટ ઉમેરે છે.before()કોઈ ચોક્કસ આઇટમ પહેલા એલિમેન્ટ ઇન્સર્ટ કરે છે.after()કોઈ ચોક્કસ આઇટમ પછી એલિમેન્ટ ઇન્સર્ટ કરે છે.insertBefore()કોઈ ચોક્કસ ચાઇલ્ડ પહેલા એલિમેન્ટ મૂકે છે.
નોંધ: જ્યાં સુધી તમે તેને પેજમાં ઉમેરતા નથી ત્યાં સુધી એલિમેન્ટ મેમરીમાં રહે છે.
- એલિમેન્ટ્સ અપડેટ કરવા (Update) તમે આ પ્રોપર્ટીઝનો ઉપયોગ કરીને હાલનું કન્ટેન્ટ બદલી શકો છો:
- innerText: ફક્ત દેખાતા ટેક્સ્ટમાં ફેરફાર કરે છે.
- textContent: છુપાયેલા ટેક્સ્ટ સહિત તમામ ટેક્સ્ટમાં ફેરફાર કરે છે.
- innerHTML: કન્ટેન્ટ બદલે છે અને તમને HTML ટેગ્સ ઉમેરવાની મંજૂરી આપે છે.
- એટ્રિબ્યુટ્સ સાથે કામ કરવું (Update) એટ્રિબ્યુટ્સ એલિમેન્ટ્સ વિશે વધારાની માહિતી આપે છે.
- setAttribute(name, value): એટ્રિબ્યુટ સેટ કરે છે અથવા બદલે છે.
- getAttribute(name): એટ્રિબ્યુટની વેલ્યુ મેળવે છે.
- removeAttribute(name): એટ્રિબ્યુટ ડિલીટ કરે છે.
- hasAttribute(name): એટ્રિબ્યુટ અસ્તિત્વ ધરાવે છે કે નહીં તે તપાસે છે.
પ્રો ટિપ: જૂની ક્લાસ કાઢી નાખ્યા વગર નવી ક્લાસ ઉમેરવા માટે classList.add() નો ઉપયોગ કરો. setAttribute() આખી વેલ્યુ બદલી નાખે છે.
- એલિમેન્ટ્સ દૂર કરવા (Delete) પેજ પરથી એલિમેન્ટ ડિલીટ કરવા માટે, આનો ઉપયોગ કરો:
- remove()
CRUD ફ્લોનો સારાંશ:
- Create:
createElement() - Update:
innerText = "New text" - Add:
appendChild() - Delete:
remove()
આ પદ્ધતિઓમાં નિપુણતા મેળવવાથી તમે ટુ-ડૂ લિસ્ટ (to-do lists) અથવા કેલ્ક્યુલેટર જેવી ઇન્ટરેક્ટિવ એપ્સ બનાવી શકો છો. ફ્રન્ટ-એન્ડ ડેવલપમેન્ટ માટે આ એક મહત્વપૂર્ણ કૌશલ્ય છે.
સ્ત્રોત: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka