HTML 페이지에 동적 기능을 부여하는 DOM(Document Object Model) 조작 기술을 정리했다.
자바스크립트를 사용하여 문서의 내용, 구조, 스타일을 실시간으로 변경하는 방식이다.
요소 선택 및 조작 프로세스
자바스크립트를 통한 화면 변경은 세 단계로 진행된다.
// 1. 요소 선택: CSS 선택자를 활용하여 대상 지정
const title = document.querySelector('#main-title');
title.textContent = '반갑습니다, 새로운 세상!';
// 2. 요소 생성: 새로운 UI 요소를 코드로 생성
const newDiv = document.createElement('div');
newDiv.className = 'alert-box';
newDiv.innerHTML = '<strong>알림:</strong> 새로운 내용이 추가되었습니다.';
// 3. 요소 삽입: 생성한 요소를 문서 내 특정 위치에 배치
const container = document.querySelector('.container');
container.appendChild(newDiv);
상태 제어: classList.toggle
요소의 표시 여부나 테마 전환 시 classList.toggle을 활용한다.
자바스크립트에서 직접 스타일을 수정하는 대신 CSS 클래스를 제어함으로써 디자인과 로직을 분리할 수 있다.
효율적인 DOM 관리
DOM 조작은 브라우저의 렌더링 비용을 발생시키므로 성능 최적화가 필요하다.
빈번한 조작 대신 DocumentFragment를 활용하거나 변경 사항을 통합 처리하는 방식이 권장된다.
기능 구현과 성능 최적화를 동시에 고려해야 하는 것 같다.
