Changing text, attributes, and styles of elements In Hindi
जावास्क्रिप्ट प्रोग्रामिंग में डॉम फ्रेमवर्क से किसी वेबपेज एलिमेंट को सलेक्ट करने के बाद वेब डेवलपर डॉम एलिमेंट के टेक्स्ट कंटेंट, फॉण्ट टाइपोग्राफी, फॉण्ट कलर, और अन्य वेबपेज ऐट्रिब्यूट्स और स्टाइल्स को मॉडिफाई कर सकते हैं। जहा ये फीचर्स वेब डेवलपर को डायनामिक और इंटरैक्टिव वेबपेज वेबसाइट डेवलप करने में हेल्प करते हैं।
So, let’s know the DOM element content modification attributes and other features in JavaScript programming.
Changing the text content in JavaScript DOM.
जावास्क्रिप्ट में डेवलप किसी वेबपेज एलिमेंट की डिफ़ॉल्ट टेक्स्ट कंटेंट को मॉडिफाई करने के लिए वेब डेवलपर निचे दिए गए टेक्स्ट ऐट्रिब्यूट्स पॉपर्टीज़ को अप्लाई कर सकते हैं.
text content attributes properties.
- textContent – टेक्स्ट कंटेंट ऐट्रिब्यूट्स मौजूदा वेबपेज में किसी डॉम एलिमेंट की टेक्स्ट कंटेंट को मॉडिफाई या रिट्रीव करने में हेल्प करता है, यह चाइल्ड एलिमेंट के अंदर का टेक्स्ट भी इंक्लूड होता है। ये ऐट्रिब्यूट्स डॉम एलिमेंट के अंदर एचटीएमएल टैग्स को पार्स नहीं करता है।
- innerHTML – इनरएचटीएमएल किसी डॉम एलिमेंट के अंदर एचटीएमएल कंटेंट टैग्स इंक्लूड को मॉडिफाई या रिट्रीव करने में हेल्प करता है।
Example of DOM element textContent.
यहाँ वेबपेज में वेब डेवलपर द्वारा टेक्स्ट कंटेंट ऐट्रिब्यूट्स का यूज़ स्पेशली तब किया जाता है, जब वेब डेवलपर एचटीएमएल वेबपेज के डिफ़ॉल्ट ऐट्रिब्यूट्स या स्ट्रक्चर को इम्पैक्ट किए बिना किसी डॉम एलिमेंट के अंदर केवल टेक्स्ट ऐट्रिब्यूट्स या प्रॉपर्टीज को मॉडिफाई करना चाहते हैं।
<p id=”text”>Welcome to javascript</p>
<button id=”modifyText”>modify Text</button>
// it uses to Select the dom element
const text = document.getElementById(‘text’);
// it uses to Change the text content properties
text.textContent = “Let explore the JavaScript!”; // it used to Updates the text inside the <p> html tag
// here Event listener uses to modify the text properties when button is click
document.getElementById(‘modifyText’).addEventListener(‘click’, () => {
text.textContent = “Finally text modify dynamically!”;
});
Example of innerHTML in JavaScript.
जब जावास्क्रिप्ट वेब डेवलपर को एचटीएमएल वेब कंटेंट को मॉडिफाई करने की ज़रूरत हो, तब अतरिक्त एचटीएमएल वेबपेज टैग्स को जोड़ना। जैसे, <strong> टैग, <em> टैग, आदि है. जैसे, नए टैग को जोड़ना होतो, तो मौजूदा वेबपेज में इनरएचटीएमएल का यूज़ करें।
<p id=”text”>Welcome to <strong>the javascript</strong>!</p>
<button id=”modifyHTML”>Modify HTML</button>
// here we use it to Select the element
const text = document.getElementById(‘text’);
// here it used to Changing the HTML content attributes
text.innerHTML = “Let learn the, <em> JavaScript programming</em>!”; // here we use Updates method in the HTML inside the <p> html tag
// here we use Event listener method to the change HTML content when the button is click
document.getElementById(‘modifyHTML’).addEventListener(‘click’, () => {
text.innerHTML = “Finally this is a <strong>dynamic modification in </strong> HTML”;
});
Changing Attributes of DOM Elements in JavaScript.
वेब डेवलपर जावास्क्रिप्ट प्रोग्रामिंग का यूज़ करके किसी वेबपेज एलिमेंट के डिफ़ॉल्ट ऐट्रिब्यूट्स और प्रॉपर्टीज को मॉडिफाई कर सकते हैं। जिसमे कॉमन डॉम ऐट्रिब्यूट्स मॉडिफिकेशन पॉपर्टीज़ में src, href, class, id, और कई अन्य एचटीएमएल प्रॉपर्टीज इंक्लूड हो सकते हैं।
Changing Attributes of DOM Elements properties.
- setAttribute() – यह ऐट्रिब्यूट्स किसी वेबपेज में डॉम एलिमेंट के प्रॉपर्टीज को मॉडिफाई करता है।
- getAttribute() – यह ऐट्रिब्यूट्स किसी वेबपेज में डॉम एलिमेंट प्रॉपर्टीज की वैल्यू को रिसीव करता है।
- removeAttribute() – यह ऐट्रिब्यूट्स किसी वेबपेज में डॉम एलिमेंट से प्रॉपर्टीज को रिमूव करता है।
setAttribute() example in JavaScript webpage.
<a id=”link” href=”https://vcanhelpsu.com”>Explore Vcanhelpsu</a>
<button id=”modifyLink”>modify Link</button>
// here we use select the dom element
const link = document.getElementById(‘link’);
// here we Change the `href` html tag attribute
link.setAttribute(‘href’, ‘https://google.com’);
// here we use Event listener to change hyperlink when link button is click
document.getElementById(‘modifyLink’).addEventListener(‘click’, () => {
link.setAttribute(‘href’, ‘https://modifywebsite.com’);
});
getAttribute() example in JavaScript webpage.
जावास्क्रिप्ट वेब डेवलपर किसी वेबपेज के ऐट्रिब्यूट्स वैल्यू को इस प्रकार रिसीव कर सकते हैं.
// here we use to Get the value of the `href` html tag attribute
const link = document.getElementById(‘link’);
console.log(link.getAttribute(‘href’)); // Result is – https://google.com
removeAttribute() example in JavaScript webpage.
जावास्क्रिप्ट वेब डेवलपर किसी वेबपेज एलिमेंट से ऐट्रिब्यूट्स को भी रिमूव कर सकते हैं.
// here we use to Remove the `href` attribute in web page attributes
link.removeAttribute(‘href’);
console.log(link.getAttribute(‘href’)); // Result is – null attribute is removed
Changing the styles of webpage elements in the JavaScript DOM.
जावास्क्रिप्ट वेब डेवलपर सीएसएस स्टाइल प्रॉपर्टी को अप्लाई करके किसी वेबपेज एलिमेंट की सीएसएस स्टाइल्स मे डायरेक्ट मॉडिफिकेशन कर सकते हैं। यहाँ सीएसएस स्टाइल प्रॉपर्टी वेब डेवलपर को इनलाइन सीएसएस स्टाइल्स को एक्सेस करने और उन्हें मॉडिफाई करने की परमिशन प्रोवाइड करता है, लेकिन याद रहे यहाँ मौजूदा एक्सटर्नल सीएसएस फ़ाइलों में डिफाइन स्टाइल्स को तब तक नहीं मॉडिफाई नहीं किया जा सकत है, जब तक कि उन स्टाइल्स को इनलाइन सीएसएस ऐट्रिब्यूट्स अप्लाई नहीं किया जाएगा।
style.propertyName – यह मौजूदा वेबपेज में इंडिविजुअल सीएसएस प्रॉपर्टीज जैसे, टेक्स्ट कंटेंट कलर, फ़ॉन्ट-साइज, आदि ऐट्रिब्यूट्स या प्रॉपर्टीज को मॉडिफाई करने में अप्लाई किया जाता है।
Example of JavaScript DOM inline style.
<p id=”ptext”>Simple paragraph text</p>
<button id=”modifyStyle”>Modify Style</button>
// we used here it to select the element
const text = document.getElementById(‘ptext’);
// here we used to Change the inline CSS style
ptext.style.color = “red”; // here we used to change text color to red
ptext.style.fontSize = “22px”; // here we used to Change font size to 22px
// here we used event listener to change style when button is click
document.getElementById(‘modifyStyle’).addEventListener(‘click’, () => {
ptext.style.color = “red”;
ptext.style.fontSize = “27px”;
});
Multiple style changes in JavaScript.
जावास्क्रिप्ट वेब डेवलपर एक साथ कई वेबपेज एलिमेंट डॉम सीएसएस स्टाइल मॉडिफाई करने के लिए वेब डेवलपर सीएसएस स्टाइल ऑब्जेक्ट को मॉडिफाई या अपडेट करने के लिए Object.assign() फंक्शन को अप्लाई कर सकते हैं.
// here we used t Apply multiple styles at once in html dom webpage
text.style.cssText = “color: lime; font-size: 28px; font-weight: bold;”;
Changing the class in a JavaScript DOM element.
किसी भी जावास्क्रिप्ट वेबपेज में वेब डेवलपर द्वारा classList पॉपर्टीज़ का वेबपेज एलिमेंट में क्लास मॉडिफिकेशन या अपडेट करने का एक बेहतर मेथड है। यह मेथड html वेबपेज में जावास्क्रिप्ट क्लास को ऐड करने, मौजूदा क्लास एलिमेंट को रिमूव करने, या क्लास एलिमेंट को टॉगल करने, का एक बेहतर मेथड प्रोवाइड करता है।
Changing the class features in a JavaScript.
- classList.add() – यह ऐट्रिब्यूट्स जावास्क्रिप्ट वेबपेज में किसी एचटीएमएल डॉम एलिमेंट में एक या अधिक क्लास ऐड करने में हेल्प करता है।
- classList.remove() – यह ऐट्रिब्यूट्स जावास्क्रिप्ट वेबपेज में एक या अधिक क्लास ऐट्रिब्यूट्स को रिमूव करने में हेल्प करता है।
- classList.toggle() – यह ऐट्रिब्यूट्स जावास्क्रिप्ट वेबपेज में किसी क्लास को टॉगल करने में हेल्प करता है, यदि क्लासटॉगल मौजूद नहीं है, तो पहले उसे ऐड करता है, अगर मौजूद है, तो उसे रिमूव कर देता है।
- classList.contains() – यह ऐट्रिब्यूट्स जावास्क्रिप्ट वेबपेज में चेक करता है कि किसी वेबपेज एलिमेंट में कोई स्पेसिफिक क्लास एलिमेंट है या नहीं है।
Example of JavaScript Changing the class.
<p id=”text” class=”value”>This is a sample value text </p>
<button id=”toggleClass”>Toggle Class</button>
// it used to Select the class element
const text = document.getElementById(‘text’);
// it used to Add a class
text.classList.add(‘display’);
// it used to Remove a class
text.classList.remove(‘value’);
// it used to Toggle a class on click
document.getElementById(‘toggleClass’).addEventListener(‘click’, () => {
text.classList.toggle(‘display’); // here it Toggles the ‘display’ class
});
Combining DOM changes in a JavaScript webpage.
जावास्क्रिप्ट वेब डेवेलपर डायनामिक और इंटरैक्टिव वेबपेज एलिमेंट को क्रिएट करने के लिए टेक्स्ट कंटेंट, ऐट्रिब्यूट्स पॉपर्टीज़, और स्टाइल्स को मेन्युप्लेट कर कम्बाइंड कर सकते हैं।
Example of Combining DOM changes.
<button id=”interactiveButton”>Press Button </button>
<p id=”text”>This is a text information</p>
// here we used it to Select the interactivebutton and text elements
const button = document.getElementById(‘interactiveButton’);
const text = document.getElementById(‘text’);
// here we used event listener to change the text, style, and attributes when user click on button
button.addEventListener(‘click’, () => {
text.textContent = “someone press the button!”; // here it Change the text content
text.style.color = “orange”; // here it Change the style color
text.setAttribute(‘data-status’, ‘click’); // here we Add a custom button click attribute
});
Summary of textContent, innerHTML class css style properties in JavaScript.
Changing text properties.
- textContent – टेक्स्ट कंटेंट जावास्क्रिप्ट वेबपेज में किसी एलिमेंट के सिंपल टेक्स्ट को नई टेक्स्ट स्टाइल से मॉडिफाई करता है।
- innerHTML – जावास्क्रिप्ट वेबपेज में किसी एलिमेंट की एचटीएमएल कंटेंट इनफार्मेशन को को अपडेट या मॉडिफाई करता है।
Modifying text attributes.
- setAttribute() – जावास्क्रिप्ट वेबपेज में किसी एलिमेंट के किसी स्पेशल वैल्यू को मॉडिफाई करता है।
- getAttribute() – जावास्क्रिप्ट वेबपेज में किसी एलिमेंट में किसी स्पेसिफिक वैल्यू को रिसीव करता है।
- removeAttribute() – जावास्क्रिप्ट वेबपेज में किसी ऐट्रिब्यूट्स को रिमूव करता है।
Modifying css styles.
- style.property – जावास्क्रिप्ट वेबपेज में किसी अलग-अलग सीएसएस प्रॉपर्टीज को डायरेक्ट मॉडिफाई करे. जैसे, style.color, style.fontSize, आदि है।
- style.cssText – जावास्क्रिप्ट वेबपेज में एक साथ कई सीएसएस स्टाइल्स को अप्लाई करता है।
Modifying classes.
- जावास्क्रिप्ट वेबपेज में क्लास को ऐड, क्लास रिमूव, क्लास को टॉगल करने के लिए इसे यूज़ करे.
- classList.add(), classList.remove(), classList.toggle(), classList.contains()
