[04] Type Script Html 조작

---

Type script Html 조작

(1) 세팅

"strictNullChecks": true

• tsconfig.json 파일에 strictNullChecks를 true로 변경

(2) instanceof

• instanceof 연산자를 이용

	let title - document.querySelector('#title');
	if( title instanceof HtmlElement){
      title.innerHTML = '변경'
    }

• ex) a 태그의 href 속성 변경

	let link = document.querySelector('#link');
	if(link instanceof HTMLAnchorElement){
      link.href = 'www.google.com'
    }

태그	타입명칭
a	HTMLAnchorElement
img	HTMLImageElement
h4	HTMLHeadingElement

• 검색 또는 자동완성으로 타입 명칭 알아보기

(3) narrowing

	let title = document.querySelector('#title');
	if(title != null) {
      title.innerHTML = '변경'
    }

(4) optional chaining

	let title = document.querySelector('#title');
if(title?.innerHTML != undefined){
   title.innerHTML = '변경'
   }

• 옵셔널 왼쪽 object 자료안에 .innerHTML이 존재하면 사용하고 없으면 undefined 출력

Event Listener 사용

	let btn = document.getElementById('button');
	btn?.addEventListener('click', function(){
      console.log('Hello')
    })

• optional chaining 사용 시 object의 자료를 뽑는다
• object가 존재하지 않으면 undefined 출력