DOM CRUD ऑपरेशन्स
Document Object Model (DOM) ही तुमच्या HTML साठी एक ट्री स्ट्रक्चर (tree structure) आहे. JavaScript याचा वापर पेजवरील प्रत्येक एलिमेंट (element), ॲट्रिब्युट (attribute) आणि मजकूर (text) मिळवण्यासाठी आणि बदलण्यासाठी करते.
जेव्हा तुम्ही एखाद्या बटणावर क्लिक करता आणि पेज रिफ्रेश न होता अपडेट होते, तेव्हा तुम्ही प्रत्यक्ष DOM मॅनिप्युलेशन (manipulation) पाहत असता.
CRUD (Create, Read, Update, Delete) ऑपरेशन्स कसे करायचे ते खाली दिले आहे.
- Read: एलिमेंट्स मिळवणे (Accessing Elements) तुमच्या पेजवरील एलिमेंट्स शोधण्यासाठी या मेथड्स (methods) वापरा:
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
- Create: नवीन एलिमेंट्स तयार करणे तुम्ही JavaScript वापरून नवीन HTML एलिमेंट्स तयार करू शकता.
- createElement(): मेमरीमध्ये नवीन टॅग तयार करते.
- append(): पेरेंटच्या (parent) शेवटी मजकूर जोडते.
- appendChild(): शेवटचा चाइल्ड म्हणून एक सिंगल नोड जोडते.
- prepend(): पेरेंटच्या सुरुवातीला मजकूर जोडते.
- before(): एखाद्या विशिष्ट टार्गेटच्या आधी एलिमेंट इन्सर्ट करते.
- after(): एखाद्या विशिष्ट टार्गेटच्या नंतर एलिमेंट इन्सर्ट करते.
- insertBefore(): अस्तित्वात असलेल्या चाइल्डच्या आधी नवीन एलिमेंट ठेवते.
- Update: मजकूर बदलणे युजर्सना स्क्रीनवर जे दिसते त्यात बदल करा:
- innerText: फक्त दिसणारा मजकूर अपडेट करते.
- textContent: लपवलेला मजकूर (hidden text) सह सर्व मजकूर अपडेट करते.
- innerHTML: मजकूर अपडेट करते आणि तुम्हाला HTML टॅग्स जोडण्याची परवानगी देते.
- Attributes: प्रॉपर्टीज मॅनेज करणे ॲट्रिब्युट्स तुमच्या टॅग्समध्ये अतिरिक्त माहिती जोडतात.
- setAttribute(): ॲट्रिब्युटसाठी नवीन व्हॅल्यू सेट करते. लक्षात ठेवा की यामुळे जुनी व्हॅल्यू बदलली जाते.
- getAttribute(): सध्याची व्हॅल्यू मिळवते.
- removeAttribute(): ॲट्रिब्युट काढून टाकते.
- hasAttribute(): ॲट्रिब्युट अस्तित्वात आहे की नाही हे तपासते.
प्रो टिप: सध्याच्या क्लासेसना न काढता नवीन क्लास जोडण्यासाठी classList.add() वापरा. कस्टम ॲट्रिब्युट्ससाठी setAttribute() वापरा.
- Delete: एलिमेंट्स काढून टाकणे पेजवरून एलिमेंट काढण्यासाठी वापरा:
- remove()
CRUD फ्लोचा सारांश:
- Create:
document.createElement("p") - Update:
p.innerText = "Hello" - Read:
document.getElementById("p") - Delete:
p.remove()
या मेथड्समध्ये प्रभुत्व मिळवल्यामुळे तुम्ही टू-डू लिस्ट, कॅल्क्युलेटर आणि फॉर्म व्हॅलिडेटर्स सारखी इंटरअॅक्टिव्ह टूल्स तयार करू शकता. आधुनिक वेब फ्रेमवर्क्स शिकण्याच्या दिशेने हे एक महत्त्वाचे पाऊल आहे.
Source: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka
Optional learning community: https://t.me/GyaanSetuAi