TypeScript में DOM हेरफेर

यह लेख TypeScript में DOM हेरफेर की व्याख्या करता है।

आप सीखेंगे कि DOM तत्वों के साथ कैसे हेरफेर करना है, और कोड उदाहरणों के माध्यम से DOM पेड़ से तत्व जोड़ना या हटाना कैसे है।

YouTube Video

TypeScript में DOM हेरफेर

TypeScript में DOM हेरफेर JavaScript के समान किया जाता है, लेकिन TypeScript प्रकार जाँच प्रदान करता है, जिससे संचालन अधिक सुरक्षित होते हैं। DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) एक ऑब्जेक्ट मॉडल है जिसका उपयोग प्रोग्रामेटिक रूप से HTML और XML दस्तावेज़ों में हेरफेर करने के लिए किया जाता है। यह आपको ब्राउज़र में प्रदर्शित पृष्ठों तक पहुंचने, तत्व जोड़ने या हटाने, या शैलियों को बदलने की अनुमति देता है।

आइए TypeScript का उपयोग करके DOM में हेरफेर करने के लिए बुनियादी विधियों का परिचय दें।

DOM तत्व प्राप्त करना

HTML तत्व प्राप्त करने के लिए document ऑब्जेक्ट का उपयोग करें। निम्नलिखित विधियाँ सामान्यतः उपयोग की जाती हैं:।

1. document.getElementById document.getElementById निर्दिष्ट ID विशेषता वाले तत्व को प्राप्त करता है।

1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}

• document.getElementById निर्दिष्ट ID वाले तत्व को प्राप्त करता है और यदि यह मौजूद है तो इसकी सामग्री तक पहुँचने की अनुमति देता है।

2. document.querySelector document.querySelector CSS चयनकर्ता से मेल खाने वाले पहले तत्व को प्राप्त करता है।

1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}

• document.querySelector निर्दिष्ट CSS चयनकर्ता से मेल खाने वाले पहले तत्व को प्राप्त करता है और यदि यह मौजूद है तो उसकी सामग्री तक पहुँचने की अनुमति देता है।

3. document.querySelectorAll document.querySelectorAll CSS चयनकर्ता से मेल खाने वाले सभी तत्वों को प्राप्त करता है।

1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));

• document.querySelectorAll निर्दिष्ट CSS चयनकर्ता से मेल खाने वाले सभी तत्वों को प्राप्त करता है और आपको पुनरावृत्ति के माध्यम से उनकी सामग्री तक पहुँचने की अनुमति देता है।

तत्व प्रकार अभिकथन

TypeScript में, तत्व के प्रकार को स्पष्ट रूप से घोषित करने से आप अधिक विशिष्ट विधियाँ और गुणों का उपयोग कर सकते हैं।

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}

• as कीवर्ड TypeScript में एक टाइप असर्शन ऑपरेटर है, जिसका उपयोग संकलक को स्पष्ट रूप से यह बताने के लिए किया जाता है कि किसी मान को एक विशिष्ट प्रकार के रूप में माना जाए।
• TypeScript में, आप टाइप असर्शन का उपयोग प्राप्त तत्व को एक विशिष्ट प्रकार के रूप में मानने और उस प्रकार के विशिष्ट गुणों या विधियों तक पहुँचने के लिए कर सकते हैं।

DOM में हेरफेर करना

DOM में हेरफेर तत्वों के गुणों के माध्यम से किया जाता है। यह आपको टेक्स्ट या विशेषताओं में बदलाव, शैलियों को लागू करने और प्रदर्शित सामग्री को अपडेट करने को लचीले तरीके से नियंत्रित करने की अनुमति देता है।

1. तत्व के पाठ को बदलना

   आप textContent या innerHTML का उपयोग करके किसी तत्व के पाठ या HTML को बदल सकते हैं।

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}

• आप किसी तत्व के textContent या innerHTML का उपयोग इसके प्रदर्शित पाठ या HTML सामग्री को बदलने के लिए कर सकते हैं।

2. तत्व की शैली बदलना

   आप तत्व के style गुण का उपयोग करके इनलाइन शैलियों को संशोधित कर सकते हैं।

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}

