🧩 [ DOM 객체 (Document Object Model) 정리 ]

---

📘 [ 정의 ]

DOM (Document Object Model)
HTML 문서를 객체로 다루기 위한 문서 표준 객체 구조

항목	설명
💡 목적	HTML 요소들을 객체처럼 조작하기 위해 사용
⚙️ 이유	객체는 속성과 함수를 가질 수 있어 동적 제어가 가능함
🧱 결과	HTML의 구조를 JS에서 접근, 수정, 삭제, 스타일링 가능

---

🧠 [ 주요 속성 및 함수 ]

구분	문법	설명	반환값
🔍 1. querySelector()	document.querySelector('선택자')	선택자에 해당하는 첫 번째 요소 반환	객체 1개
🔎 2. querySelectorAll()	document.querySelectorAll('선택자')	선택자에 해당하는 모든 요소 반환	배열(NodeList)
🧩 선택자 종류	1. 마크업명, 2. .클래스명, 3. #아이디명	CSS 선택자 규칙 동일	-
🌿 자식/자손 선택	'부모 > 자식'	자식 구조 탐색 가능	-
💬 3. innerHTML	DOM객체.innerHTML	태그 내부의 HTML 문자열 대입/호출	문자열
✍️ 4. value	DOM객체.value	<input>, <select>, <textarea>의 값 대입/호출	문자열
🎨 5. style	DOM객체.style = 'CSS속성:값'	CSS 속성 조작	문자열
🖼️ 6. src	DOM객체.src = '파일경로'	<img>, <audio> 등의 리소스 경로 제어	문자열
🗑️ 7. remove()	DOM객체.remove()	HTML 문서에서 해당 마크업 삭제	없음
🧮 8. classList	DOM객체.classList	클래스 제어 속성 (add/remove/toggle/contains)	객체

---

📦 [ classList 세부 기능 ]

메소드	설명	예시
add('클래스명')	지정한 클래스 추가	box.classList.add('active')
remove('클래스명')	지정한 클래스 삭제	box.classList.remove('hidden')
toggle('클래스명')	클래스 존재 여부에 따라 추가/삭제	btn.classList.toggle('on')
contains('클래스명')	클래스 존재 여부 확인 (true/false 반환)	if(box.classList.contains('active')) {...}

---

🎯 [ 앞으로의 계획 ✨ ]

목표	세부 내용
📚 꾸준한 복습	실습 과제 시 꼼수 쓰지 말고, 직접 로직 구상하며 풀기
🧠 정보처리기사 취득	자격증 목표 달성 → 💪 “무조건 한 번에 따자!”
🚀 프로그래밍 실력 향상	프로그래머스 레벨 3까지 완주 (수료 전 달성 목표)

---

💬 다짐:
“복습은 배움의 완성이다. 꾸준히 연습하고, 스스로의 한계를 넘어가자.”
“코드를 이해하는 개발자가 되자, 단순히 외우는 개발자가 아니라.”

---