[Typescript] HTML 변경과 조작

자바스크립트의 원래 목적? html 조작과 변경

 

index.html

<h4 id="title">안녕하세요</h4>
<a href="naver.com">링크</a>
<button id="button">버튼</button>

<script src="index.js"></script>
</html>

 

타입스크립트로 HTML 변경과 조작

 

HTML 조작시 narrowing을 해야하는데 5가지 방법이 있다.

 

1. 

let 제목 =  document.querySelector('#title');
if(제목 != null){
    제목.innerHTML = '반가워요'
}

 

2. instance 연산자 <- 가장 많이쓰임

 

let 제목 =  document.querySelector('#title');
if(제목 instanceof Element){
    제목.innerHTML = '반가워요'
}

왼쪽에 class명 기입 (Element), 오른쪽에 object 기입 (제목)

제목이 Element의 자식이냐? 즉 instance냐? (만들어진애) => 맞으면 true를 퉤퉤퉤 해줌

제목이 Elment로 기인해서 true가 된다.

 

3. as로 사기치기

 

let 제목 =  document.querySelector('#title') as Element
제목.innerHTML = '반가워요'

 

4. object에  ?. 붙이는것

 

let 제목 =  document.querySelector('#title') 

if(제목?.innerHTML){
    제목.innerHTML ='반가워요'
}

 

1. 제목에 innerHTML 있으면 출력해주고

2. 없으면 undefined 뱉으삼

 

5. 귀찮은 strick모드 끄면됨 (false)로