DOM CRUD ऑपरेशन्स
Document Object Model (DOM) द्वारे ब्राउझर HTML दर्शवतात. हे प्रत्येक एलिमेंट, ॲट्रिब्युट आणि मजकुराचे रूपांतर एका ऑब्जेक्टमध्ये करते. स्क्रीनवर तुम्हाला जे दिसते ते बदलण्यासाठी JavaScript या ऑब्जेक्ट्सचा वापर करते.
जेव्हा तुम्ही एखाद्या बटणावर क्लिक करता आणि पेज रिफ्रेश न होता अपडेट होते, तेव्हा JavaScript DOM मध्ये बदल करत असते.
तुम्ही या मेथड्सचा (methods) वापर करून CRUD (Create, Read, Update, Delete) ऑपरेशन्स करू शकता.
- एलिमेंट्स ॲक्सेस करणे (Read) काहीतरी बदलण्यासाठी, तुम्हाला प्रथम ते शोधणे आवश्यक आहे. या मेथड्स वापरा:
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
- एलिमेंट्स तयार करणे (Create) तुम्ही JavaScript वापरून नवीन HTML एलिमेंट्स तयार करू शकता.
createElement("tagName")मेमरीमध्ये एलिमेंट तयार करते.append()पेरेंटच्या (parent) शेवटी मजकूर जोडते.appendChild()एका सिंगल नोडला शेवटच्या चाइल्ड (child) म्हणून जोडते.prepend()पेरेंटच्या सुरुवातीला मजकूर जोडते.before()एखाद्या विशिष्ट आयटमच्या आधी एलिमेंट इन्सर्ट करते.after()एखाद्या विशिष्ट आयटमच्या नंतर एलिमेंट इन्सर्ट करते.insertBefore()एखाद्या विशिष्ट चाइल्डच्या आधी एलिमेंट ठेवते.
टीप: जोपर्यंत तुम्ही एलिमेंट पेजवर जोडत नाही, तोपर्यंत तो मेमरीमध्येच राहतो.
- एलिमेंट्स अपडेट करणे (Update) तुम्ही या प्रॉपर्टीजचा (properties) वापर करून अस्तित्वात असलेला मजकूर बदलू शकता:
innerText: फक्त दिसणारा मजकूर बदलतो.textContent: लपवलेला मजकूर (hidden text) सह सर्व मजकूर बदलतो.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