• यह कोड एक विशिष्ट तत्व प्राप्त करता है, उसके पाठ का रंग नीला करता है और फोंट का आकार 20px सेट करता है।

3. तत्व की विशेषताओं को बदलना

   यदि आप किसी तत्व की विशेषताओं को बदलना चाहते हैं, तो setAttribute का उपयोग करें।

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}

• यह कोड पृष्ठ पर पहले लिंक तत्व के href गुण को https://example.com में बदलता है।

4. तत्व की कक्षाओं में हेरफेर करना

   तत्व कक्षाओं को जोड़ने या हटाने के लिए classList का उपयोग करें।

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}

• यह कोड किसी विशेष तत्व में active क्लास जोड़ता है और inactive क्लास को हटाता है।

DOM तत्व जोड़ना और हटाना

आप नए तत्व जोड़ सकते हैं या मौजूदा तत्वों को हटा सकते हैं। यह उपयोगकर्ता की क्रियाओं या एप्लिकेशन की स्थिति के अनुसार पृष्ठ संरचना को गतिशील रूप से बदलना संभव बनाता है।

1. नए तत्व बनाना और जोड़ना

   नया तत्व बनाने और उसे DOM में जोड़ने के लिए document.createElement का उपयोग करें।

1const newDiv = document.createElement('div');
2newDiv.textContent = 'New Element';  // Set the text content to 'New Element'
3document.body.appendChild(newDiv);  // Add the new element to the body

• यह कोड एक नया <div> तत्व बनाता है, उसमें पाठ सेट करता है और उसे पृष्ठ के <body> में जोड़ता है।

2. तत्व हटाना

   किसी तत्व को हटाने के लिए removeChild या remove विधियों का उपयोग करें।

 1const parentElement = document.getElementById('parentElement');
 2const childElement = document.getElementById('childElement');
 3if (parentElement && childElement) {
 4    parentElement.removeChild(childElement); // Remove the child element
 5}
 6
 7// Alternatively
 8const element = document.getElementById('myElement');
 9if (element) {
10    element.remove();  // Remove the element itself
11}

• यह कोड दिखाता है कि कैसे किसी विशेष चाइल्ड तत्व को उसके पैरेंट से हटाया जाए और स्वयं तत्व को सीधे हटाया जाए।

इवेंट जोड़ना

TypeScript में, आप तत्वों पर इवेंट श्रोता जोड़ सकते हैं ताकि उपयोगकर्ता के इंटरैक्शन के आधार पर क्रियाओं का प्रदर्शन किया जा सके।

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', () => {
4        console.log('Button was clicked');  // Log when the button is clicked
5    });
6}

• यह कोड एक इवेंट लिस्नर जोड़ता है जो बटन क्लिक होने पर कंसोल में एक संदेश दिखाता है।
• addEventListener का उपयोग करके आप क्लिक, माउस मूवमेंट, और कीबोर्ड इनपुट जैसे विभिन्न इवेंट्स को सुन सकते हैं और संभाल सकते हैं।

TypeScript में DOM हेरफेर के लिए ध्यान देने योग्य बिंदु

TypeScript के साथ DOM में हेरफेर करते समय, तत्व प्रकार की परिभाषाओं और 'null' जांचों पर ध्यान देना त्रुटियों को रोकने में मदद कर सकता है और आपको मजबूत कोड लिखने में सक्षम बनाता है।

1. शून्य जांच

   क्योंकि कोई DOM तत्व मौजूद नहीं हो सकता है, इसलिए TypeScript में तत्वों पर हेरफेर करने से पहले शून्यता की जांच करने की सिफारिश की जाती है।

2. स्पष्ट प्रकार अभिकथन

   जब किसी विशिष्ट तत्व (जैसे, HTMLInputElement) पर काम कर रहे हों, तो आमतौर पर as का उपयोग करके प्रकार निर्दिष्ट करना और value जैसे तत्व-विशिष्ट गुणों का उपयोग करना सामान्य है।

इन सभी बातों को ध्यान में रखते हुए, TypeScript के साथ DOM हेरफेर आपको JavaScript की लचीलेपन और TypeScript की प्रकार सुरक्षा को मिलाकर अधिक सुरक्षित और अनुमानित कोड लिखने की अनुमति देता है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video