DOM CRUD ఆపరేషన్లు
Document Object Model (DOM) అనేది బ్రౌజర్లు HTMLని ఎలా సూచిస్తాయో తెలియజేస్తుంది. ఇది ప్రతి ఎలిమెంట్, ఆట్రిబ్యూట్ మరియు టెక్స్ట్ భాగాన్ని ఒక ఆబ్జెక్ట్గా మారుస్తుంది. స్క్రీన్పై మీరు చూసే అంశాలను మార్చడానికి JavaScript ఈ ఆబ్జెక్ట్లను ఉపయోగిస్తుంది.
మీరు ఒక బటన్ను క్లిక్ చేసినప్పుడు, పేజీ రిఫ్రెష్ అవ్వకుండానే అప్డేట్ అయితే, JavaScript DOMని మారుస్తోందని అర్థం.
మీరు ఈ మెథడ్స్ ద్వారా 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()
ఈ మెథడ్స్లో ప్రావీణ్యం సంపాదించడం ద్వారా మీరు టూ-డూ లిస్ట్లు లేదా క్యాలిక్యులేటర్ల వంటి ఇంటరాక్టివ్ యాప్లను నిర్మించవచ్చు. ఇది ఫ్రంట్-ఎండ్ డెవలప్మెంట్కు ఒక ముఖ్యమైన నైపుణ్యం.
మూలం: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka