DOM이 뭐길래? 자바스크립트로 웹을 조작하는 첫걸음
HTML은 뼈대, CSS는 옷, 자바스크립트는 움직임! DOM을 몰라선 제대로 웹을 다룰 수 없어요.
안녕하세요, JS 초보 시절부터 지금까지 수많은 삽질과 깨달음을 거쳐온 프론트엔드 개발자입니다. 이번 포스팅에서는 웹 개발자라면 반드시 알아야 할 DOM(Document Object Model)의 개념부터, 자바스크립트로 DOM을 다루는 핵심 기술들을 단계별로 설명드릴게요. 예전엔 `getElementById` 하나도 어색했는데, 지금은 DOM 없이는 코드를 짤 수가 없죠. 기초 개념을 단단히 잡고 나면 어떤 프레임워크를 다루더라도 흔들리지 않는 실력이 만들어질 거예요!
📌 콘텐츠 미리보기
1. DOM이란 무엇인가?
DOM(Document Object Model)은 웹 페이지의 구조를 트리 형태로 표현한 객체 모델이에요. 브라우저는 HTML 문서를 읽은 뒤 DOM이라는 자바스크립트 객체 구조로 변환해서 메모리에 저장해요. 이 구조를 통해 개발자는 자바스크립트를 사용해 HTML 요소에 접근하고, 수정하거나 삭제, 추가할 수 있게 되는 거죠.
즉, DOM은 브라우저가 HTML을 이해하고 프로그래밍 언어로 조작할 수 있도록 만든 가상 트리 구조입니다. 자바스크립트로 웹을 다루려면 DOM 이해는 필수예요!
2. DOM 요소 접근 방법 총정리
DOM 요소에 접근하는 방법은 다양하지만, 상황에 따라 효율적인 선택이 필요합니다. 아래는 가장 많이 사용하는 접근 메서드들을 정리한 표입니다.
| 메서드 | 설명 | 예시 |
|---|---|---|
| getElementById | ID 기준으로 단일 요소 선택 | document.getElementById("title") |
| querySelector | CSS 선택자 기반 단일 요소 선택 | document.querySelector(".btn") |
| querySelectorAll | CSS 선택자 기반 모든 요소 선택 | document.querySelectorAll("li") |
| getElementsByClassName | 클래스 기준 요소들 선택 (HTMLCollection 반환) | document.getElementsByClassName("item") |
요즘은 CSS 선택자처럼 직관적인 querySelector / querySelectorAll을 많이 사용합니다.
3. DOM 수정하기: 텍스트, 속성, 클래스 변경
DOM 요소를 선택한 후에는 다양한 방식으로 내용을 수정할 수 있습니다. 텍스트를 바꾸거나 이미지 속성을 변경하고, 클래스명을 추가하거나 삭제할 수도 있죠.
element.textContent: 텍스트 노드를 변경합니다.element.setAttribute(): 속성을 추가하거나 변경합니다.element.classList.add/remove/toggle(): 클래스를 동적으로 제어합니다.
4. 새로운 요소 추가하고 삭제하기
실시간 UI 구성에는 요소를 동적으로 추가하거나 삭제하는 것이 필요합니다. 아래는 자주 쓰이는 메서드입니다.
| 메서드 | 설명 |
|---|---|
| document.createElement('div') | 새로운 요소 생성 |
| parent.appendChild(child) | 부모 요소에 자식 요소 추가 |
| element.remove() | 요소 삭제 |
5. DOM 조작 시 성능과 보안 주의사항
DOM을 조작할 수 있게 되면 신나지만, 성능 저하나 보안 이슈가 생길 수 있습니다. 특히 반복적으로 DOM을 갱신하거나 사용자 입력을 검증 없이 출력할 때 주의해야 합니다.
| 문제 | 해결 방법 |
|---|---|
| 반복적인 DOM 갱신 | innerHTML 또는 DocumentFragment로 일괄 처리 |
| 사용자 입력을 그대로 출력 | XSS 방지를 위해 입력 검증 필수 |
| 불필요한 이벤트 리스너 남발 | 이벤트 위임(Event Delegation) 사용 |
6. 실전 예제: 동적으로 리스트 렌더링
아래는 배열을 기반으로 HTML 리스트를 동적으로 생성하는 자바스크립트 코드 예시입니다. 실무에서도 댓글, 알림, 카드 UI 등에 자주 쓰이는 방식이에요.
- 배열 데이터를 forEach로 순회
- 각 항목마다 li 요소를 생성
- ul 요소에 appendChild로 추가
const items = ['HTML', 'CSS', 'JavaScript'];
const ul = document.createElement('ul');
items.forEach(text => {
const li = document.createElement('li');
li.textContent = text;
ul.appendChild(li);
});
document.body.appendChild(ul);
위 코드를 활용하면, 사용자가 입력한 데이터를 바로 리스트 형태로 출력하거나, 서버에서 받은 JSON 배열을 화면에 렌더링하는 기능을 쉽게 구현할 수 있습니다.
7. 자주 묻는 질문 (FAQ)
HTML은 정적인 마크업이고, DOM은 이를 자바스크립트가 조작할 수 있게 만든 트리 구조의 객체입니다. DOM은 브라우저가 HTML을 해석한 결과예요.
getElementById는 ID 하나만 빠르게 선택하고, querySelector는 CSS 선택자를 활용해 유연하게 요소를 선택할 수 있어요.
간단한 텍스트 변경엔 괜찮지만, 사용자 입력을 그대로 넣으면 보안 취약점(XSS)에 노출될 수 있어요. textContent 사용을 추천합니다.
네, DOM이 변경되면 브라우저는 자동으로 화면을 다시 렌더링합니다. 단, 변경이 많으면 렌더링 비용도 커져 성능 저하가 발생할 수 있어요.
지금까지 DOM의 개념부터 시작해 요소를 선택하고, 조작하고, 생성/삭제하는 과정까지 함께 알아봤습니다. 초보 시절엔 어렵게 느껴졌던 DOM도 이렇게 차근차근 정리해 보면 명확해지죠! 다음 연재에서는 이벤트 처리와 사용자 인터랙션에 대해 다룰 예정이니, 계속 함께해 주세요 :)
#JavaScript #DOM #웹개발기초 #프론트엔드 #HTML조작 #자바스크립트기초 #동적웹 #웹프로그래밍 #초보개발자 #코딩학습
댓글
댓글 쓰기