자바스크립트로 HTML을 움직인다! DOM 완전 정복 가이드

웹을 만드는 기술, 제대로 알고 계신가요? HTML이 설계도라면, DOM은 살아 숨 쉬는 구조입니다. 자바스크립트로 웹을 움직이고 싶다면 DOM부터 알아야 합니다.

안녕하세요! 프론트엔드 개발 실무와 교육을 병행하며 쌓은 노하우를 공유하는 개발자입니다. 이번 글에서는 웹의 핵심 구조인 DOM(Document Object Model)이 무엇인지부터, 자바스크립트를 활용해 DOM을 효과적으로 조작하는 실전 스킬까지 단계적으로 안내해드립니다. DOM 개념이 탄탄해지면 어떤 프레임워크를 쓰더라도 응용력이 확 달라질 거예요.

📌 바로가기 목차

1. DOM이란 무엇인가? 2. 자바스크립트로 HTML 요소 선택하기 3. DOM 내용, 속성, 스타일 바꾸기 4. 새로운 요소 추가하고 삭제하기 5. DOM 조작 시 성능과 보안 주의사항 6. 실전 예제: 동적으로 리스트 렌더링 7. 자주 묻는 질문 (FAQ)

Javascript, DOM을 설명하는 강사

1. DOM이란 무엇인가?

DOM(Document Object Model)은 웹 페이지를 메모리 상에 구조화해 표현한 자바스크립트 객체입니다. HTML 문서가 브라우저에 의해 해석되면, DOM이라는 계층적 트리 구조로 변환되어 자바스크립트로 제어할 수 있게 됩니다.

즉, HTML은 단순한 코드일 뿐이고, 실제로 웹 페이지에서 자바스크립트가 만지는 대상은 바로 이 DOM입니다. 텍스트를 바꾸거나, 버튼을 눌렀을 때 색이 변하는 등의 인터랙션은 모두 DOM 조작을 통해 이루어지죠.

DOM을 제대로 이해하면 정적인 HTML에서 벗어나 동적인 사용자 경험을 제공할 수 있으며, 이후 등장하는 프레임워크(React, Vue 등)의 핵심 개념도 훨씬 수월하게 받아들일 수 있습니다.

2. 자바스크립트로 HTML 요소 선택하기

웹 페이지의 내용을 바꾸거나 이벤트를 연결하려면, 가장 먼저 해야 할 일은 "요소 선택"입니다. HTML 문서에서 특정 태그를 자바스크립트로 찾아오는 다양한 방법들이 존재하며, 각각의 상황에 따라 적절히 선택해서 사용해야 해요.

선택 메서드	사용 용도	예시 코드
getElementById()	ID 속성으로 하나의 요소 찾기	document.getElementById("loginBtn")
querySelector()	CSS 선택자 기반으로 첫 번째 요소 선택	document.querySelector(".nav-item")
querySelectorAll()	CSS 선택자 기반으로 여러 요소 선택 (NodeList)	document.querySelectorAll("li.highlight")

최근에는 querySelector와 querySelectorAll이 가장 널리 쓰이고 있어요. CSS 선택자를 그대로 활용할 수 있어 코드가 간결하고 직관적이기 때문입니다. 또한 복잡한 구조에서도 유연하게 적용할 수 있어 실무에서도 자주 사용됩니다.

3. DOM 내용, 속성, 스타일 바꾸기

요소를 선택했다면 이제 그 요소를 실제로 바꾸는 일이 중요합니다. 텍스트 내용을 바꾸거나 이미지 경로를 바꾸고, 버튼 스타일을 토글하는 것—all 자바스크립트로 DOM을 조작해 만드는 변화입니다.

아래는 실무에서 자주 사용하는 DOM 수정 기능입니다. 단순한 UI 변화부터 조건 기반 인터랙션까지 다양하게 활용됩니다.

• element.textContent = "새 텍스트": 요소 안의 텍스트를 변경합니다.
• element.setAttribute("src", "new.png"): 이미지, 링크 등의 속성을 수정합니다.
• element.classList.toggle("active"): 특정 클래스를 추가하거나 제거할 수 있어요.
• element.style.color = "red": 인라인 스타일도 자바스크립트로 직접 변경할 수 있습니다.

