div태그 안 img button 태그 질문있습니다.

타입스크립트로 html 타입 건드리는 거 첫번째 버튼누를시 이미지 바뀌는 것을 구현했는데
html파일안에서 
<div id="fidiv">
    < img src="1.png" alt="noimg" id="imgg">
    <button id="imgchange">이미지교체</button>
</div>
이런식으로 div 태그안에 넣고 진행했습니다.
근데 img태그는 let imgg = document.getElementById("imgg"); 이렇게 가지고오면 null값이 오더라고요
그래서 div태그를 먼저 불러와서 div태그안 img 를 불러오게 아래와 같이 작성하였는데
이 같은 논리면 이미지 교체 버튼인 button 태그도 div 태그안에서 불러와야만 되는거 아닌가요?
let imgbutton = document.getElementById("imgchange"); 똑같이 id를 사용해서 가져오는데 오류 없이 잘 가져와지네요

let isImg: boolean = true;
let divv = document.getElementById("fidiv");
let imgg = divv?.querySelector("img") as HTMLImageElement;
let imgbutton = document.getElementById("imgchange");
if (imgbutton instanceof HTMLButtonElement) {
  imgbutton.addEventListener("click", function () {
    if (isImg === true) {
      imgg.src = "2.png";
      isImg = false;
    } else {
      imgg.src = "1.png";
      isImg = true;
    }
  });
}