डुप्लिकेट के बिना DOM तत्व प्राप्त करना

मान लीजिए कि हमारे पास पैराग्राफ और एक बटन है:

html<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>

<button>click me</button>

मान लीजिए कि उपयोगकर्ता इन पैराग्राफ पर किसी भी क्रम में क्लिक करता है। आइए ऐसा करें ताकि बटन दबाने पर प्रत्येक पैराग्राफ के अंत में, जिस पर क्लिक किया गया था, एक विस्मयादिबोधक चिह्न जोड़ा जाए। आइए इस कार्य को Set के माध्यम से हल करें।

शुरू करते हैं। सबसे पहले, हमारे तत्वों को चर में प्राप्त करें:

javascriptlet button = document.querySelector('button');
let elems  = document.querySelectorAll('p');

आइए एक नया Set संग्रह बनाएं:

javascriptlet set = new Set;

आइए पैराग्राफ को एक लूप के साथ पुनरावृत्त करें और उन पर क्लिक हैंडलर संलग्न करें:

javascriptfor (let elem of elems) {
  elem.addEventListener('click', function() {
    
  });
}

आइए अब पैराग्राफ पर क्लिक करने पर इस पैराग्राफ को संग्रह में जोड़ें:

javascriptfor (let elem of elems) {
  elem.addEventListener('click', function() {
    set.add(this);
  });
}

इसलिए क्योंकि हम Set संग्रह का उपयोग कर रहे हैं पैराग्राफ पर बार-बार क्लिक करने से पैराग्राफ की डुप्लिकेट प्रति जोड़ने का कारण नहीं बनेगा।

आइए अब बटन पर क्लिक करने पर हमारे संग्रह की सामग्री को पुनरावृत्त करें और प्रत्येक पैराग्राफ के अंत में एक विस्मयादिबोधक चिह्न जोड़ें:

javascriptbutton.addEventListener('click', function() {
  for (let elem of set) {
    elem.textContent = elem.textContent + '!';
  }
});