Дубликатсыз DOM элементтердин алуусу

Бизде абзацтар жана баскыч бар деп коёлу:

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

<button>click me</button>

Колдонуучу бул абзацтарга ыктыярдуу тартипте чыкылдатышы мүмкүн. Баскычты басканда, ар бир чыкылдатылган абзацтын аягына үн сүрөөчү белги кошулсун кылалы. Маселени Set аркылуу чечейли.

Баштайлы. Адегенде биздин элементтерибизди өзгөрмөлөргө алалы:

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

Жаңы Set коллекциясын түзөлү:

let set = new Set;

Абзацтарды цикл менен айланып өтүп, аларга чыкылдатуу иштеткичтерин коёлу:

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

Эми абзацты чыкылдатканда, аны коллекцияга кошолу:

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

Set коллекциясын колдонгондуктан абзацты кайра чыкылдатуу ага дубликат кошумчалоого алып келбейт.

Эми баскычты чыкылдатканда, биздин коллекциянын ичиндегилерди айланып өтүп, ар бир абзацтын аягына үн сүрөөчү белги кошолу:

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

Абзацтар жана баскыч берилген. Колдонуучу бул абзацтарга ыктыярдуу тартипте чыкылдатат. Баскычты басканда, ар бир чыкылдатылган абзацтын аягына үн сүрөөчү белги кошулсун кыл.