JavaScript에서 요소를 가져올 때 발생하는 오류

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

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

<p>text</p>

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

let elem = document.querySelectorAll('p');

그런 다음 프로그래머는 단락 텍스트를 변경하려고 시도했습니다. 그러나 단락 텍스트는 변경되지 않았습니다:

elem.textContent = '!!!'; // 작동하지 않음

이때 콘솔에는 아무런 오류도 나타나지 않았습니다. 문제는 유효한 연산이 수행되었지만, 하나의 요소가 아닌 그룹에 대해 수행되었다는 점입니다. 그룹 요소의 텍스트를 바로 읽거나 변경할 수는 없으며, 반복문으로 각 요소를 하나씩 순회하며 개별적으로 접근해야만 가능합니다.

오류를 발견하는 방법

프로그래머가 이 오류를 발견하기 위해 어떻게 행동해야 하는지 살펴보겠습니다. 사실, 어느 정도 경험이 있다면 특징적인 징후를 통해 이 오류를 쉽게 발견할 수 있습니다.

하지만 그렇지 않다고 가정해 봅시다. 오류를 찾을 때 프로그래머의 첫 번째 행동은 콘솔에 변수 값을 출력하는 것이어야 합니다. 그의 경우 변수가 하나만 있습니다 - elem. 이 변수의 값을 출력하고 그 안에 무엇이 들어 있는지 확인해야 합니다:

let elem = document.querySelectorAll('p');
console.log(elem); // 단일 요소가 아닌 배열을 출력함

콘솔에서 변수 안에 하나의 요소가 아닌 배열이 들어 있다는 것을 즉시 확인할 수 있습니다. 이는 요소를 가져오는 메서드에서 실수가 있었다는 명확한 힌트를 즉시 제공합니다.