중복 없이 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 + '!';
	}
});

문단들과 버튼이 주어졌습니다. 사용자가 임의의 순서로 이러한 문단들을 클릭합니다. 버튼을 누르면 클릭된 각 문단의 끝에 느낌표가 추가되도록 만드세요.