टाइपस्क्रिप्ट में DOM हेरफेर/इवेंट हैंडलिंग के लिए उपयोग की जाने वाली कक्षाएं

इस लेख में, हम टाइपस्क्रिप्ट में DOM हेरफेर/इवेंट हैंडलिंग के लिए उपयोग की जाने वाली कक्षाओं को समझाएंगे।

आप कोड उदाहरणों के माध्यम से Document कक्षा, Element और NodeList कक्षाओं और विभिन्न इवेंट-संबंधित कक्षाओं के बारे में सीख सकते हैं।

YouTube Video

टाइपस्क्रिप्ट में DOM हेरफेर/इवेंट हैंडलिंग के लिए उपयोग की जाने वाली कक्षाएं

टाइपस्क्रिप्ट में DOM हेरफेर और इवेंट हैंडलिंग के लिए, मुख्य रूप से डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) इंटरफेस का उपयोग किया जाता है। DOM हेरफेर और इवेंट हैंडलिंग में, मानक जावास्क्रिप्ट कक्षाओं और इंटरफेस का उपयोग किया जाता है, लेकिन टाइपस्क्रिप्ट में, उनमें टाइप जानकारी जोड़ी जाती है, जो सुरक्षित संचालन को सक्षम बनाती है।

निम्नलिखित में DOM हेरफेर और इवेंट हैंडलिंग में आमतौर पर उपयोग की जाने वाली कक्षाओं और इंटरफेस का वर्णन किया गया है।

DOM हेरफेर के लिए उपयोग की जाने वाली मुख्य कक्षाएं/इंटरफेस

Document

Document एक ऑब्जेक्ट है जो HTML या XML दस्तावेज़ों को दर्शाता है। DOM ट्री तक पहुंचने या तत्वों को खोजने के लिए उपयोग किया जाता है।

कोड उदाहरण

 1// Get the element using getElementById
 2const element = document.getElementById('myElement') as HTMLDivElement | null;
 3if (element) {
 4    element.textContent = 'Hello, TypeScript!';
 5}
 6
 7// querySelector can specify a generic type for more precise typing
 8const button = document.querySelector<HTMLButtonElement>('#myButton');
 9button?.addEventListener('click', () => {
10    console.log('Button clicked!');
11
12    // Create a new element dynamically
13    const newDiv = document.createElement('div');
14    newDiv.textContent = 'New element created!';
15    document.body.appendChild(newDiv);
16});

मुख्य विधियाँ

• getElementById निर्दिष्ट id विशेषता वाले तत्व को प्राप्त करता है।
• querySelector एक CSS चयनकर्ता का उपयोग करके तत्व को प्राप्त करता है।
• createElement एक नया HTML तत्व बनाता है।

कोड की व्याख्या

• getElementById का उपयोग करके यह कोड एक id विशेषता वाला तत्व प्राप्त करता है और उसके टेक्स्ट को बदलता है। यह querySelector का उपयोग करके एक बटन तत्व भी प्राप्त करता है और उसमें क्लिक इवेंट लिसनर जोड़ता है। क्लिक पर, यह createElement का उपयोग करके एक नया div तत्व बनाता है और मुख्य सामग्री में जोड़ता है। DOM संचालन के दौरान टाइप सेफ्टी सुनिश्चित करने के लिए जेनेरिक्स और टाइप एसरशन का उपयोग किया जाता है।

Element

Element एक इंटरफेस है जो DOM में व्यक्तिगत HTML तत्वों का प्रतिनिधित्व करता है। इसे आमतौर पर DOM को हेरफेर करते समय उपयोग किया जाता है।

कोड उदाहरण

 1// Use querySelector to manipulate element properties
 2const divElement = document.querySelector<HTMLDivElement>('.myClass');
 3if (divElement) {
 4    // Set innerHTML
 5    divElement.innerHTML = '<strong>Hello with innerHTML!</strong>';
 6
 7    // Set textContent
 8    divElement.textContent = 'Hello with textContent!';
 9
10    // Add a new class
11    divElement.classList.add('newClass');
12
13    // Set a custom attribute
14    divElement.setAttribute('data-role', 'content');
15}

मुख्य प्रॉपर्टी और मेथड

• innerHTML गुण आपको किसी तत्व की HTML सामग्री प्राप्त या सेट करने की अनुमति देता है।
• textContent गुण आपको किसी तत्व की टेक्स्ट सामग्री प्राप्त या सेट करने की अनुमति देता है।
• classList एक गुण है जो कक्षाओं को प्रबंधित करने के लिए होता है, जिससे आप कक्षाएँ जोड़, हटा और टॉगल कर सकते हैं।
• setAttribute विधि किसी तत्व पर एक विशेषता सेट करती है।

कोड की व्याख्या

