HTML 변경

자바스크립트의 원래 목적은 html 조작과 변경이다.

실습

HTML

(index.html)

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

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

<h4> 제목 변경

let changeTitle = document.querySelector('#title');
changeTitle.innerHTML = 'welcome' // error: 개체가 'null'인 것 같습니다.

셀렉터로 html을 찾으면 타입이 Element | null 이기 때문에 error 발생

changeTitle이라는 변수가 union type이기 때문에 if문으로 type narrowing 하거나 as 문법으로 assertion 하면 된다.

1. narrowing

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

2. instanceof 사용하는 narrowing 방법

let changeTitle = document.querySelector('#title');
  if (changeTitle instanceof HTMLElement) {
    changeTitle.innerHTML = 'welcome'
  }

3. assertion

let changeTitle = document.querySelector('#title') as HTMLElement;
changeTitle.innerHTML = 'welcome'

4. optional chaining

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

a 태그의 href 속성 변경

let links = document.querySelector('#link');
if (links instanceof HTMLElement) {
  links.href = 'https://kakao.com' 
} // error: 'Element' 형식에 'href' 속성이 없습니다.

변경

let links = document.querySelector('#link');
if (links instanceof HTMLAnchorElement) {
  links.href = 'https://kakao.com' 
}

a 태그는 HTMLAnchorElement
img 태그는 HTMLImageElement
h4 태그는 HTMLHeadingElement
...

위처럼 narrowing 해줘야 html 속성 수정 가능하다.

이벤트리스너

let btn = document.getElementById('button');
btn.addEventListener('click', function(){
  console.log('Hello')
}) // error: 개체가 'null' 인 것 같습니다.

해결방법

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

optional chaining에서 ?. 연산자를 이용하면 object에 존재하면 뽑아주거나 존재하지 않다면 undefined로 남겨라 라는 뜻이다.

이미지 변경

<img id="image" src="test.jpg"> 에서 sr를 new.jpg 파일로 변경

let img = document.querySelector('#image');
  if (img instanceof HTMLImageElement) {
    img.src = 'new.jpg'
  }

참고 및 출처
코딩애플 강의