JavaScript에서 요소 가져오기 오류

때로는 초보 프로그래머들이 DOM 요소 그룹을 가져오기 위해 querySelectorAll 메서드 대신 querySelector 메서드를 사용하는 실수를 합니다.

이 오류의 특징적인 점들을 살펴보겠습니다. 다음과 같은 단락이 있다고 가정해 봅시다:

<p>1</p>
<p>2</p>
<p>3</p>

어떤 프로그래머가 이 단락들의 텍스트를 가져와 콘솔에 출력하기로 결정했습니다. 이를 위해 변수에 이 요소들에 대한 참조를 가져오려 했지만, 잘못된 메서드를 사용했습니다:

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

그런 다음 그는 반복문을 사용하여 단락들을 순회하고 각 단락의 텍스트를 콘솔에 출력하기로 했습니다:

for (let elem of elems) {
	console.log(elem.textContent);
}

결과적으로 콘솔에는 특징적인 오류인 elems is not iterable이 나타납니다. 이 오류는 변수 elems가 이터러블이지 않다는 것을 의미합니다. 즉, 배열이나 for-of 반복문으로 순회할 수 있는 것이 아닙니다.