querySelector 사용중 오류 Failed to execute 'querySelector' on 'Document'

Failed to execute 'querySelector' on 'Document'

 

랜덤으로 생성되는 클래스명을 바인딩하려던 중에 만난 오류다.

이는 클래스명이 숫자로 시작할 때 오류가 난다고한다.

위 오류 본문을 보면 클래스명이 숫자로 시작함을 알 수 있다.

제일 깔끔한 방법은 숫자로 시작하는 클래스명을 안 쓰는 것이다.

하지만 불가피한 상황일 때는 아래의 방법으로 시도해 보자.

해결방법 -1 

클래스명을 생성 시 맨 앞에 특정 문자열을 추가해 준 뒤 동일하게 요소를 선택하면 된다.

관련 로직이 오류 없이 잘 진행된다.

const first = document.querySelector(`.uid${className}`);

 

해결방법 -2

어트리뷰트 전체를 넘겨주는 방법이다.

잘 보면 클래스를 나타내는 '.'이나 아이디를 나타내는 '#'이 없음을 주의하자. 

const first = document.querySelector("[class='1box']");