DOM 조작

웹페이지를 살아 움직이게 만드는 기술

​JavaScript를 공부할 때 가장 먼저 마주하는 개념 중 하나가 바로 DOM(Document Object Model) 조작입니다. DOM은 간단히 말해 HTML 문서를 객체 형태로 표현한 구조입니다. HTML 태그 하나하나가 JavaScript에서 접근할 수 있는 객체로 변환되며, 이를 이용하면 웹페이지의 내용을 바꾸거나 스타일을 적용할 수 있습니다.

예를 들어, 버튼을 누르면 글자가 바뀌도록 만들고 싶다고 합시다. HTML에 <p id="text">안녕하세요</p> 라는 요소가 있다면, JavaScript에서는 이렇게 접근할 수 있습니다.

document.getElementById("text").innerText = "반갑습니다!";

이 한 줄의 코드로, 웹페이지의 글자가 즉시 변경됩니다. 이것이 바로 DOM 조작의 힘입니다.

DOM 접근 방법

1. getElementById – 특정 ID를 가진 요소 선택

2. getElementsByClassName – 같은 클래스를 가진 요소들 선택

3. querySelector – CSS 선택자 방식으로 요소 선택

4. querySelectorAll – CSS 선택자와 일치하는 모든 요소 선택

이러한 선택자를 이용해 원하는 HTML 태그에 접근한 뒤, innerText, innerHTML, style, classList 등을 조작해 다양한 효과를 줄 수 있습니다.

DOM 조작 활용 예시

• 버튼 클릭 시 특정 영역 보이기/숨기기

• 입력창에 글자를 입력하면 실시간으로 미리보기 출력

• 웹페이지 테마를 버튼 하나로 다크 모드/라이트 모드 전환

• 동적으로 새로운 요소 추가 및 삭제

과거에는 DOM 조작이 꽤 번거로웠지만, 지금은 표준화된 API 덕분에 비교적 단순하게 사용할 수 있습니다. jQuery 같은 라이브러리 없이도 충분히 다양한 기능을 구현할 수 있죠.

DOM 조작은 JavaScript의 핵심 중 하나이며, “웹페이지를 동적으로 만든다”는 말은 곧 DOM을 다룬다는 의미입니다. 기본적인 선택자와 속성 변경법만 익혀도 훨씬 풍부한 사용자 경험을 제공할 수 있습니다.