JS - 텐키리스 계산기 #5 (querySelector)

1. 코드 작성

<script>
    const $cal = document.querySelector('#cal')
    const $calOutput = document.querySelector('#calOutput')
    //연산자는 따로 표시되도록 변수 할당
    const howtoCal = ["p","[",";","'"];
</script>

2. querySelector의 사용

qureySelector와 getElementbyId는 사용법과 결과가 비슷하나, 보통은 getElementbyId를 더 많이 쓴다고 한다. 다만 자바스크립트를 학습할 때 한번은 나오는 내용이라, 적용해보았다.

1. html 구성요소의 값 추출법?

document.querySelector('#id이름').textContent 이러한 식으로 작성해주면 된다.

2. 특수한 문자가 포함된 id에서의 Error

내가 작성한 요소들에서 , .등의 특수한 문자가 포함되어 있는 것들이 있다.

이런 요소들에서 querySelector를 사용하면

---

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#,' is not a valid selector.

---

이러한 오류가 발생하게 된다. 이는 특수 문자를 이스케이프 해줘야하기 때문이다.
따라서 앞에 \\를 추가해주어야 한다.
https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector#%ED%8A%B9%EC%88%98_%EB%AC%B8%EC%9E%90_%EC%9D%B4%EC%8A%A4%EC%BC%80%EC%9D%B4%ED%94%84