반응형
JavaScript를 활용한 웹 개발에서 DOM(Document Object Model) 조작은 필수적인 기술입니다. DOM을 통해 HTML 요소를 선택하고, 내용을 변경하거나 스타일을 수정할 수 있습니다. 특히 document.getElementById() 같은 메서드는 가장 기본이 되는 DOM 조작 방법입니다. 하지만 초보자들은 종종 요소 선택 실패나 JavaScript 실행 순서로 인한 오류를 겪습니다. 이번 포스팅에서는 DOM 조작의 기본 방법부터 자주 발생하는 오류 해결 방법까지 자세히 설명하겠습니다.
1. DOM이란 무엇인가?
1) DOM의 개념
- DOM은 HTML 문서를 트리 구조로 표현한 모델입니다.
- JavaScript는 DOM을 통해 HTML 요소에 접근하고 조작할 수 있습니다.
2) DOM 구조 예시
<body>
<div id="container">
<p class="text">Hello, World!</p>
</div>
</body>
- 위 구조는 트리 형태로 구성되며, 각 요소는 노드(node)로 표현됩니다.
2. 주요 DOM 선택자 및 사용법
1) document.getElementById()
const title = document.getElementById('title');
title.textContent = '변경된 제목';
- ID로 요소를 선택하며, 하나의 요소만 반환합니다.
2) document.getElementsByClassName()
const items = document.getElementsByClassName('item');
for (let i = 0; i < items.length; i++) {
items[i].style.color = 'blue';
}
- 클래스 이름으로 여러 요소를 선택합니다.
3) document.querySelector() / querySelectorAll()
const firstItem = document.querySelector('.item');
const allItems = document.querySelectorAll('.item');
- CSS 선택자 형식으로 요소를 선택할 수 있어 매우 유연합니다.
3. DOM 조작 예제
1) 텍스트 내용 변경
document.getElementById('text').textContent = '새로운 텍스트';
2) HTML 내용 삽입
document.getElementById('box').innerHTML = '<strong>굵은 텍스트</strong>';
3) 스타일 변경
document.querySelector('.btn').style.backgroundColor = 'red';
4) 클래스 추가 및 제거
const element = document.getElementById('myDiv');
element.classList.add('active');
element.classList.remove('hidden');
4. 자주 발생하는 오류와 해결 방법
1) Uncaught TypeError: Cannot read properties of null
- 원인: 선택한 요소가 존재하지 않을 때 발생
- 해결 방법: 요소가 존재한 이후에 JavaScript 실행되도록 처리
방법 1: DOMContentLoaded 사용
document.addEventListener('DOMContentLoaded', () => {
const el = document.getElementById('title');
el.textContent = '준비 완료';
});
방법 2: script 태그 위치 변경
<!-- HTML 하단에 스크립트 작성 -->
<script src="script.js"></script>
2) 스타일 적용 안됨
- 원인: 선택자 오류, inline 스타일 우선순위 문제
- 해결 방법: 올바른 선택자 사용 및 우선순위 확인
3) querySelectorAll로 선택한 요소가 반복되지 않음
- 해결 방법: NodeList에 forEach 또는 반복문 사용
document.querySelectorAll('.item').forEach(el => {
el.style.color = 'green';
});
5. 추가 팁 및 참고 사항
- console.log()를 통해 선택한 요소가 올바르게 선택되었는지 반드시 확인하세요.
- CSS 선택자 문법을 이해하면 querySelector()를 더욱 강력하게 활용할 수 있습니다.
- 조건부 렌더링 시 요소가 존재하지 않을 수 있으므로 if (el) 조건문을 자주 활용하세요.
6. 요약 및 마무리
이번 포스팅에서는 JavaScript의 DOM 조작 방법과 오류 해결법을 정리했습니다. getElementById, querySelector 등 다양한 선택자 메서드를 통해 HTML 요소에 접근하고 내용을 변경하거나 스타일을 적용할 수 있습니다. 초보자들이 자주 겪는 오류들은 대부분 DOM 로딩 타이밍 문제이므로, DOMContentLoaded 이벤트나 script 위치 조정으로 해결할 수 있습니다. 실습을 통해 익히고, 콘솔 로그를 활용하여 디버깅하는 습관을 들이세요.
7. 관련 글 링크
- 관련 글: JavaScript의 이벤트 리스너 (Event Listener) 사용법과 오류 해결 방법
반응형
'자바스크립트(JavaScript)' 카테고리의 다른 글
| [JavaScript] form 입력값 검증하는 방법 (submit 전에 체크하기) (0) | 2025.04.05 |
|---|---|
| [JavaScript] setTimeout과 setInterval 완전 정복 (비동기 타이머 사용법) (0) | 2025.04.05 |
| [JavaScript] LocalStorage와 SessionStorage의 차이점과 사용법 (0) | 2025.03.31 |
| [JavaScript] fetch() 함수 사용법과 오류 해결 방법 (0) | 2025.03.31 |
| [JavaScript] 객체(Object)와 JSON 사용법 및 차이점 정리하기 (1) | 2025.03.30 |
댓글