ထပ်နေသော DOM element များကို မရယူဘဲ ရယူခြင်း

ကျွန်ုပ်တို့တွင် စာပိုဒ်များနှင့် ခလုတ်တစ်ခု ရှိသည်ဆိုပါစို့။

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

<button>click me</button>

အသုံးပြုသူသည် ထိုစာပိုဒ်များကို စိတ်ကြိုက် အစဉ်အတိုင်း နှိပ်နိုင်သည်။ ခလုတ်ကို နှိပ်လိုက်သည့်အခါ နှိပ်ခဲ့သော စာပိုဒ်တိုင်း၏ နောက်ဆုံးတွင် အာမေဍိတ်အမှတ် ပေါင်းထည့်ပေးသည့် လုပ်ဆောင်ချက်ကို ဖန်တီးကြပါစို့။ ဤပြဿနာကို Set ဖြင့် ဖြေရှင်းပါမည်။

စတင်ကြရအောင်။ ပထမဦးစွာ ကျွန်ုပ်တို့၏ element များကို variable များထဲသို့ ရယူပါမည်။

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

Set အသစ်တစ်ခု ဖန်တီးပါမည်။

let set = new Set;

စာပိုဒ်များကို loop ဖြင့် ပတ်ပြီး ၎င်းတို့ပေါ်တွင် click event listener တပ်ဆင်ပါမည်။

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

အခုဆိုရင် စာပိုဒ်တစ်ခုကို နှိပ်လိုက်သည့်အခါတိုင်း ထို စာပိုဒ်ကို collection ထဲသို့ ပေါင်းထည့်ပါမည်။

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

ကျွန်ုပ်တို့သည် Set collection ကို အသုံးပြုသောကြောင့် စာပိုဒ်တစ်ခုပေါ်တွင် ထပ်မံနှိပ်ခြင်းသည် ထပ်တူညီသော စာပိုဒ်ကို ထပ်မံပေါင်းထည့်ခြင်း မဖြစ်စေပါ။

အခုဆိုရင် ခလုတ်ကို နှိပ်လိုက်သည့်အခါ ကျွန်ုပ်တို့၏ collection ထဲရှိ အရာများကို ပတ်ပြီး စာပိုဒ်တိုင်း၏ နောက်ဆုံးတွင် အာမေဍိတ်အမှတ် ပေါင်းထည့်ပေးပါမည်။

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

စာပိုဒ်များနှင့် ခလုတ်တစ်ခု ရှိသည်။ အသုံးပြုသူသည် ထိုစာပိုဒ်များကို စိတ်ကြိုက် အစဉ်အတိုင်း နှိပ်သည်။ ခလုတ်ကို နှိပ်လိုက်သည့်အခါ နှိပ်ခဲ့သော စာပိုဒ်တိုင်း၏ နောက်ဆုံးတွင် အာမေဍိတ်အမှတ် ပေါင်းထည့်ပေးသည့် လုပ်ဆောင်ချက်ကို ဖန်တီးပါ။