[TS] 타입스크립트에서 DOM 조작하기, HTML 조작하기.

Typescript 에서 DOM 조작하기 , HTML 조작하기.

---

안녕하세요. 오늘은 타입스크립트에서 DOM을 조작하기 위한 방법에 대해 포스팅 하려고 합니다.

간단한 예시를 통해 DOM조작 방법을 확인해 보겠습니다.

 

 

html 예시 : 아래와 같은 html이 있을 때, 타입스크립트로 돔을 조작해보겠습니다.

<h4 id = "title">hello, gwang ! </h4>
<a href = "kakao.com" class = "link">link</a>
<button id = "button">button</button>
<img id = "image" src = "big.jpg">
<script src = "index.js"></script>

 

타입스크립트에서 DOM 조작하기  :  type narrowing을 이용한 DOM조작.

let title = document.querySelector('#title');
// innerHTML속성을 제어하기 위한 2가지방법
// 아래 세가지 방법 모두 가능하지만 'instanceof'를 사용하는게 가장 일반적이라고 합니다.
if(title !== null) 제목.innerHTML = 'bye'
if(title instanceof Element){
  title.innerHTML = 'bye'
}
if(title?.innerHTML){
  title.innerHTML = 'bye'
}

// a태그의 href속성을 제어하기 위한 방법
// a태그의 href를 조작하기 위해서는 'HTMLAnchorElement'라는 조금 특이한 타입을 이용합니다.
// HTML속성에 맞는 각각의 타입이 정말 많은데요.. 관련 링크는 아래 따로 첨부하겠습니다.
let link = document.querySelector('.link');
if(link instanceof HTMLAnchorElement){
  link.href  = 'https://cafe.naver.com/gathertown'
}

// img태그의 src속성을 제어하기 위한 방법
// img태그의 href를 조작하기 위해서는 'HTMLImageElement'라는 조금 특이한 타입을 이용합니다.
let image = document.querySelector('#image');
if(image instanceof HTMLImageElement){
  image.src = 'small.jpg';
}

 

Q. 각 속성에 대한 HTML타입은 어떻게 알 수 있나요 !?

> vsc를 사용할경우 HTML까지만 입력하시면 자동완성으로, HTML관련 타입들이 모두 나옵니다.

 

이런식으로 말이죠!

네이밍만보고, 이거구나 싶은거를 찾아서 시도해봐도 좋지만.. 아무래도 쉽진 않겠죠.. !?

 

그래서 HTML타입에 대한 자세한 설명들이 있는 링크를 같이 첨부합니다!

자주 쓰는 타입에 대해서는 어느정도 익혀두시면 좋을 것 같습니다.

---

@참고링크  

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement#example