예를 들어, 로그인 버튼을 클릭했을 때 버튼의 텍스트가 ‘로그아웃’으로 바뀌거나, 이미지를 클릭하면 설명이 나타나는 기능도 모두 DOM 수정이 기반입니다. 작은 변화가 사용자 경험을 바꾸는 핵심이죠!

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

실시간 사용자 인터페이스에서는 요소를 동적으로 생성하거나 제거하는 기능이 중요합니다. 예를 들어, 채팅 메시지 추가, 장바구니 항목 삭제 등 인터랙션이 필요한 곳에서 많이 사용됩니다.

메서드	설명
document.createElement('li')	새로운 요소를 생성
parent.appendChild(child)	부모 요소에 자식 요소 추가
element.remove()	기존 요소 삭제

이 방식은 특히 프론트엔드 프레임워크 이전에 순수 자바스크립트로 구현할 때 필수적인 기술입니다.

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

DOM을 직접 조작하는 것은 강력하지만, 무분별한 사용은 브라우저 성능 저하나 보안 취약점을 초래할 수 있습니다. 아래는 꼭 기억해야 할 실전 팁입니다.

주의할 점	해결 방법
반복적으로 DOM 조작	DocumentFragment 사용 또는 innerHTML 일괄 처리
innerHTML에 사용자 입력 삽입	XSS 방지를 위한 필터링 또는 textContent 사용
이벤트 리스너 과다 등록	이벤트 위임(delegation) 기법 활용

이러한 고려사항을 염두에 두면, DOM 조작을 통해 더욱 안전하고 성능 좋은 웹 페이지를 만들 수 있습니다.

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

이번에는 DOM 조작을 활용해 실제 데이터를 화면에 동적으로 렌더링하는 간단한 예제를 만들어 보겠습니다. 자바스크립트 배열 데이터를 기반으로 리스트(ul) 요소에 항목을 반복 추가하는 방식입니다.

💡 핵심 흐름:

• 1️⃣ 배열 순회 (forEach)
• 2️⃣ li 요소를 생성 및 내용 추가
• 3️⃣ ul 요소에 appendChild()로 삽입

const fruits = [\"사과\", \"바나나\", \"포도\", \"오렌지\"];
const list = document.getElementById(\"fruit-list\");

fruits.forEach(fruit => {
  const li = document.createElement(\"li\");
  li.textContent = fruit;
  list.appendChild(li);
});

이처럼 배열 기반의 리스트 렌더링은 실무에서도 자주 등장합니다. 댓글 목록, 알림, 상품 리스트 등 다양한 UI에 활용되며, 이후 React나 Vue 같은 프레임워크에서도 동일한 개념으로 연결됩니다.

※ 위 코드를 실행하려면 HTML 내에 <ul id=\"fruit-list\"></ul> 요소가 있어야 합니다.

7. 자주 묻는 질문 (FAQ)

Q DOM과 HTML의 차이는 무엇인가요?

HTML은 정적인 마크업 언어이고, DOM은 브라우저가 HTML을 읽어 메모리 구조로 변환한 동적 객체입니다. 자바스크립트는 DOM을 조작해 웹 페이지를 실시간으로 수정할 수 있습니다.

Q innerHTML을 사용해도 되나요?

간단한 UI에선 사용 가능하지만, 사용자 입력을 그대로 넣으면 XSS(크로스 사이트 스크립팅) 공격에 노출됩니다. textContent나 정제 도구를 사용하는 것이 안전합니다.

Q DOM 조작이 성능에 영향을 미치나요?

네. DOM을 반복적으로 조작하면 렌더링 비용이 커지고, 리플로우/리페인트로 인해 성능 저하가 발생할 수 있습니다. 일괄 조작이나 DocumentFragment 활용을 권장합니다.

지금까지 DOM(Document Object Model)의 개념부터 시작해 요소를 선택하고 수정하는 기본적인 조작 방법, 그리고 동적으로 요소를 추가하거나 삭제하는 실전 예제까지 함께 알아봤습니다. 이 글이 DOM을 처음 배우는 분들에게 도움이 되었기를 바랍니다.

웹 개발의 시작은 결국 DOM 이해에서 비롯됩니다. 기초를 탄탄히 다져두면 이후 프레임워크를 배우거나 실무에서 문제를 해결할 때도 훨씬 수월해질 거예요.