querySelector가 동작하지 않아요 :( | id started with number

개발 중 number로 indexing이 되어있는 element를 가져와야 했었습니다.

저는 querySelector 메서드를 선호하기 때문에 CSS3의 선택자를 사용하는 querySelector를 사용했습니다.

(이유는 이 게시글을 참조해주세요!)

> document.querySelector('#1')

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#1' is not a valid selector.
	at <anonymous>:1:10

 

하지만 위와 같이 실행했을 때 에러가 발생하게 됩니다

왜 안 될까요?

 

앞서 querySelector는 CSS3의 선택자를 사용한다는 언급이 있었는데요

 

CSS3 선택자는 "숫자로 시작하는 id에 대해 selector를 지원하지 않습니다."

 

이러한 규칙 때문에 querySelector는 error를 던집니다.

 

그러하여 getElementById 메서드를 사용하는 것이 일반적일 수 있겠으나..

 

정 querySelector를 사용해야 하는 상황이 온다면 (코드 컨벤션 등..)

 

아래와 같은 방법으로 사용할 수 있습니다.

 

> document.querySelector('#\\31 ')

첫 번째 문자열이 숫자라면, 해당 문자에 escape처리를 통해 CSS3 선택자가 정상적으로 읽도록 하게 할 수 있습니다.

 

1은 U+0031에 해당하여 \31로 escape 처리하였습니다. (맨 뒤 space 필요)

 

하지만 위 방법을 통해 코드 컨벤션을 지키는 것 보단 getElementById 메서드를 사용하는 것이 더욱 좋아 보입니다. 🤔