• यह कोड querySelector से प्राप्त तत्वों के लिए innerHTML और textContent का उपयोग करके सामग्री सेट करने, classList के साथ क्लास जोड़ने और setAttribute से कस्टम विशेषताएँ सेट करने का उदाहरण दिखाता है। संचालन जेनेरिक्स का उपयोग करके टाइप-सेफ तरीक़े से किए जाते हैं।

NodeList और HTMLCollection

NodeList और HTMLCollection संग्रह का प्रतिनिधित्व करते हैं जो कई DOM तत्वों को शामिल करते हैं। उदाहरण के लिए, querySelectorAll एक NodeList लौटाता है, और getElementsByClassName एक HTMLCollection लौटाता है।

कोड उदाहरण

 1// NodeList supports forEach iteration
 2const divs: NodeListOf<HTMLDivElement> = document.querySelectorAll('div');
 3divs.forEach(div => {
 4    div.textContent = 'Updated!';
 5});
 6
 7// HTMLCollection is not directly iterable, convert it to an array
 8const spans: HTMLCollectionOf<HTMLSpanElement> =
 9    document.getElementsByClassName('span-item') as HTMLCollectionOf<HTMLSpanElement>;
10Array.from(spans).forEach(span => {
11    span.textContent = 'Changed!';
12});

• यह कोड forEach के साथ सीधे NodeList में हेरफेर करने और पुनरावृत्ति के लिए HTMLCollection को एक ऐरे में परिवर्तित करने का प्रदर्शन करता है।

इवेंट हैंडलिंग के लिए उपयोग की जाने वाली मुख्य कक्षाएं/इंटरफेस

Event

Event उन सभी इवेंट की मूल कक्षा है जो DOM में होते हैं। क्लिक, इनपुट, और पेज लोड जैसे विभिन्न इवेंट Event कक्षा का विस्तार करते हैं।

कोड उदाहरण

 1const form = document.querySelector<HTMLFormElement>('#myForm');
 2form?.addEventListener('submit', (event: Event) => {
 3    // target refers to the element that triggered the event (the form)
 4    const target = event.target as HTMLFormElement;
 5
 6    // type shows the kind of event, e.g., "submit"
 7    console.log(`Event type: ${event.type}`);
 8
 9    // preventDefault disables the default form submission
10    event.preventDefault();
11    console.log('Form submission prevented.');
12});

मुख्य प्रॉपर्टी और मेथड

• target गुण उस तत्व (EventTarget) को दर्शाता है जिस पर घटना हुई थी।
• type उस घटना के प्रकार को दर्शाता है, जो हुई है, जैसे कि click या input।
• preventDefault विधि इवेंट की डिफ़ॉल्ट क्रिया को रद्द कर देती है।

कोड की व्याख्या

• यह कोड दिखाता है कि फॉर्म में submit इवेंट लिसनर कैसे जोड़ा जाता है। target उस फॉर्म तत्व को संदर्भित करता है जहाँ इवेंट हुआ, और type इवेंट के प्रकार को दर्शाता है (इस मामले में, "submit")। preventDefault मेथड को कॉल करके आप डिफ़ॉल्ट फॉर्म सबमिशन व्यवहारों जैसे पेज नेविगेशन या रीलोड को रोक सकते हैं। इसके बजाय, यहाँ एक कस्टम प्रोसेस—लॉगिंग आउटपुट—निष्पादित किया जाता है।

MouseEvent

MouseEvent माउस संचालन से संबंधित घटनाओं का प्रतिनिधित्व करता है। माउस घटनाएं जैसे click और mousemove इस वर्ग का उपयोग करती हैं।

कोड उदाहरण

1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}

• यह कोड माउस निर्देशांक को लॉग करने के लिए MouseEvent के उपयोग का उदाहरण है।

मुख्य गुण

• clientX पृष्ठ के भीतर माउस सूचक का X निर्देशांक है।
• clientY पृष्ठ के भीतर माउस सूचक का Y निर्देशांक है।
• button यह सूचित करता है कि कौन सा माउस बटन दबाया गया था। 0 बाएं बटन के लिए, 1 मध्य बटन के लिए, और 2 दाएं बटन के लिए है।

KeyboardEvent

KeyboardEvent कीबोर्ड संचालन से संबंधित घटनाओं का प्रतिनिधित्व करता है। keydown और keyup घटनाएं इस श्रेणी में आती हैं।

कोड उदाहरण

 1document.addEventListener('keydown', (event: KeyboardEvent) => {
 2    // Show the key name (e.g., "Enter", "a")
 3    console.log(`Key pressed: ${event.key}`);
 4
 5    // Show the physical key code (e.g., "Enter", "KeyA")
 6    console.log(`Key code: ${event.code}`);
 7
 8    // Check if Alt/Ctrl/Shift key was pressed
 9    console.log(`Alt pressed: ${event.altKey}`);
10    console.log(`Ctrl pressed: ${event.ctrlKey}`);
11    console.log(`Shift pressed: ${event.shiftKey}`);
12
13    if (event.key === 'Enter') {
14        console.log('Enter was pressed');
15    }
16});

