id에 .(pariod)이 있는 element querySelector

작성일 Edited on In ,

원인

document.querySelector를 사용해 id에 .이 포함된 element를 선택시

1
2
3
4
5
6
<div id="id.has.pariod"></div>
<script>
  var $div = document.querySelector('#id.has.pariod');
  console.log($div);
  // => undefined;
</script>

undefined를 반환하며 선택이 되지 않는다.
.(pariod)는 class 선택자라 중복이되어 발생하는 오류이다.

해결

.에 역슬래시를 2개 붙혀 escape 시킨다.

1
2
3
var $div = document.querySelector('#id\\.has\\.pariod');
console.log($div);
// => <div id="id.has.pariod"></div>