DOM CRUD ఆపరేషన్లు
Document Object Model (DOM) అనేది మీ HTML కోసం ఒక ట్రీ స్ట్రక్చర్ (tree structure). పేజీలోని ప్రతి ఎలిమెంట్, ఆట్రిబ్యూట్ మరియు టెక్స్ట్ భాగాన్ని యాక్సెస్ చేయడానికి మరియు మార్చడానికి జావాస్క్రిప్ట్ (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 ఫ్లో సమ్మరీ:
- Create:
document.createElement("p") - Update:
p.innerText = "Hello" - Read:
document.getElementById("p") - Delete:
p.remove()
ఈ మెథడ్స్లో ప్రావీణ్యం సంపాదించడం ద్వారా మీరు టూ-డూ లిస్ట్లు (to-do lists), కాలిక్యులేటర్లు మరియు ఫారమ్ వ్యాలిడేటర్ల వంటి ఇంటరాక్టివ్ టూల్స్ను నిర్మించవచ్చు. ఆధునిక వెబ్ ఫ్రేమ్వర్క్లను నేర్చుకోవడానికి ఇది ఒక ముఖ్యమైన అడుగు.
మూలం: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka
ఐచ్ఛిక అభ్యాస కమ్యూనిటీ: https://t.me/GyaanSetuAi