(Javascript 에러) Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document'

트위터 클론 코딩 중이다.

게시물은 <ul> 태그의 후손 선택자 <li>로

열거되어있다.

이벤트 핸들러 handleDeleteTweet

리액트 onClick 이벤트 핸들러를 활용한

해당 게시물 삭제 기능을 구현하고 있다.

 

 

querySelector로 id값을 가진 객체를 selected에 담았다.

이벤트 핸들러 handleDeleteTweet로

value값 tweet.id를 전달하고

tweet.id의 값과 동일한 id 값을 가진 게시물을

(여기서는 삭제버튼을 클릭한 게시물)

변수 selected에 할당하고 삭제해주는 것이다.

 

이때 querySelector의 인자로 id를 넣어주었는데

SyntaxError 발생하였다.

querySelector의 인자로 숫자 1이 적합하지 않다고 한다.

해결방법을 찾아보았다.

querySelector는 인자값으로 숫자를 받지 않는다고 한다.

id는 고유의 값인데 숫자를 고유의 값으로 인식하지

않는다는 이유다.

 

그래서 id의 값이 숫자로만 이루어져있고

그 id값으로 태그를 선별해야 할 경우

getElementById 함수를 사용하면

숫자 id를 인식할 수 있다고 한다.

 

stackoverflow에 동일 질문이 있다.

https://stackoverflow.com/questions/37270787/uncaught-syntaxerror-failed-to-execute-queryselector-on-document

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document'

 

Method querySelector method uses CSS3 selectors for querying the DOM
and CSS3 doesn't support
ID selectors that start with a digit: