Blog

Creating, removing, and modifying DOM elements In Hindi

Creating, removing, and modifying DOM elements In Hindi        

जावास्क्रिप्ट प्रोग्रामिंग में वेब डेवलपर को डॉम में न्यू एलिमेंट क्रिएट करने, मौजूदा डॉम एलिमेंट को रिमूव करने, और प्रीवियस डॉम एलिमेंट प्रॉपर्टीज को डायनामिक आर्डर में मॉडिफाई करने की परमिशन प्रोवाइड करता है। जहा डॉम एलिमेंट कस्टमाइज और अपडेट ऑपरेशन वेब डेवलपर को डायनामिक वेबसाइटों और इंटरैक्टिव यूज़र इंटरफ़ेस को कण्ट्रोल और मैनेज करने में हेल्प करता हैं।

Creating removing and modifying DOM elements In Hindi

Creating New DOM Elements in JavaScript.

जावास्क्रिप्ट प्रोग्रामर document.createElement() डॉम मेथड को अप्लाई करके नए एचटीएमएल वेबपेज डोम एलिमेंट को क्रिएट कर सकते हैं, जो की वेबपेज में एक डॉम एलिमेंट को क्रिएट करता है, जिसे फिर डॉम एलिमेंट के रूप में ऐड किया जा सकता है।

Creating New DOM Elements in JavaScript

// A new <p> paragraph DOM element creation process

const textParagraph = document.createElement(‘p’);

// A text node creation process in the JavaScript DOM

const info = document.createTextNode(‘This is a dynamically created paragraph’);

// Add a text node to a <p> element in the JavaScript DOM

textParagraph.appendChild(text);

// Add an ID or class to a new element in an alternate order in the DOM

textParagraph.id = ‘new-paragraph’;

newParagraph.classList.add(‘new-class’);

// Add the new element to the body or any other element in the DOM

document.body.appendChild(newParagraph);

More complex element creation process in the JavaScript DOM.

जावास्क्रिप्ट वेब डेवलपर मोर काम्प्लेक्स डॉम वेबपेज एलिमेंट भी क्रिएट कर सकते हैं, जैसे, <div>, <a>, <ul>, आदि एचटीएमएल वेबपेज टैग का यूज़ करके और उन्हें अपने वेबपेज में डायनामिक आर्डर में ऐड कर सकते हैं।

// let we Create a new <div> tag element with a class and append it to the webpage body

const testDiv = document.createElement(‘div’);

test.classList.add(‘dynamic-div’);

testDiv.textContent = ‘sample of dynamically order div.’;

document.body.appendChild(testDiv);

// let Create a new <a> anchor website link html tag element

const weblink = document.createElement(‘a’);

weblink.href = ‘https://website.com’;

weblink.textContent = ‘let open website.com’;

document.body.appendChild(weblink);

Removing DOM Elements in JavaScript.

जावास्क्रिप्ट वेब डेवलपर remove() मेथड को अप्लाई करके या parentNode.removeChild() मेथड का यूज़ करके वेबपेज में मौजूदा एक्सीस्टिंग डॉम एलिमेंट्स को रिमूव कर सकते हैं।

Use of remove() method in JavaScript webpage.

जावास्क्रिप्ट वेबपेज डॉम एलिमेंट को रिमूव करने के लिए remove( ) मेथड को यूज़ किया जाता है, इसे तब अप्लाई करे जब वेब डेवलपर के पास उस डॉम एलिमेंट का डायरेक्ट रेफ़्रेन्स हो जिसे वेब डेवलपर रिमूव करना चाहते हैं।

// Select the DOM element in the webpage that you want to remove

const elementToRemove = document.getElementById(‘text-paragraph’);

// Remove element from DOM in JavaScript

elementToRemove.remove();

Use of parentNode.removeChild() in JavaScript DOM.

यदि वेब डेवलपर के पास उस डॉम एलिमेंट तक डायरेक्ट एक्सेस नहीं है, जिस वेबपेज डॉम एलिमेंट को वेब डेवलपर रिमूव करना चाहता हैं, जहा वेब डेवलपर को उस एलिमेंट का पैरेंट एड्रेस पता है, फिर वेब डेवलपर पैरेंट एलिमेंट में removeChild() को यूज़ कर सकते हैं।

