Upataji wa Vipengele vya DOM bila Kurudia

Wacha tuwe na aya na kifungo:

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

<button>click me</button>

Wacha mtumiaji abonyeze kwenye aya hizi kwa mpangilio wowote. Wacha tufanye hivi, ili kubonyeza kifungo mwisho wa kila aya, ambayo ilibonyezwa, iwe imeongezwa alama ya mshangao. Tatua tatizo kupitia Set.

Tuanze. Kwanza tupate vipengele vyetu katika vigeugeu:

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

Tuunde mkusaniko mpya wa Set:

let set = new Set;

Tupitie aya kwa kitanzi na kuweka kichungi cha kubonyeza:

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

Wacha sasa kwa kubonyeza kwenye aya tuongeze aya hii kwenye mkusaniko:

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

Kwa sababu tunatumia mkusaniko wa Set kubonyeza tena kwenye aya haitasababisha kuongezwa kwa nakala ya aya.

Wacha sasa kwa kubonyeza kwenye kifungo tupitie yaliyomo kwenye mkusaniko wetu na kila aya mwishoni tuongeze alama ya mshangao:

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

Zipo aya na kifungo. Mtumiaji hubonyeza kwenye aya hizi kwa mpangilio wowote. Fanya hivi, ili kubonyeza kifungo mwisho wa kila aya, ambayo ilibonyezwa, iwe imeongezwa alama ya mshangao.