मुख्य गुण

• key दबाए गए कुंजी का नाम है, जैसे कि Enter या a।
• code कीबोर्ड पर किसी कुंजी से संबंधित कोड है।
• altKey, ctrlKey, और shiftKey वे गुण हैं जो दर्शाते हैं कि क्या Alt, Ctrl या Shift कुंजी दबाई गई थी।

कोड की व्याख्या

• यह कोड दबाए गए कुंजी (key) के नाम, उसके संबंधित कुंजी कोड (code), साथ ही यह कि क्या मॉडिफायर कुंजियां (altKey, ctrlKey, shiftKey) दबाई गई थीं या नहीं, को लॉग करने के लिए KeyboardEvent का उपयोग करता है। यह Enter कुंजी दबाए जाने पर एक विशेष क्रिया भी करता है।

FocusEvent

FocusEvent फोकस प्राप्त करने या फोकस खोने की घटनाओं से संबंधित है। focus और blur घटनाएं इस श्रेणी में आती हैं।

कोड उदाहरण

 1const inputElement = document.getElementById('myInput');
 2if (inputElement) {
 3    inputElement.addEventListener('focus', (event: FocusEvent) => {
 4        console.log('Input focused');
 5    });
 6
 7    inputElement.addEventListener('blur', (event: FocusEvent) => {
 8        console.log('Input lost focus');
 9    });
10}

• यह कोड यह पता लगाने और लॉग करने के लिए FocusEvent का उपयोग करने का एक उदाहरण है कि कब कोई इनपुट फ़ील्ड फोकस प्राप्त करता है या खोता है।

टाइपस्क्रिप्ट में टाइपिंग

जब टाइपस्क्रिप्ट का उपयोग किया जाता है, तो DOM प्रबंधन और घटना प्रबंधन में टाइप जांच को बढ़ाया जाता है। नीचे टाइपस्क्रिप्ट में टाइप-सुरक्षित DOM प्रबंधन और घटना प्रबंधन के उदाहरण दिए गए हैं।

टाइप किए गए घटना श्रोता

घटना श्रोता जोड़ते समय, घटना के प्रकार को निर्दिष्ट करना प्रकार जांच आयोजित करता है और गलत गुणों तक पहुंचने से रोकता है।

1const input = document.querySelector<HTMLInputElement>('#myInput');
2// Event listener with explicit type annotation for safety
3input?.addEventListener('input', (event: Event) => {
4    // event.target is EventTarget, so it needs to be cast to the correct type
5    const target = event.target as HTMLInputElement;
6    console.log(`Current value: ${target.value}`);
7});

• यह कोड इनपुट इवेंट को संभालने और इनपुट फ़ील्ड के वर्तमान मान को सुरक्षित रूप से प्राप्त और लॉग करने के लिए टाइप्ड इवेंट लिसनर का उपयोग करने का एक उदाहरण है।

सामान्य घटना प्रबंधन

टाइपस्क्रिप्ट में जेनेरिक्स का उपयोग करके, आप विभिन्न प्रकार की घटनाओं का समर्थन करने वाला सामान्य घटना प्रबंधन कर सकते हैं।

 1// Generic event handler function
 2function handleEvent<T extends Event>(event: T) {
 3    console.log(`Event type: ${event.type}`);
 4    if (event.target instanceof HTMLElement) {
 5        console.log(`Target element: ${event.target.tagName}`);
 6    }
 7}
 8
 9const input = document.querySelector<HTMLInputElement>('#myInput');
10input?.addEventListener('input', handleEvent);

• यह कोड जेनेरिक्स का उपयोग करके एक सामान्य इवेंट हैंडलर का उदाहरण है, जो इवेंट प्रकार और लक्षित तत्व की टैग नेम को लॉग करता है।

सारांश

टाइपस्क्रिप्ट में, DOM प्रबंधन और घटना प्रबंधन के दौरान मानक DOM API पर प्रकार लागू किए जाते हैं, कोड सुरक्षा और पठनीयता को बढ़ाते हैं। Document और Element जैसी कक्षाओं का उपयोग करके, और Event, MouseEvent, और KeyboardEvent जैसी घटना-संबंधी कक्षाओं का उपयोग करके, प्रकार-सुरक्षित विकास संभव है। इसके अलावा, querySelector<T>() या HTMLCollectionOf<T> का उपयोग करना टाइप-सुरक्षित DOM हेरफेर सक्षम करता है।

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

YouTube Video