// Select the parent element in the JavaScript web page DOM

const parent = document.body;

// Select the child element to remove the parent DOM element

const elementToRemove = document.getElementById(‘text-paragraph’);

// Remove the child element from the parent in the web page DOM

parent.removeChild(elementToRemove);

Modifying Existing DOM Elements in JavaScript.

जावास्क्रिप्ट वेबपेज में किसी वेबपेज डॉम एलिमेंट को सलेक्ट करने के बाद जावास्क्रिप्ट वेब डेवलपर उस डॉम एलिमेंट की डिफ़ॉल्ट कंटेंट, स्टाइल्स, ऐट्रिब्यूट्स, या अन्य पॉपर्टीज़ को मॉडिफाई कर सकते हैं।

So, let’s learn the multiple steps to modify DOM elements in JavaScript.

Modifying Text Content in DOM.

जावास्क्रिप्ट वेब डेवलपर textContent या innerHTML डॉम एलिमेंट प्रॉपर्टीज को यूज़ करके किसी डॉम एलिमेंट में वेबपेज टेक्स्ट एलिमेंट को मॉडिफाई कर सकते हैं।

// Modifying text content in the DOM

const paragraph = document.getElementById(‘existing-paragraph’);

paragraph.textContent = ‘ now you see updated text content’;

// Modifying HTML content in the DOM with HTML tags

const div = document.getElementById(‘existing-div’);

div.innerHTML = ‘<strong>now you see a bold text </strong>’;

Modifying attributes in a DOM element.

जावास्क्रिप्ट वेबपेज में किसी डॉम एलिमेंट की डिफ़ॉल्ट ऐट्रिब्यूट्स को मॉडिफाई करने के लिए वेब डेवलपर setAttribute() मेथड को यूज़ कर सकते हैं।

// Modifying the `href` attribute of a link in a DOM element

const weblink = document.getElementById(‘test-link’);

weblink.setAttribute(‘href’, ‘https://website.com’);

// Modifying the `src` attribute of an image in a DOM element

const image = document.getElementById(‘test-image’);

image.setAttribute(‘src’, ‘home-image.jpg’);

जावास्क्रिप्ट डॉम एलिमेंट में वेब डेवलपर src, href, className, आदि वेबपेज डॉम एलिमेंट पॉपर्टीज़ को अप्लाई करके स्पेसिफिक ऐट्रिब्यूट्स को डायरेक्ट मॉडिफाई कर सकते हैं।

// Modify the `class` attribute directly in JavaScript DOM

const button = document.getElementById(‘test-button’);

button.className = ‘sample-class’; // Modify the entire class attribute in DOM

// Directly modify `id` in DOM element

const heading = document.getElementById(‘test-heading’);

heading.id = ‘sample-heading-id’;

Modifying DOM element styles.

जावास्क्रिप्ट वेबपेज में किसी मौजूदा डॉम एलिमेंट की स्टाइल्स को मॉडिफाई करने के लिए वेब डेवलपर डायरेक्ट उस वेब एलिमेंट के स्टाइल प्रॉपर्टीज को मॉडिफाई कर सकते हैं। जहा वेब डेवलपर सेप्रेटेली मल्टीप्ल सीएसएस पॉपर्टीज़ को डायरेक्ट मॉडिफाई कर सकते हैं, या वन टाइम में एक साथ कई सीएसएस स्टाइल्स को मॉडिफाई कर अप्लाई कर सकते हैं।

// Modify individual CSS properties in a DOM element

const header = document.getElementById(‘header’);

header.style.backgroundColor = ‘green’;

header.style.color = ‘yellow’;

header.style.fontSize = ‘3 em’;

/ Modify multiple styles in a DOM element

header.style.cssText = ‘background-color: aqua; color: blue; font-size: 3em;’;

Modifying classes in a DOM element.

जावास्क्रिप्ट वेब डेवलपर classList प्रॉपर्टीज को यूज़ करके किसी डॉम एलिमेंट की क्लासेज को मॉडिफाई कर सकते हैं।

Class attributes in a DOM element.

  • add() – यह डॉम एलिमेंट में किसी एलिमेंट में एक या अधिक क्लासेज को ऐड करता है।
  • remove()–  यह डॉम एलिमेंट में एक या अधिक क्लासेज को रिमूव करता है।
  • toggle() – यह डॉम एलिमेंट में किसी क्लास को टॉगल करता है, यहाँ यदि क्लास मौजूद नहीं है, तो पहले क्लास को ऐड करता है, यदि क्लास मौजूद है, तो क्लास को रिमूव करता है।
  • contains() – यह डॉम एलिमेंट में यह चेक करता है कि डॉम एलिमेंट में कोई स्पेशल क्लास है, या नहीं है।

// Adding a new class to the DOM element

header.classList.add(‘testclass’);

// Removing an existing class from the DOM element

header.classList.remove(‘testclass’);

// Toggling an existing class from the DOM element

header.classList.toggle(‘testclass’);

// Checks if the DOM element has an existing element with a class

if (header.classList.contains(‘testclass’)) {

console.log(‘dom element with testclass’);

DOM element structure modification (nested elements).

जावास्क्रिप्ट वेब डेवलपर डॉम एलिमेंट में किसी चाइल्ड एलिमेंट को ऐड कर या रिमूव कर भी वेबपेज डॉम एलिमेंट के डिफ़ॉल्ट स्ट्रक्चर को मॉडिफाई कर सकते हैं।

// Adding a new <span> tag inside an existing webpage element in the DOM

const container = document.getElementById(‘container’);

const testSpan = document.createElement(‘span’);

newSpan.textContent = ‘we add a new span element here’;

container.appendChild(testSpan);

// Removing the last child element in the DOM

container.removeChild(container.lastElementChild);

Example of creating a new DOM element, modifying, and removing an existing DOM element in a JavaScript webpage.

<div id=”container”>

  <h2>Let we try to modify dom element structure</h2>

  <button id=”addBtn”>let create New button Element</button>

  <button id=”delBtn”>let delete a Last button element</button>

</div>

// let here we Create a new paragraph and append it to the container element

document.getElementById(‘addBtn’).addEventListener(‘click’, () => {

  const container = document.getElementById(‘container’);

  const testParagraph = document.createElement(‘p’);

  testParagraph.textContent = ‘This is a sample test paragraph’;

  container.appendChild(testParagraph);

});

// let here we Remove the last child element of the element

document.getElementById(‘delBtn’).addEventListener(‘click’, () => {

  const container = document.getElementById(‘container’);

  const lastChild = container.lastElementChild;

  if (lastChild) {

    container.removeChild(lastChild);

  }

});

Summary of Creating, Removing, and Modifying DOM elements.

  • Creating a new DOM element – जावास्क्रिप्ट वेबपेज में नया डॉम एलिमेंट क्रिएट करने के लिए document.createElement() मेथड को अप्लाई करें। इसके बाद इन्हे डॉम में ऐड करने के लिए appendChild() मेथड को यूज़ करें।
  • Removing an existing DOM element – जावास्क्रिप्ट वेबपेज में किसी मौजूदा डॉम एलिमेंट को रिमूव करने के लिए remove() मेथड को यूज़ करें या किसी चाइल्ड एलिमेंट को उसके पैरेंट एलिमेंट से रिमूव करने के लिए parentNode.removeChild() मेथड को यूज़ करें।
  • Modifying DOM elements.
  • DOM element text – जावास्क्रिप्ट वेबपेज में टेक्स्ट या एचटीएमएल कंटेंट को मॉडिफाई करने के लिए textContent या डॉम एलिमेंट में innerHTML को यूज़ कर सकते है।
  • DOM element attributes – जावास्क्रिप्ट वेबपेज में किसी डॉम एलिमेंट की ऐट्रिब्यूट्स जैसे, href, src, id, आदि को मॉडिफाई करने के लिए डॉम एलिमेंट में setAttribute() मेथड को यूज़ करें।
  • css styles – जावास्क्रिप्ट वेबपेज में इनलाइन सीएसएस स्टाइल्स को मॉडिफाई करने के लिए स्टाइल पॉपर्टीज़ का यूज़ करें।
  • DOM element classes – जावास्क्रिप्ट वेबपेज में डॉम क्लासेज को मॉडिफाई करने के लिए classList.add(), classList.remove(), और classList.toggle() मेथड का यूज़ करें।

Leave a Reply