DOM CRUD ऑपरेशन्स
Document Object Model (DOM) आपके HTML के लिए एक ट्री स्ट्रक्चर है। JavaScript इसका उपयोग पेज के हर एलिमेंट, एट्रिब्यूट और टेक्स्ट को एक्सेस करने और बदलने के लिए करता है।
जब आप किसी बटन पर क्लिक करते हैं और पेज बिना रिफ्रेश हुए अपडेट हो जाता है, तो आप DOM मैनिपुलेशन को काम करते हुए देखते हैं।
यहाँ बताया गया है कि आप CRUD (Create, Read, Update, Delete) ऑपरेशन्स कैसे कर सकते हैं।
- Read: एलिमेंट्स को एक्सेस करना अपने पेज पर एलिमेंट्स खोजने के लिए इन मेथड्स का उपयोग करें:
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
- Create: नए एलिमेंट्स बनाना आप JavaScript का उपयोग करके नए HTML एलिमेंट्स बना सकते हैं।
- createElement(): मेमोरी में एक नया टैग बनाता है।
- append(): पैरेंट के अंत में कंटेंट जोड़ता है।
- appendChild(): एक सिंगल नोड को आखिरी चाइल्ड के रूप में जोड़ता है।
- prepend(): पैरेंट की शुरुआत में कंटेंट जोड़ता है।
- before(): किसी विशिष्ट टारगेट से पहले एक एलिमेंट डालता है।
- after(): किसी विशिष्ट टारगेट के बाद एक एलिमेंट डालता है।
- insertBefore(): एक नए एलिमेंट को मौजूदा चाइल्ड से पहले रखता है।
- Update: कंटेंट बदलना स्क्रीन पर यूजर्स को दिखने वाली चीज़ों को मॉडिफाई करें:
- innerText: केवल दिखने वाले टेक्स्ट को अपडेट करता है।
- textContent: छिपे हुए टेक्स्ट सहित सभी टेक्स्ट को अपडेट करता है।
- 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()
इन मेथड्स में महारत हासिल करने से आप टू-डू लिस्ट, कैलकुलेटर और फॉर्म वैलिडेटर जैसे इंटरैक्टिव टूल्स बना सकते हैं। आधुनिक वेब फ्रेमवर्क्स सीखने की दिशा में यह एक महत्वपूर्ण कदम है।
स्रोत: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka
वैकल्पिक लर्निंग कम्युनिटी: https://t.me/GyaanSetuAi