CSS 선택자로 문서 요소를 찾고 결과가 없을 때를 처리합니다.
querySelector는 첫 요소 또는 null을, querySelectorAll은 현재 시점의 정적 NodeList를 반환합니다. id가 필요하면 getElementById도 사용할 수 있습니다. 스크립트가 실행될 때 요소가 이미 만들어졌는지와 선택자가 정확한지 확인해야 합니다.
코드를 읽을 때는 document.querySelector(".item"); document.querySelectorAll(".item"); 부분부터 찾으세요. 현재 값과 실행 순서를 줄마다 적어 보면 문법을 외우지 않아도 결과를 예측할 수 있습니다.
사용자의 입력이나 브라우저에서 일어난 사건에 반응할 때 사용합니다. 요소가 없거나 권한이 거부되는 경우, 동적으로 추가된 요소까지 같은 흐름에서 처리하세요.
실행하기 전에 예상 결과를 짧게 적은 뒤 존재하지 않는 선택자를 조회하고 optional chaining으로 안전하게 처리하세요. 실제 출력이 다르면 콘솔에 처음 나타난 오류와 그 직전 값을 차례로 확인하세요.
querySelector 결과가 항상 있다고 단정하고 바로 속성을 읽으면 null에서 오류가 납니다.
직접 바꿔보세요존재하지 않는 선택자를 조회하고 optional chaining으로 안전하게 처리하세요.