Introduction to the Document Object Model (DOM) In Hindi
जावास्क्रिप्ट प्रोग्रामिंग लैंग्वेज में डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) वेबपेज वेबसाइट डॉक्यूमेंट के लिए एक प्रोग्रामिंग डिज़ाइन डेवलपमेंट इंटरफ़ेस या बिल्ट-इन फ्रेमवर्क है। यह जावास्क्रिप्ट प्रोग्रामर के द्वारा डिज़ाइन डेवलप वेबपेज ऑब्जेक्ट के स्ट्रक्चर को एक ट्री स्ट्रक्चर आर्डर में प्रीव्यू करते है. जिसमें डिज़ाइन वेबपेज वेबसाइट के इंडिविजुअल ऑब्जेक्ट वेबपेज के एक पोरशन जैसे वेबपेज एलिमेंट, वेबपेज ऐट्रिब्यूट्स और वेबपेज टेक्स्ट कंटेंट इनफार्मेशन से रिलेटेड होती है। यह जावास्क्रिप्ट प्रोग्रामर को जावास्क्रिप्ट और अन्य प्रोग्रामिंग लैंग्वेजेज को वेबपेज की कंटेंट और स्ट्रक्चर के साथ डायनामिक आर्डर में कम्यूनिकेट करने और वेबपेज एलिमेंट में मेन्युप्लेट करने की परमिशन प्रोवाइड करते है।
सामान्य लैंग्वेज में, जावास्क्रिप्ट में DOM वेबपेज डिज़ाइन और डेवलपमेंट का एक अब्स्ट्रक्ट मॉडल है. जो जावास्क्रिप्ट डेवलपर को वेबपेज पर एलिमेंट और कंटेंट तक पहुँचने, मौजूदा वेबपेज को मॉडिफाई करने, वेबपेज एलिमेंट को ऐड और रिमूव करने की परमिशन प्रोवाइड करता है। जावास्क्रिप्ट में DOM फीचर्स जावास्क्रिप्ट को वेबपेज वेब ब्राउज़र में लोड होने के बाद वेबपेज स्ट्रक्चर, वेबपेज स्टाइल, और वेबपेज कंटेंट को मॉडिफाई करने में केपेबल करके वेबपेज को इंटरैक्टिव और डायनामिक क्रिएट करने में हेल्प करता है।
What is DOM in JavaScript?
जावास्क्रिप्ट प्रोग्रामिंग में डिज़ाइन डेवलप वेबपेज एलिमेंट को DOM एक ट्री जैसी स्ट्रक्चर आर्डर में प्रीव्यू करता है, जो डिज़ाइन वेबपेज में HTML डॉक्यूमेंट को रिप्रेजेंट करता है। जहा यह HTML वेबपेज का इंडिविजुअल एलिमेंट पोरशन जैसे वेबपेज एलिमेंट, वेबपेज ऐट्रिब्यूट्स और टेक्स्ट या कंटेंट ट्री में एक नोड की तरह है।
- Document – वेबपेज डिज़ाइन में DOM स्ट्रक्चर आर्डर में ट्री व्यू की तरह है। यह डिज़ाइन वेबपेज में कम्पलीट HTML डॉक्यूमेंट को रिप्रेजेंट करता है।
- Elements – डिज़ाइन वेबपेज ट्री आर्डर में नोड्स के फॉर्मेट में डिस्प्ले किय जाते हैं, जैसे कि <div> टैग, <p> टैग, <button> टैग, एलिमेंट आदि है।
- Text – यह डिज़ाइन डेवलप वेबपेज एलिमेंट के अंदर टेक्स्ट कंटेंट इनफार्मेशन को रिप्रेजेंट करता है।
- Attributes – यह डिज़ाइन डेवलप वेबपेज एलिमेंट की प्रॉपर्टीज को डिस्प्ले करता है, जैसे कि वेबपेज क्लास, आईडी, href, लिंक, आदि है।
Example of a simple HTML document structure and DOM structure in JavaScript.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Javascript Basic DOM Representation </title>
</head>
<body>
<h1>Hi, This is a simple DOM layout!</h1>
<p>Let we tray to menuplate dom structure.</p>
</body>
</html>
javascript DOM Representation.
Document
├── html
├── head
│ ├── meta
│ ├── title
└── body
├── h1
└── p
└── ol
How DOM works in JavaScript.
- Javascript Access – जावास्क्रिप्ट प्रोग्रामिंग वेब ब्राउज़र के बिल्ट-इन API एप्लिकेशन प्रोग्रामिंग इंटरफ़ेस बिल्ट-इन फीचर्स के द्वारा DOM के साथ इंटरैक्ट या कम्यूनिकेट करता है। यह वेबपेज डॉक्यूमेंट एक्सेस करने और उसे मेन्युप्लेट करने के कई मेथड को प्रोवाइड करता है।
- Dynamic changes – एक बार वेबपेज में DOM लोड हो जाने के बाद, जावास्क्रिप्ट प्रोग्रामिंग आपको इसमें मॉडिफिकेशन या मेन्युप्लेट करने की परमिशन प्रोवाइड करता है. यह मौजूदा वेबपेज में वेबपेज को री-लोड किए बिना वेबपेज एलिमेंट को ऐड करने, वेबपेज एलिमेंट को रिमूव या मॉडिफिकेशन में हेल्प प्रोवाइड करता है।
- Event handling – जावास्क्रिप्ट प्रोग्रामिंग में DOM यूजर इंटरैक्शन जैसे, क्लिक, माउस मूवमेंट, कीप्रेस इवेंट को हैंडल करने या मैनेज करने में सक्षम बनाता है, और वेबपेज को रिफ्रेश किए बिना डायनामिक रूप से रिस्पांस प्रोवाइड करता है।
DOM Nodes in JavaScript.
डिज़ाइन वेबपेज या वेबसाइट एलिमेंट DOM HTML डॉक्यूमेंट को नोड्स के हायरार्की आर्डर में डिस्प्ले करता है।
The main types of DOM nodes in JavaScript programming are.
- Element nodes – एलिमेंट नोड में HTML एलिमेंट होते है, जैसे, <div> टैग, <p> टैग, <button> टैग को रिप्रेजेंट करता हैं।
- Text nodes – यह HTML वेबपेज एलिमेंट के अंदर रियलटाइम टेक्स्ट को रिप्रेजेंट करता हैं।
- Attribute nodes – यह HTML वेबपेज में एलिमेंट की ऐट्रिब्यूट्स को रिप्रेजेंट करते हैं, जैसे, क्लास, आईडी, href, टैग आदि है।
- Comment nodes – यह HTML वेबपेज में कमेंट को रिप्रेजेंट करते हैं।
DOM nodes JavaScript example.
<div class=”holder”>
<p>This is a test class!</p>
</div>
Here in DOM node.
- यहाँ <div> टैग और <p> टैग वेबपेज के लिए एक एलिमेंट नोड है।
- यहाँ <p> टैग के अंदर “This is a test class!” वेबपेज कंटेंट के लिए एक टेक्स्ट नोड एलिमेंट है।
- जहा <div> टैग में class=”holder” के लिए एक ऐट्रिब्यूट्स नोड है।
Accessing and manipulating DOM with JavaScript programming.
जावास्क्रिप्ट प्रोग्रामिंग वेब डेवलपर प्रोग्रामर को कई तरीकों से DOM के साथ इंटरैक्ट या कम्यूनिकेट करने की परमिशन प्रोवाइड करते है।
JavaScript contains common methods for DOM manipulation.
Accessing JavaScript DOM elements.
आप जावास्क्रिप्ट प्रोग्रामिंग DOM में वेबपेज एलिमेंट को एक्सेस करने के लिए मल्टीप्ल मेथड का उपयोग कर सकते हैं. जैसे,
- getElementById() – जावास्क्रिप्ट में किसी वेबपेज एलिमेंट को उसके id ऐट्रिब्यूट्स के द्वारा एक्सेस कर सकते है।
- getElementsByClassName() – जावास्क्रिप्ट वेबपेज एलिमेंट को उनके क्लास नाम द्वारा एक्सेस कर सकते है।
- getElementsByTagName() – जावास्क्रिप्ट वेबपेज में एलिमेंट को उनके टैग नाम जैसे, <div>, <p> टैग के द्वारा एक्सेस कर सकते है।
- querySelector() – जावास्क्रिप्ट वेबपेज में अप्लाई CSS सिलेक्टर्स से मिलते जुलते पहले वेबपेज एलिमेंट को एक्सेस करते है।
- querySelectorAll() – जावास्क्रिप्ट वेबपेज में अप्लाई CSS सिलेक्टर्स से मिलते जुलते सभी वेबपेज एलिमेंट को एक्सेस कर सकते है।
dom element example.
// let tray to Accessing webpage element by ID
const heading = document.getElementById(‘textheading’);
// let tray Accessing webpage elements by its class name
const paragraphs = document.getElementsByClassName(‘textParagraph’);
// let Accessing the first webpage tag <p> tag element with a specific class
const paragraph = document.querySelector(‘.sampleParagraph’);
Manipulating html webpage elements from the DOM.
एक बार जब आप किसी वेबपेज एलिमेंट को एक्सेस कर लेते हैं, तो आप उस वेबपेज एलिमेंट की डिफ़ॉल्ट कंटेंट, स्टाइल्स, और वेबपेज ऐट्रिब्यूट्स को मॉडिफाई कर सकते हैं।
Modifying webpage content.
- किसी वेबपेज एलिमेंट के अंदर HTML कंटेंट को मॉडिफाई करने के लिए .innerHTML का उपयोग करें।
- सिंपल वेबपेज टेक्स्ट को बदलने के लिए .textContent का उपयोग करें।
Modifying webpage style.
- डिज़ाइन वेबपेज में सीएसएस प्रॉपर्टीज को डायरेक्ट मॉडिफाई करने के लिए .style फाइल का उपयोग करें।
Modifying webpage attributes.
- किसी वेबपेज की ऐट्रिब्यूट्स को मॉडिफाई करने के लिए .setAttribute() का उपयोग करें।
Example of element modification in an HTML webpage.
// let tray to Changing the text content of webpage element
heading.textContent = “Hi, This is a example of modification web page heading!”;
// let tray to Changing the inner HTML of webpage element
heading.innerHTML = “<strong>hi, javascript!</strong>”;
// let tray to Changing a webpage CSS style
paragraph.style.color = “blue”;
// let tray to Modifying a webpage link attribute
const link = document.querySelector(“a”);
link.setAttribute(“href”, “https://www.vcanhelpsu.com”);
Adding and removing webpage elements.
आप HTML वेबपेज में डायनामिक रूप से वेबपेज एलिमेंट को ऐड या डिलीट भी कर
सकते हैं।
- createElement() – यह एक नया HTML एलिमेंट क्रिएट करने में हेल्प करता है।
- appendChild() – यह HTML एलिमेंट में एक नया चाइल्ड को अपेण्ड करता
- है।
- removeChild() – यह एक HTML चाइल्ड एलिमेंट को रिमूव करता है।
Adding and removing webpage elements Example.
// let Create a new heading webpage element
const newHeading = document.createElement(“h”);
newHeading.textContent = “This is a example of new heading.”;
// let Append the new heading to the webpage body
document.body.appendChild(newHeading);
// let tray to Remove the new heading after 7 seconds
setTimeout(() => {
document.body.removeChild(newheading);
}, 7000);
JavaScript event handling.
DOM आपको क्लिक, कीप्रेस या माउस मूवमेंट, जैसे यूजर इवेंट पर रिस्पांस की परमिशन प्रोवाइड करता है। यह एलिमेंट में इवेंट लिस्ट्नेर्स को जोड़कर किया जाता है।
- addEventListener() – यह जावास्क्रिप्ट वेबपेज एलिमेंट में इवेंट लिस्टनेनेर को ऐड करता है।
Example of JavaScript event handling.
// let tray Attaching a click event to a the html webpage button
const button = document.querySelector(‘button’);
button.addEventListener(‘click’, () => {
alert(‘You Click on Button’);
});
आप जावास्क्रिप्ट वेबपेज में क्लिक, माउसओवर, कीडाउन, आदि जैसे विभिन्न इवेंट को लिसेन कर सकते हैं।
Modifying the DOM for dynamic content in an HTML webpage.
DOM आपको मौजूदा वेबपेज को वेब ब्राउज़र में रीलोड की आवश्यकता के बिना, रियलटाइम में वेबपेज कंटेंट को मॉडिफाई करके इंटरैक्टिव और डायनेमिक वेबपेज क्रिएट करने की परमिशन प्रोवाइड करता है। यह आमतौर पर वेबपेज यूजर इंटरैक्शन के आधार पर वेब कंटेंट को डायनेमिक रूप से मॉडिफाई या अपडेट करने के लिए AJAX या Fetch API कॉल के द्वारा अप्लाई करता है।
Example of dynamically updating content without page reload.
// let tray to content change on when you click
const button = document.querySelector(‘#modifyContent’);
button.addEventListener(‘click’, () => {
document.querySelector(‘#content’).textContent = “we add some dynamic content!”;
});
Conclusion of Document Object Model (DOM) in JavaScript programming.
जावास्क्रिप्ट में DOM HTML और XML वेबपेज डॉक्यूमेंट को स्ट्रक्चर, डायनेमिक आर्डर में मैनिपुलेट करने के लिए एक पॉवरफुल इंटरफ़ेस है। जावास्क्रिप्ट प्रोग्रामिंग के साथ, DOM फ्रेमवर्क वेब डेवलपर को रियलटाइम में वेब पेज के साथ इंटरैक्ट कम्यूनिकेट करने, यूजर इनपुट का रिप्लाई करने, वेबपेज स्ट्रक्चर को मॉडिफाई करने और एक समृद्ध इंटरैक्टिव वेब यूजर एक्सपेरिएंस क्रिएट करने में हेल्प करता है।
जावास्क्रिप्ट प्रोग्रामिंग में DOM फ्रेमवर्क के साथ वेब डेवलपर, कुछ स्पेसिफिक टास्क को पूरा कर सकते हैं, जिनमे से कुछ इस प्रकार हैं.
getElementById(), querySelector(), आदि जावास्क्रिप्ट dom मेथड का उपयोग करके html वेबपेज एलिमेंट को एक्सेस कर सकते है।
html वेबपेज में .innerHTML, .textContent, और .style मेथड का उपयोग करके वेबपेज इंटरनल कंटेंट इनफार्मेशन को मॉडिफाई कर सकते है।
जहा .createElement(), .appendChild(), और .removeChild() का उपयोग करके किसी वेबपेज में डायनामिक बिना रिफ्रेश किए वेबपेज एलिमेंट को ऐड और रिमूव कर सकते है।
जावास्क्रिप्ट वेबपेज में addEventListener() मेथड का उपयोग करके वेबपेज ईवेंट पर रिस्पांस को रिप्लाई कर सकते है।
