DOM CRUD പ്രവർത്തനങ്ങൾ
ഡോക്യുമെന്റ് ഒബ്ജക്റ്റ് മോഡൽ (DOM) എന്നത് ബ്രൗസറുകൾ HTML-നെ പ്രതിനിധീകരിക്കുന്ന രീതിയാണ്. ഇത് ഓരോ എലമെന്റിനെയും, അറ്റ്രിബ്യൂട്ടിനെയും, ടെക്സ്റ്റ് ഭാഗങ്ങളെയും ഒരു ഒബ്ജക്റ്റാക്കി മാറ്റുന്നു. സ്ക്രീനിൽ നിങ്ങൾ കാണുന്ന കാര്യങ്ങൾ മാറ്റുന്നതിനായി ജാവാസ്ക്രിപ്റ്റ് ഈ ഒബ്ജക്റ്റുകൾ ഉപയോഗിക്കുന്നു.
നിങ്ങൾ ഒരു ബട്ടൺ ക്ലിക്ക് ചെയ്യുമ്പോൾ പേജ് റീഫ്രഷ് ചെയ്യാതെ തന്നെ അപ്ഡേറ്റ് ആകുന്നുണ്ടെങ്കിൽ, ജാവാസ്ക്രിപ്റ്റ് DOM മാറ്റം വരുത്തുന്നു എന്നാണ് അർത്ഥം.
ഈ മെത്തേഡുകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് CRUD (Create, Read, Update, Delete) പ്രവർത്തനങ്ങൾ ചെയ്യാൻ കഴിയും.
- എലമെന്റുകളെ ആക്സസ് ചെയ്യുക (Read) എന്തെങ്കിലും മാറ്റം വരുത്തണമെങ്കിൽ, ആദ്യം അത് കണ്ടെത്തണം. ഈ മെത്തേഡുകൾ ഉപയോഗിക്കുക:
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
- എലമെന്റുകൾ നിർമ്മിക്കുക (Create) ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് പുതിയ 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 പ്രവാഹത്തിന്റെ (flow) സംഗ്രഹം:
- Create:
createElement() - Update:
innerText = "New text" - Add:
appendChild() - Delete:
remove()
ഈ മെത്തേഡുകളിൽ വൈദഗ്ധ്യം നേടുന്നത് വഴി ടൂ-ഡൂ ലിസ്റ്റുകൾ അല്ലെങ്കിൽ കാൽക്കുലേറ്ററുകൾ പോലുള്ള ഇന്ററാക്ടീവ് ആപ്പുകൾ നിർമ്മിക്കാൻ നിങ്ങൾക്ക് സാധിക്കും. ഫ്രണ്ട്-എൻഡ് ഡെവലപ്മെന്റിൽ ഇത് വളരെ പ്രധാനപ്പെട്ട ഒരു നൈപുണ്യമാണ്.
ഉറവിടം: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka