Blog

Selecting elements using getElementById() querySelector() etc In Hindi

जावास्क्रिप्ट प्रोग्रामिंग में जब इंटरनेट यूजर किसी वेबसाइट वेबपेज कंटेंट रिसोर्सेज के साथ इंटरैक्ट करता हैं, तो वहा वेब ब्राउज़िंग कंटेंट रिसोर्सेज प्रोसेस एक्सेस में डॉम एलिमेंट्स सलेक्शन एक्टिविटीज परफॉर्म होती है। वेब यूजर वेब कंटेंट एलिमेंट्स को सलेक्ट या ऑपरेट करने के लिए कई मेथड को यूज़ कर सकते हैं. जहा डॉम ऑब्जेक्ट सलेक्शन में हर एक टास्क एक्टिविटीज के अलग-अलग यूज़ केस हो सकते हैं। यहाँ, हम जावास्क्रिप्ट प्रोग्रामिंग में getElementById(), getElementsByClassName(), querySelector(), और querySelectorAll() जैसे सलेक्शन मेथड को यूज़ करके वेब कंटेंट में डॉम में एलिमेंट्स सलेक्शन के मल्टीप्ल स्टेप्स को फॉलो करेंगे।

JavaScript getElementById() DOM element selection method.

जावास्क्रिप्ट डॉम सलेक्शन प्रोसेस में getElementById() का यूज़ करके किसी वेब एलिमेंट को उसकी id ऐट्रिब्यूट्स के आधार पर सलेक्ट करने में किया जाता है। यह मेथड पहले डॉम एलिमेंट का रेफरेंस प्रोवाइड करता है. जहा ऑब्जेक्ट मैचिंग id हो या अगर ऐसा कोई एलिमेंट मौजूद न हो तो null वैल्यू को डिस्प्ले करता है।

getElementById() DOM element syntax.

const element = document.getElementById(‘id-name’);

यहाँ मौजूदा वेबपेज में id-name उस वेब कंटेंट या एलिमेंट की id ऐट्रिब्यूट्स है, जिसे प्रोग्रामर उस वेबपेज में सलेक्ट करना चाहता हैं।

<div id=”header”>This is a test website</div>

<button id=”testButton”>Click Button</button>

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

console.log(header.textContent); // “This is a test website”

const button = document.getElementById(‘testButton’);

button.textContent = “Touch Me!”;

getElementsByClassName() element selection method in JavaScript.

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

Syntax of getElementsByClassName() element selection.

const elements = document.getElementsByClassName(‘class-name’);

यहाँ इस प्रोसेस में class-name वेबपेज में वह क्लास नाम है, जिसे प्रोग्रामर वेबपेज में टारगेट या यूज़ करना चाहता हैं।

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

Example of getElementsByClassName() element selection.

<div class=”box”>Box First</div>

<div class=”box”>Box Second</div>

<div class=”box”>Box Third</div>

<div class=”box”>Box Four</div>

const boxes = document.getElementsByClassName(‘box’);

console.log(boxes.length); // here boxes length is 4

// let we Loop it through the HTMLCollection

for (let p = 0; p < boxes.length; p++) {

  boxes[p].style.backgroundColor = “green”;

}

getElementsByTagName() element selection method in JavaScript.

जावास्क्रिप्ट डॉम सलेक्शन प्रोसेस में getElementsByTagName() का यूज़ किसी स्पेसिफिक टैग नाम के सभी वेबपेज एलिमेंट सलेक्शन है, जैसे <div>, <p>, <span>, आदि, टैग एलिमेंट को सलेक्ट करने में किया जाता है। यह मेथड वेब डेवलपर को अवेलेबल टैग नाम वाले वेब एलिमेंट का एक लाइव एचटीएमएलकलेक्शन वैल्यू को रिटर्न करता है।

getElementsByTagName() element selection method syntax.

const elements = document.getElementsByTagName(‘tag-name’);

यहाँ किसी वेबपेज में tag-name टैग का वह नाम है, जो की एचटीएमएल वेबपेज में वेबपेज डेवलप और डिज़ाइन करने में यूज़ होते है. जैसे ‘div’, ‘p’, ‘h1’,आदि है।

getElementsByTagName() element selection method example.

<p>This is a test paragraph.</p>

<p>This is sample paragraph.</p>

<p>This is basic paragraph.</p>

<div>This is a div webpage element.</div>

const paragraphs = document.getElementsByTagName(‘p’);

console.log(paragraphs.length); // here paragraph length is 3

// let use Loop through paragraphs element with tag name from start to end

for (let p = 0; p < paragraphs.length; p++) {

  paragraphs[p].style.color = “orange”;

}

querySelector() element selection method in JavaScript.

जावास्क्रिप्ट डॉम सलेक्शन प्रोसेस में querySelector() वेब डेवलपर को सीएसएस स्क्रिप्ट सेलेक्टर से मैच होने वाले पहले वेबपेज एलिमेंट को सलेक्ट करने का फीचर्स प्रोवाइड करता है। जहा यह मेथड एक पॉवरफुल सीएसएस सलेक्शन एक्टिविटीज है, जिससे की यह मौजूदा वेबपेज में किसी भी वैलिड सीएसएस सेलेक्टर को एक्सेप्ट करता है. जिसमें वेबपेज एलिमेंट क्लास, आईडी, टैग नाम, और अधिक जटिल सेलेक्टर में जैसे, डिसेंडेंट सेलेक्टर, स्यूडो-क्लास, आदि होते हैं।

querySelector() element selection method syntax.

const element = document.querySelector(‘css-selector’);

जावास्क्रिप्ट वेबपेज में किसी क्वेरी सिलेक्टर css-selector एक वैलिड सीएसएस सेलेक्टर स्ट्रिंग मेथड है।

Example of querySelector() element selection method.

<div id=”container”>

  <h1 class=”title”>this is a sample webpage</h1>

  <p class=”text”>This is a example of paragraph</p>

</div>

const title = document.querySelector(‘.title’);

console.log(title.textContent); // “this is a sample webpage”

const container = document.querySelector(‘#container’);

console.log(container); // here all The entire <div> tag with id in “container”

More complex selectors:

// let Select the first paragraph <p> inside the #container div tag

const paragraph = document.querySelector(‘#container p’);

console.log(paragraph.textContent); // “This is a example of paragraph”

// let Select the element use a pseudo-class like first child class

const firstChild = document.querySelector(‘#container p:first-child’);

console.log(firstChild.textContent); // “This is a example of paragraph”

querySelectorAll() selection method in JavaScript.

जावास्क्रिप्ट डॉम सलेक्शन प्रोसेस में querySelectorAll(), querySelector() के इक्वल सलेक्शन मेथड है, जहा यह केवल फर्स्ट मैच केस वाले एलिमेंट को रिटर्न करने के बजाय, यह दिए गए सीएसएस सलेक्टर से मैच होने वाले सभी एलिमेंट की एक स्टैटिक NodeList वैल्यू को रिटर्न करता है। यहाँ आल मॉडिफिकेशन रिजल्ट लाइव नहीं होता है, इसका मतलब है की डॉम में मॉडिफिकेशन होने पर यह ऑटोमेटिकली आर्डर में अपडेट नहीं होता है।

Syntax of querySelectorAll() selection method.

const elements = document.querySelectorAll(‘css-selector’);

जावास्क्रिप्ट वेबपेज में css-selector एक वैलिड एलिमेंट सीएसएस सलेक्टर स्ट्रिंग मेथड है यह मेथड एक स्टैटिक NodeList लाइव नहीं वैल्यू को रिटर्न करता है।

Example of querySelectorAll() selection method.

<div class=”box”>Box object 1</div>

<div class=”box”>Box object 2</div>

<div class=”box”>Box object 3</div>

<div class=”box”>Box object 4</div>

const boxes = document.querySelectorAll(‘.box’);

console.log(boxes.length); // here is a 4 box element length

// let Loop box element through the NodeList

boxes.forEach(box => {

  box.style.backgroundColor = “pink”;

});

Javascript dom Differences Between the multiple selection Methods

Conclusion of getElementById(), getElementsByClassName(), querySelector(), and querySelectorAll() in JavaScript.

जावास्क्रिप्ट प्रोग्रामिंग में ये मेथड जावास्क्रिप्ट वेब डेवलपर को वेबपेज एलिमेंट सलेक्शन में डॉम ऑब्जेक्ट एलिमेंट के सलेक्शन और उन्हें मेन्युप्लेट करने में हेल्प करते हैं। यहाँ वेब डेवेलपर अपनी वेब डेवलपमेंट जरूरत के आधार पर डिजायर सलेक्शन मेथड को समझकर उसे अप्लाई कर सकता है, यहाँ वेब डेवलपर डॉम एलिमेंट को अप्लाई करके वेबपेजों के स्ट्रक्चर और डिफ़ॉल्ट बिहैवियर के साथ इफेक्टिव आर्डर में इंटरैक्ट और उन्हें मॉडिफाई कर सकते हैं।