DOM CRUD പ്രവർത്തനങ്ങൾ
ഡോക്യുമെന്റ് ഒബ്ജക്റ്റ് മോഡൽ (DOM) എന്നത് നിങ്ങളുടെ HTML-ന് വേണ്ടിയുള്ള ഒരു ട്രീ സ്ട്രക്ചർ (tree structure) ആണ്. ഒരു പേജിലെ ഓരോ എലമെന്റ് (element), അറ്റ്രിബ്യൂട്ട് (attribute), ടെക്സ്റ്റ് എന്നിവയും ആക്സസ് ചെയ്യാനും മാറ്റം വരുത്താനും ജാവാസ്ക്രിപ്റ്റ് (JavaScript) ഇത് ഉപയോഗിക്കുന്നു.
നിങ്ങൾ ഒരു ബട്ടൺ ക്ലിക്ക് ചെയ്യുമ്പോൾ പേജ് റീഫ്രഷ് ചെയ്യാതെ തന്നെ അപ്ഡേറ്റ് ആകുന്നുണ്ടെങ്കിൽ, അവിടെ DOM മാനിപുലേഷൻ (manipulation) പ്രവർത്തിക്കുന്നു എന്ന് മനസ്സിലാക്കാം.
CRUD (Create, Read, Update, Delete) പ്രവർത്തനങ്ങൾ എങ്ങനെ ചെയ്യാമെന്ന് താഴെ നൽകുന്നു.
- Read: എലമെന്റുകൾ ആക്സസ് ചെയ്യുക നിങ്ങളുടെ പേജിലെ എലമെന്റുകൾ കണ്ടെത്താൻ ഈ മെത്തേഡുകൾ ഉപയോഗിക്കുക:
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
- Create: പുതിയ എലമെന്റുകൾ നിർമ്മിക്കുക ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് പുതിയ HTML എലമെന്റുകൾ നിർമ്മിക്കാൻ കഴിയും.
- createElement(): മെമ്മറിയിൽ ഒരു പുതിയ ടാഗ് നിർമ്മിക്കുന്നു.
- append(): ഒരു പാരന്റ് എലമെന്റിന്റെ അവസാനം ഉള്ളടക്കം ചേർക്കുന്നു.
- appendChild(): ഒരു സിംഗിൾ നോഡിനെ അവസാനത്തെ ചൈൽഡ് ആയി ചേർക്കുന്നു.
- prepend(): ഒരു പാരന്റ് എലമെന്റിന്റെ തുടക്കത്തിൽ ഉള്ളടക്കം ചേർക്കുന്നു.
- before(): ഒരു പ്രത്യേക ടാർഗറ്റിന് മുൻപായി ഒരു എലമെന്റ് ചേർക്കുന്നു.
- after(): ഒരു പ്രത്യേക ടാർഗറ്റിന് ശേഷമായി ഒരു എലമെന്റ് ചേർക്കുന്നു.
- insertBefore(): നിലവിലുള്ള ഒരു ചൈൽഡിന് മുൻപായി പുതിയൊരു എലമെന്റ് വെക്കുന്നു.
- Update: ഉള്ളടക്കം മാറ്റുക ഉപയോക്താക്കൾ സ്ക്രീനിൽ കാണുന്ന കാര്യങ്ങളിൽ മാറ്റം വരുത്തുക:
- innerText: കാണാൻ കഴിയുന്ന ടെക്സ്റ്റ് മാത്രം അപ്ഡേറ്റ് ചെയ്യുന്നു.
- textContent: മറഞ്ഞിരിക്കുന്ന ടെക്സ്റ്റ് ഉൾപ്പെടെ എല്ലാ ടെക്സ്റ്റും അപ്ഡേറ്റ് ചെയ്യുന്നു.
- innerHTML: ഉള്ളടക്കം അപ്ഡേറ്റ് ചെയ്യാനും HTML ടാഗുകൾ ചേർക്കാനും അനുവദിക്കുന്നു.
- Attributes: പ്രോപ്പർട്ടികൾ കൈകാര്യം ചെയ്യുക ടാഗുകൾക്ക് അധിക വിവരങ്ങൾ നൽകാൻ അറ്റ്രിബ്യൂട്ടുകൾ സഹായിക്കുന്നു.
- setAttribute(): ഒരു അറ്റ്രിബ്യൂട്ടിന് പുതിയ വാല്യൂ നൽകുന്നു. ഇത് പഴയ വാല്യൂവിനെ മാറ്റിസ്ഥാപിക്കുമെന്ന കാര്യം ശ്രദ്ധിക്കുക.
- getAttribute(): നിലവിലുള്ള വാല്യൂ ലഭിക്കുന്നു.
- removeAttribute(): ഒരു അറ്റ്രിബ്യൂട്ട് നീക്കം ചെയ്യുന്നു.
- hasAttribute(): ഒരു അറ്റ്രിബ്യൂട്ട് ഉണ്ടോ എന്ന് പരിശോധിക്കുന്നു.
Pro tip: നിലവിലുള്ള ക്ലാസുകൾ നീക്കം ചെയ്യാതെ പുതിയ ക്ലാസ് ചേർക്കാൻ classList.add() ഉപയോഗിക്കുക. കസ്റ്റം അറ്റ്രിബ്യൂട്ടുകൾക്കായി setAttribute() ഉപയോഗിക്കുക.
- Delete: എലമെന്റുകൾ നീക്കം ചെയ്യുക പേജിൽ നിന്ന് ഒരു എലമെന്റ് നീക്കം ചെയ്യാൻ ഇത് ഉപയോഗിക്കുക:
- remove()
CRUD പ്രവാഹത്തിന്റെ സംഗ്രഹം (Summary):
- 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