뭔가 금방 코딩할 것 같았던 계산기를 제대로 구현하려니 어려운 점이 많았다.
querySelector를 이용하여 적재적소에 변수를 가지고 놀아야하는데 생각처럼 잘 안된다.
기본적인 사용 방법은 익숙해졌지만 점차 익숙해지도록 노력해야겠다.
상당히 많이 쓰는 메소드인 듯 하다.

querySelector

기본 형태

document.querySelector(selectors);

예제

const el = document.querySelector(".myclass");
// html문서에서 "myclass"라는 클래스를 사용하는 첫 번째 요소를 반환

const el = document.querySelector(".myclass").textContent = 'abcd';
// html문서에서 "myclass"라는 클래스 텍스트 컨텐트를 'abcd'로 변환

심화 예제

html

<div class="user-panel main">
  <input name="login" />
</div>

javascript

const el = document.querySelector("div.user-panel.main input[name=login]");
/* 클래스가 "user-panel main"인 <div>(<div class="user-panel main">) 안의 
   <input> 내의 이름이 "login" 첫 번째 요소 반환 */