Typescript - HTML DOM 제어

Typescript DOM 제어

javascript 에서 DOM 조작 및 제어를 할땐 타입과 상관없이 조작하지만

typescript 에선 조작 및 제어를 하기위한 HTML 태그의 타입으로 Narrowing 처리를 해야한다.

tsconfig.json 파일에서 Null 체크를하기위해 옵션을 추가해야한다.

 

"strictNullChecks": true	//	엄격한 null타입 체크

 

 

HTML 태그 속 글자 변경 예시

<h1 id="title">타이틀입니다.</h1>

 

위의 html태그의 글자를 변경하기위해 타입스크립트에서 narrowing 처리를 해야한다.

let title = document.querySelector('#title');
title.innerHTML = '타이틀 변경';    //  narrowing이 필요하다. 에러


// narrowing 처리 방법1
if (title != null) { // null 처리를 하여 narrowing 처리
    title.innerHTML = '타이틀 변경';
}

// narrowing 처리 방법2
if (title instanceof Element) { // 선택자의 타입의 narrowing 처리 
    title.innerHTML = '타이틀 변경';
}

// narrowing 처리 방법3
let title = document.querySelector('#title') as Element;	// as 문법으로 처리
title.innerHTML = '타이틀 변경'; 

// narrowing 처리 방법4
if (title?.innerHTML) { // ?.를사용항여 narrowing 처리 (optional chaining)
    title.innerHTML = '타이틀 변경';
}

 

 

 

반응형

 

 

 

HTML 태그 속 속성 변경 예시

<a href="www.google.com" class="link">Link</a>

 

위의 html a태그의  href 속성을 변경하기위해 narrowing 처리를 해야한다.

let link = document.querySelector('.link');	
link.href = 'https://www.tistory.com';	// narrowing 처리가 필요하다.

if(link instanceof Element) {	//	href속성은 Element 타입이 아니다.
    link.href = 'https://www.tistory.com'; // 에러가난다
}

if(link instanceof HTMLAnchorElement) {	// href속성은 HTMLAnchorElement 속성의 타입이다
    link.href = 'https://www.tistory.com'; // 정상 작동
}

 

HTML의 대표적인 타입으로 Element 타입이 있다.

Element 타입을 상속받는 HTMLAnchorElement, HTMLHeadingElement, HTMLButtonElement 등 여러가지 타입이 있어서 각각의 태그에 따라 상속받는타입을 사용하요 narrowing 처리 해야한다.

 

HTML 버튼태그 이벤트 예시

<button id="btn">Button</button>

 

위의 html button태그의 이벤트설정하기위해 narrowing 처리를 해야한다.

let btn = document.querySelector('#btn');
btn?.addEventListener('click', function() {	// ?. 을 사용하여 narrowing 처리
    alert('Click !');
});