Articles
TypeScript 소개
TypeScript에서 DOM 조작하기

TypeScript에서 DOM 조작하기

이 글은 TypeScript에서의 DOM 조작에 대해 설명합니다.

코드 예시를 통해 DOM 요소를 조작하는 방법, 그리고 DOM 트리에서 요소를 추가 또는 제거하는 방법을 배울 수 있습니다.

YouTube Video

TypeScript에서 DOM 조작하기

TypeScript에서의 DOM 조작은 JavaScript와 비슷하게 수행되지만, TypeScript는 타입 검사를 제공하여 작업을 더욱 안전하게 해줍니다. DOM(문서 객체 모델)은 HTML 및 XML 문서를 프로그래밍적으로 조작하기 위한 객체 모델입니다. 이를 통해 브라우저에 표시된 페이지에 접근하고, 요소를 추가 또는 제거하거나 스타일을 변경할 수 있습니다.

TypeScript로 DOM을 조작하는 기본적인 방법을 소개하겠습니다.

DOM 요소 얻기

document 객체를 사용해 HTML 요소를 얻을 수 있습니다. 다음과 같은 메서드들이 자주 사용됩니다:.

  1. document.getElementById document.getElementById는 지정된 ID 속성을 가진 요소를 가져옵니다.`.
1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}
  • document.getElementById는 지정된 ID를 가진 요소를 가져오고, 존재할 경우 그 내용에 접근할 수 있습니다.`.
  1. document.querySelector document.querySelector는 CSS 선택자와 일치하는 첫 번째 요소를 가져옵니다.`.
1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}
  • document.querySelector는 지정된 CSS 선택자와 일치하는 첫 번째 요소를 가져오고, 존재하면 그 내용을 확인할 수 있습니다.`.
  1. document.querySelectorAll document.querySelectorAll은 CSS 선택자와 일치하는 모든 요소를 가져옵니다.`.
1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));
  • document.querySelectorAll은 지정한 CSS 선택자와 일치하는 모든 요소를 가져오고, 반복(iteration)하여 그 내용을 접근할 수 있습니다.`.

요소 타입 단언

TypeScript에서는 요소의 타입을 명시적으로 단언하여 더 구체적인 속성이나 메서드를 사용할 수 있습니다.

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}
  • as 키워드는 TypeScript의 타입 단언 연산자로, 값을 특정 타입으로 컴파일러에 명시적으로 지정할 때 사용합니다.
  • TypeScript에서는 타입 단언을 사용하여 가져온 요소를 특정 타입으로 취급하고, 해당 타입의 속성이나 메서드에 접근할 수 있습니다.

DOM 조작하기

DOM 조작은 요소의 속성을 통해 수행됩니다. 이를 통해 텍스트나 속성의 변경을 유연하게 제어하고, 스타일을 적용하며, 표시되는 내용을 업데이트할 수 있습니다.

  1. 요소의 텍스트 변경

    textContent나 innerHTML을 사용하여 요소의 텍스트 또는 HTML을 변경할 수 있습니다.

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}
  • 요소의 textContent 또는 innerHTML을 사용하여 표시되는 텍스트나 HTML 내용을 변경할 수 있습니다.

  1. 요소의 스타일 변경

    요소의 style 속성을 사용해 인라인 스타일을 변경할 수 있습니다.

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}
  • 이 코드는 특정 요소를 가져와 텍스트 색상을 파란색으로 변경하고, 글꼴 크기를 20px로 설정합니다.

  1. 요소의 속성 변경

    요소의 속성을 변경하려면 setAttribute를 사용하세요.

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}
  • 이 코드는 페이지의 첫 번째 링크 요소의 href 속성을 https://example.com으로 변경합니다.

  1. 요소 클래스 조작

    요소의 클래스를 추가하거나 제거하려면 classList를 사용하세요.

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}
  • 이 코드는 특정 요소에 active 클래스를 추가하고 inactive 클래스를 제거합니다.

DOM 요소 추가 및 제거

또한 새로운 요소를 추가하거나 기존 요소를 제거할 수도 있습니다. 이를 통해 사용자 동작이나 애플리케이션 상태에 따라 동적으로 페이지 구조를 변경할 수 있습니다.

  1. 새 요소 만들기 및 추가하기

    document.createElement를 사용해 새 요소를 만들고 DOM에 추가할 수 있습니다.

1const newDiv = document.createElement('div');
2newDiv.textContent = 'New Element';  // Set the text content to 'New Element'
3document.body.appendChild(newDiv);  // Add the new element to the body
  • 이 코드는 새로운 <div> 요소를 생성하고, 텍스트를 설정한 후 페이지의 <body>에 추가합니다.

  1. 요소 제거

    요소를 제거하려면 removeChild 혹은 remove 메서드를 사용하세요.

 1const parentElement = document.getElementById('parentElement');
 2const childElement = document.getElementById('childElement');
 3if (parentElement && childElement) {
 4    parentElement.removeChild(childElement); // Remove the child element
 5}
 6
 7// Alternatively
 8const element = document.getElementById('myElement');
 9if (element) {
10    element.remove();  // Remove the element itself
11}
  • 이 코드는 특정 자식 요소를 부모로부터 제거하는 방법과 요소 자체를 직접 제거하는 방법을 보여줍니다.

이벤트 추가하기

TypeScript에서는 요소에 이벤트 리스너를 추가하여 사용자 상호작용에 따라 동작을 수행할 수 있습니다.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', () => {
4        console.log('Button was clicked');  // Log when the button is clicked
5    });
6}
  • 이 코드는 버튼이 클릭될 때 콘솔에 메시지를 표시하는 이벤트 리스너를 추가합니다.
  • addEventListener를 사용하여 클릭, 마우스 이동, 키보드 입력 등 다양한 이벤트를 감지하고 처리할 수 있습니다.

TypeScript에서 DOM 조작 시 주의사항

TypeScript로 DOM을 조작할 때는 요소의 타입 정의와 null 체크에 주의하면 오류를 방지하고 견고한 코드를 작성할 수 있습니다.

  1. 널(Null) 체크

    DOM 요소가 존재하지 않을 수 있으므로, TypeScript에서 요소를 조작하기 전에 널 체크를 하는 것이 권장됩니다.

  2. 명시적 타입 단언

    특정 요소(예: HTMLInputElement)를 조작할 때는 as를 사용해 타입을 명시적으로 지정하고, value와 같은 요소 고유 속성을 사용하는 것이 일반적입니다.

위 사항을 참고하면, TypeScript에서 DOM을 조작할 때 자바스크립트의 유연성과 TypeScript의 타입 안정성을 결합하여 더 안전하고 예측 가능한 코드를 작성할 수 있습니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

TypeScript의 window 객체TypeScript에서 DOM 조작/이벤트 처리를 위한 클래스