DOM이 뭐길래? 자바스크립트로 웹을 조작하는 첫걸음

HTML은 뼈대, CSS는 옷, 자바스크립트는 움직임! DOM을 몰라선 제대로 웹을 다룰 수 없어요.

안녕하세요, JS 초보 시절부터 지금까지 수많은 삽질과 깨달음을 거쳐온 프론트엔드 개발자입니다. 이번 포스팅에서는 웹 개발자라면 반드시 알아야 할 DOM(Document Object Model)의 개념부터, 자바스크립트로 DOM을 다루는 핵심 기술들을 단계별로 설명드릴게요. 예전엔 `getElementById` 하나도 어색했는데, 지금은 DOM 없이는 코드를 짤 수가 없죠. 기초 개념을 단단히 잡고 나면 어떤 프레임워크를 다루더라도 흔들리지 않는 실력이 만들어질 거예요!

바로가는 목차

1. DOM이란 무엇인가? 2. DOM 요소 접근 방법 총정리 3. DOM 수정하기: 텍스트, 속성, 클래스 변경 4. 새로운 요소 추가하고 삭제하기 5. DOM 조작 시 성능과 보안 주의사항 6. 실전 예제: 동적으로 리스트 렌더링

DOM이란 무엇인가?

DOM(Document Object Model)은 웹 페이지의 구조를 트리 형태로 표현한 객체 모델이에요. 브라우저는 HTML 문서를 읽은 뒤 DOM이라는 자바스크립트 객체 구조로 변환해서 메모리에 저장해요. 이 구조를 통해 개발자는 자바스크립트를 사용해 HTML 요소에 접근하고, 수정하거나 삭제, 추가할 수 있게 되는 거죠.

쉽게 말해, 브라우저가 HTML을 이해하고 프로그래밍 언어로 조작할 수 있도록 바꿔놓은 일종의 가상 지도라고 생각하면 돼요. 이 DOM을 잘 이해하는 것이 자바스크립트를 통한 동적 웹 개발의 핵심입니다!

DOM 요소 접근 방법 총정리

메서드	설명	예시
getElementById	ID를 기준으로 하나의 요소를 선택	document.getElementById("title")
querySelector	CSS 선택자로 첫 번째 요소 선택	document.querySelector(".btn")
getElementsByClassName	특정 클래스의 모든 요소 선택 (HTMLCollection)	document.getElementsByClassName("item")

요소에 접근하는 방식은 다양하지만, 요즘은 주로 querySelector나 querySelectorAll을 사용하는 경우가 많습니다. CSS 선택자 방식이라 직관적이거든요!

DOM 수정하기: 텍스트, 속성, 클래스 변경

DOM 요소를 선택한 뒤에는 다양한 방식으로 내용을 수정할 수 있어요. 예를 들어 텍스트를 바꾸거나, 이미지를 교체하고, 클래스명을 추가하거나 삭제할 수도 있죠. 아래는 자주 쓰이는 DOM 수정 메서드입니다:

• element.textContent: 텍스트 노드 변경
• element.setAttribute(): 속성 추가/변경
• element.classList.add/remove/toggle(): 클래스 제어

이런 조작을 통해 사용자 인터랙션에 반응하거나 실시간 UI 변화를 만들어낼 수 있어요. 웹이 "살아 움직이는" 것처럼 보이게 만드는 비결, 바로 여기서 시작됩니다!

새로운 요소 추가하고 삭제하기

DOM을 조작하는 진짜 재미는 바로 ‘새로운 요소’를 동적으로 생성하고, 필요 없어진 요소는 깔끔히 삭제할 수 있다는 점이에요. 사용자 경험을 풍부하게 만들고, 페이지를 새로 고치지 않아도 내용이 바뀌는 인터랙션이 가능해지죠.

가장 기본적인 흐름은 다음과 같아요: createElement → 속성 설정 → 부모에 appendChild 그리고 삭제는 remove()나 removeChild() 메서드를 사용합니다.

메서드	설명
document.createElement('tag')	요소를 생성합니다.
parent.appendChild(child)	부모 요소에 자식 요소를 추가합니다.
element.remove()	요소를 삭제합니다.

DOM 조작 시 성능과 보안 주의사항

DOM을 자유자재로 조작할 수 있게 되면 신나기 마련이지만, 무분별한 DOM 사용은 브라우저 성능 저하나 보안 문제를 초래할 수 있어요. 아래는 꼭 기억해야 할 실전 팁입니다.

주의할 점	해결 방법
반복적으로 DOM 조작	Fragment 또는 innerHTML 한 번에 처리
innerHTML에 사용자 입력 넣기	XSS 방지 필터링 필수
이벤트 리스너 과다 등록	이벤트 위임(delegate) 사용

실전 예제: 동적으로 리스트 렌더링

마지막으로, 자바스크립트로 배열 데이터를 기반으로 리스트를 생성해보는 실전 예제를 볼게요. 아래 순서를 따라 하면 간단한 동적 렌더링이 가능합니다.

1. 배열 데이터를 forEach로 순회
2. 각 항목마다 li 요소를 생성
3. ul 요소에 appendChild로 추가

실제로 이런 방식으로 댓글, 게시글, 알림 리스트 등 거의 모든 UI 요소를 구성하게 됩니다. DOM의 진짜 쓸모는 이 실전 활용에 있어요!

자주 묻는 질문 (FAQ)

Q DOM과 HTML은 어떻게 다른가요?

HTML은 정적인 마크업 문서이고, DOM은 브라우저가 이를 메모리 상에서 구조화한 객체입니다. 즉, 자바스크립트가 조작하는 대상은 DOM이에요.

Q querySelector와 getElementById의 차이는?

querySelector는 CSS 선택자를 활용해 요소를 찾을 수 있고 더 유연합니다. 반면 getElementById는 ID 기준으로 하나의 요소만 빠르게 가져올 수 있어요.

Q innerHTML로 데이터 바꿔도 괜찮을까요?

간단한 경우에는 괜찮지만, 사용자 입력을 그대로 넣을 경우 보안상 위험합니다(XSS). 텍스트만 바꿀 땐 textContent를 쓰는 게 좋아요.

 

Q 모든 DOM 변경은 실시간으로 반영되나요?

네, 브라우저는 DOM 변경을 감지하면 바로 렌더링합니다. 하지만 너무 잦은 조작은 리플로우(Reflow)로 성능 저하를 유발할 수 있어요.

지금까지 DOM의 개념부터 시작해 요소를 선택하고, 조작하고, 생성/삭제하는 과정까지 함께 알아봤습니다. 초보 시절엔 어렵게 느껴졌던 DOM도 이렇게 차근차근 정리해 보면 명확해지죠! 실무에서도 자주 활용되는 핵심 지식이니, 틈틈이 코드를 작성해보면서 감을 익혀보세요. 다음 연재에서는 이벤트 처리와 인터랙션에 대해 다룰 예정이니, 계속 함께해 주세요 :)