[책] 자바스크립트 코드 레시피 278 - 94일차

타이틀 변경하기

• 타이틀을 동적으로 변환하고 싶을 때
• 읽지 않은 메시지 건수를 타이틀 바에 표시하고 싶을 때

구문

document.title // 페이지 타이틀

실습

document.title 속성으로 페이지의 타이틀 정보를 가져올 수 있으며, 읽기와 쓰기가 모두 가능합니다.

window.onload = () => {
  const apple = document.querySelector('.btn_apple');
  const orange = document.querySelector('.btn_orange');
  const desc = document.querySelector('.desc');
  console.log(desc);

  apple.addEventListener('click', () => { document.title = '사과 페이지'; desc.innerText = '사과 페이지'});
  orange.addEventListener('click', () => { document.title = '오렌지 페이지'; desc.innerText = '오렌지 페이지'});
}

페이지의 타이틀은 속성에 문자열을 대입하면 변경이 가능하며, 동적으로 변경하고 싶을 때 효과적입니다. 예를 들어, 채팅 앱에서 읽지 않은 메시지의 수를 타이틀에 표시할 때 유용합니다.