टाइपस्क्रिप्ट में 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 चैनल को भी देखें।