---

DOM

• document.querySelector 를 이용해 선택하면,
• 해당 요소는 Element | null union type으로 선택됨.
• 따라서 Narrowing & Assertion 등 이 필수.

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

• DOM에 대한 내용은 여기.

instanceof

• 가장 추천하는 방법.
• DOM 요소를 선택할 때 instanceof HTMLElement로 선택 가능.

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

• <태그>의 속성을 디테일하게 설정하기 위해서 기억할 키워드.
  • <h*> => HTMLHeadingElement
  • <a> =>HTMLAnchorElement
  • <button> =>HTMLButtonElement

let 제목 = document.querySelector('#title');
let 링크 = document.querySelector('#.link');
let 버튼 = document.querySelector('#button');

if (제목 instanceof HTMLHeadingElement) {
  제목.innerHTML = '반가워요';
}
if (링크 instanceof HTMLAnchorElement) {
  링크.href = 'https://kakao.com';
}
if (버튼 instanceof HTMLButtonElement) {
  버튼.addEventListener('click', function () {});
}

옵셔널 체이닝(Optional chaining)

• 옵셔널 체이닝에 대한 내용은 여기.

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

let 버튼 = document.querySelector('#button');
버튼?.addEventListener('click', function () {});

Assertion

• 비추 방법.

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

---