[JavaScript] DOM(Document Object Model) 조작 완벽 가이드

by

JavaScript가 웹 페이지를 동적으로 만드는 핵심적인 역할을 할 수 있는 이유는 바로 **DOM(Document Object Model)**을 조작할 수 있기 때문입니다. DOM은 웹 페이지의 HTML 구조를 객체 모델로 표현한 것으로, JavaScript는 이 모델에 접근하여 HTML 요소(Element)를 선택하고, 내용을 변경하며, 새로운 요소를 추가하거나 삭제할 수 있습니다. 이 글에서는 가장 기본적이고 필수적인 DOM 조작 방법에 대해 알아보겠습니다.

1. HTML 요소 선택하기 (Querying)

DOM을 조작하기 위한 첫 단계는 원하는 HTML 요소를 선택하는 것입니다.

  • document.getElementById('id'): 주어진 id를 가진 단일 요소를 반환합니다. 가장 빠르고 일반적인 방법입니다.
  • document.getElementsByClassName('class'): 주어진 클래스 이름을 가진 모든 요소를 HTMLCollection으로 반환합니다.
  • document.getElementsByTagName('tag'): 주어진 태그 이름을 가진 모든 요소를 HTMLCollection으로 반환합니다.
  • document.querySelector('selector'): CSS 선택자 문법을 사용하여 일치하는 첫 번째 요소를 반환합니다. 매우 강력하고 유연합니다.
  • document.querySelectorAll('selector'): CSS 선택자와 일치하는 모든 요소를 NodeList로 반환합니다.
// ID로 선택
const mainTitle = document.getElementById('main-title');

// 클래스로 선택 (첫 번째 요소)
const firstItem = document.getElementsByClassName('list-item')[0];

// CSS 선택자로 선택
const button = document.querySelector('#submit-btn');
const allItems = document.querySelectorAll('.list-item');

2. 요소의 내용 및 속성 변경하기

요소를 선택했다면, 이제 그 내용을 변경하거나 속성을 조작할 수 있습니다.

  • element.textContent: 요소 내부의 텍스트 내용만을 가져오거나 설정합니다. HTML 태그는 무시됩니다.
  • element.innerHTML: 요소 내부의 HTML 구조 전체를 가져오거나 설정합니다. 보안에 유의해야 합니다(XSS 공격에 취약할 수 있음).
  • element.style.property: 요소의 CSS 스타일을 직접 변경합니다. (예: element.style.color = 'blue').
  • element.setAttribute('name', 'value'): 요소의 HTML 속성을 설정합니다.
  • element.getAttribute('name'): 요소의 HTML 속성 값을 가져옵니다.
  • element.classList: 클래스를 추가(add), 제거(remove), 확인(contains), 토글(toggle)할 수 있는 메소드를 제공합니다.
const title = document.querySelector('#main-title');

// 텍스트 내용 변경
title.textContent = '새로운 제목입니다!';

// 스타일 변경
title.style.color = 'red';
title.style.fontSize = '24px';

// 클래스 추가
title.classList.add('highlight');

3. 새로운 요소 생성 및 추가/삭제

JavaScript로 새로운 HTML 요소를 만들어 페이지에 동적으로 추가하거나 기존 요소를 삭제할 수 있습니다.

  • document.createElement('tag'): 새로운 요소를 생성합니다.
  • parent.appendChild(child): 자식 요소를 부모 요소의 마지막 자식으로 추가합니다.
  • parent.insertBefore(newNode, referenceNode): referenceNode 앞에 newNode를 추가합니다.
  • element.remove(): 해당 요소를 DOM에서 제거합니다.
// 새로운 li 요소 생성
const newListItem = document.createElement('li');
newListItem.textContent = '새로운 아이템';
newListItem.classList.add('list-item');

// ul 태그를 선택하여 자식으로 추가
const list = document.querySelector('#my-list');
list.appendChild(newListItem);

// 첫 번째 아이템 삭제
const firstItemToRemove = document.querySelector('.list-item');
if (firstItemToRemove) {
  firstItemToRemove.remove();
}

요약 및 정리

DOM 조작은 JavaScript를 이용한 프론트엔드 개발의 핵심 기술입니다.

  1. 선택: querySelector나 getElementById와 같은 메소드로 조작할 HTML 요소를 정확히 선택합니다.
  2. 조작: 선택한 요소의 textContent, innerHTML, style, classList 등을 사용하여 내용, 스타일, 속성을 변경합니다.
  3. 생성/변경: createElement, appendChild, remove를 통해 동적으로 페이지 구조를 생성하거나 변경합니다.

이러한 기본적인 DOM API를 능숙하게 사용하는 것은 사용자와 상호작용하는 동적인 웹 애플리케이션을 만드는 데 필수적이며, 모든 프론트엔드 프레임워크와 라이브러리의 근간이 되는 원리입니다.