📌 1. DOM이란?
• DOM은 HTML, XML 문서를 트리 구조로 표현한 객체 모델입니다.
• 문서 내 모든 요소는 **노드(node)**로 표현되며, JavaScript에서 이를 조작할 수 있습니다.<body>
<h1>Hello</h1>
<p>Welcome!</p>
</body>// 위 HTML은 다음과 같은 DOM 트리로 표현됩니다:
Document
└── html
└── body
├── h1
└── p📌 2. DOM 접근 방법
▶️ 대표적인 선택자 API
• document.getElementById()
• document.querySelector() / querySelectorAll()
• document.getElementsByClassName() / getElementsByTagName()
const title = document.getElementById('main-title');
const paragraphs = document.querySelectorAll('p');📌 3. DOM 조작
▶️ 속성 변경
title.textContent = '안녕하세요';
title.style.color = 'blue';▶️ 요소 생성, 추가, 삭제
const newDiv = document.createElement('div');
newDiv.textContent = '새 요소';
document.body.appendChild(newDiv);
newDiv.remove(); // 삭제📌 4. 이벤트 처리
• DOM 요소는 이벤트 리스너를 통해 사용자 인터랙션을 처리할 수 있음title.addEventListener('click', () => {
alert('제목 클릭됨');
});📝 정리
• DOM은 문서 구조를 트리 형태로 표현하고, JS로 조작 가능
• 요소 선택 → 속성 조작 → 이벤트 처리까지 연결
• DOM API를 숙지하면 사용자 경험을 개선하는 UI 개발이 가능
• 실제 개발에서 이벤트 위임, 렌더링 최적화와 함께 사용됨✅ 활용 코드
const btn = document.querySelector('#toggle-btn');
const box = document.querySelector('.box');
btn.addEventListener('click', () => {
box.classList.toggle('active');
});
// 위와 같은 방식으로 DOM 요소와 상호작용하여 인터랙션을 구현할 수 있습니다.
프론트엔드 개발자가 되고싶은 대학생