DOM CRUD செயல்பாடுகள்
Document Object Model (DOM) என்பது உங்கள் HTML-க்கான ஒரு மரம் போன்ற அமைப்பு (tree structure) ஆகும். ஒரு பக்கத்தில் உள்ள ஒவ்வொரு உறுப்பு (element), பண்பு (attribute) மற்றும் உரைத் துண்டையும் (text piece) அணுகவும் மாற்றவும் JavaScript இதைப் பயன்படுத்துகிறது.
நீங்கள் ஒரு பொத்தானைக் கிளிக் செய்யும் போது, பக்கம் புதுப்பிக்கப்படாமல் (refresh) மாறினால், நீங்கள் DOM கையாளுதலை (manipulation) நேரலையில் பார்க்கிறீர்கள் என்று அர்த்தம்.
CRUD (Create, Read, Update, Delete) செயல்பாடுகளை எவ்வாறு செய்வது என்பது இதோ:
- Read: உறுப்புகளை அணுகுதல் (Accessing Elements) உங்கள் பக்கத்தில் உள்ள உறுப்புகளைக் கண்டறிய இந்த முறைகளைப் பயன்படுத்தவும்:
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
- Create: புதிய உறுப்புகளை உருவாக்குதல் (Making New Elements) JavaScript மூலம் நீங்கள் புதிய HTML உறுப்புகளை உருவாக்கலாம்.
- createElement(): நினைவகத்தில் (memory) ஒரு புதிய டேக்-ஐ (tag) உருவாக்குகிறது.
- append(): ஒரு பெற்றோர் (parent) உறுப்பின் இறுதியில் உள்ளடக்கத்தைச் சேர்க்கிறது.
- appendChild(): ஒரு தனி நோடை (node) கடைசி குழந்தையாகச் சேர்க்கிறது.
- prepend(): ஒரு பெற்றோர் உறுப்பின் தொடக்கத்தில் உள்ளடக்கத்தைச் சேர்க்கிறது.
- before(): ஒரு குறிப்பிட்ட இலக்கிற்கு (target) முன்னால் ஒரு உறுப்பைச் சேர்க்கிறது.
- after(): ஒரு குறிப்பிட்ட இலக்கிற்குப் பின்னால் ஒரு உறுப்பைச் சேர்க்கிறது.
- insertBefore(): ஏற்கனவே உள்ள ஒரு குழந்தைக்கு முன்னால் புதிய உறுப்பை வைக்கிறது.
- Update: உள்ளடக்கத்தை மாற்றுதல் (Changing Content) பயனர்கள் திரையில் காண்பதைக் மாற்றியமைக்கவும்:
- innerText: கண்ணுக்குத் தெரியும் உரையை மட்டும் புதுப்பிக்கிறது.
- textContent: மறைக்கப்பட்ட உரை உட்பட அனைத்து உரைகளையும் புதுப்பிக்கிறது.
- innerHTML: உள்ளடக்கத்தைப் புதுப்பிக்கிறது மற்றும் HTML டேக்குகளைச் சேர்க்க அனுமதிக்கிறது.
- Attributes: பண்புகளை நிர்வகித்தல் (Managing Properties) பண்புகள் (Attributes) உங்கள் டேக்குகளுக்கு கூடுதல் தகவல்களைச் சேர்க்கின்றன.
- setAttribute(): ஒரு பண்பிற்குப் புதிய மதிப்பினை அமைக்கிறது. இது பழைய மதிப்பை மாற்றியமைக்கும் என்பதைக் கவனத்தில் கொள்ளவும்.
- getAttribute(): தற்போதைய மதிப்பைப் பெறுகிறது.
- removeAttribute(): ஒரு பண்பை நீக்குகிறது.
- hasAttribute(): ஒரு பண்பு உள்ளதா என்று சரிபார்க்கிறது.
Pro tip: உங்கள் தற்போதைய வகுப்புகளை (classes) நீக்காமல் புதிய வகுப்பைச் சேர்க்க classList.add() ஐப் பயன்படுத்தவும். தனிப்பயன் பண்புகளுக்கு (custom attributes) setAttribute() ஐப் பயன்படுத்தவும்.
- 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 பட்டியல்கள், கால்குலேட்டர்கள் மற்றும் படிவ சரிபார்ப்பாளர்கள் (form validators) போன்ற ஊடாடும் கருவிகளை (interactive tools) நீங்கள் உருவாக்க முடியும். நவீன இணைய கட்டமைப்புகளை (modern web frameworks) கற்பதற்கு இது ஒரு முக்கியமான படியாகும்.
ஆதாரம்: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka
விருப்பத்தேர்வு கற்றல் சமூகம்: https://t.me/GyaanSetuAi