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