🧠 [ JavaScript 복습 : 함수(Function) & DOM 객체 ]

---

⚙️ [ 함수 (Function) ]

구분	설명
🧩 변수	하나의 자료를 저장
⚙️ 함수	코드(명령어)를 저장 — 실행 가능한 코드 블록

📘 정의

특정한 {} 안에 미리 정의된 코드 또는 명령어 집합

🎯 목적

1️⃣ 코드 재사용 (유지보수 용이)
2️⃣ 매개변수에 따른 다양한 결과 도출
3️⃣ 함수 실행 중에만 존재하는 지역변수 및 매개변수 관리

🧾 사용법

구분	문법	설명
선언	function 함수명(매개변수){ 실행코드; }	함수를 정의
호출 (JS)	함수명(인수);	정의된 함수 실행
호출 (HTML)	<button>	이벤트 발생 시 함수 실행

🧱 주요 키워드

키워드	설명
🧮 매개변수	함수 실행 시 전달되는 값 저장용 변수
⚡ 실행문	실제로 동작하는 코드 블록 {}
🔁 반환값(return)	함수 종료 후 반환되는 값 (자료 1개만 가능)

📌 Tip:

• 함수를 정의하기 전에 주요 키워드와 목적을 글로 먼저 써보자.
• 예시 코드:

function add(num1, num2){
  return num1 + num2;
}
let result = add(3, 5); // 8

---

🧩 [ DOM 객체 (Document Object Model) ]

HTML 문서를 객체로 표현하여 조작하기 위한 구조
즉, “HTML을 JS로 제어할 수 있게 하는 인터페이스”

🧠 기본 개념

구분	설명
⚙️ 객체	속성과 함수를 하나로 묶은 자료형
🔹 호출 방법	객체명.속성명 → 속성 호출 / 객체명.함수명() → 함수 실행
💬 예시	console.log() → console 객체의 log 함수 호출

---

📗 주요 DOM 속성 및 함수

구분	문법	설명
🧱 1. document.write()	document.write('내용')	HTML 문서에 문자열 출력
🔍 2. querySelector()	document.querySelector('선택자')	선택자와 일치하는 첫 번째 요소 반환
🔎 3. querySelectorAll()	document.querySelectorAll('선택자')	선택자와 일치하는 모든 요소를 배열(NodeList)로 반환
🧩 4. innerHTML	DOM객체.innerHTML	태그 내부의 HTML 내용 호출/대입
✍️ 5. value	DOM객체.value	<input>, <select>, <textarea>의 값 대입/호출
🎨 6. style	DOM객체.style = 'CSS속성:값'	마크업의 스타일 속성 제어
🧱 7. style.속성명	DOM객체.style.color = 'red'	특정 CSS 속성만 변경
🧮 8. classList	DOM객체.classList	클래스 리스트 반환 및 제어

---

📦 [ classList 세부 메소드 ]

메소드	설명	예시
add('클래스명')	지정한 클래스 추가	div.classList.add('active')
remove('클래스명')	지정한 클래스 삭제	div.classList.remove('hidden')
toggle('클래스명')	없으면 추가, 있으면 삭제	btn.classList.toggle('on')
contains('클래스명')	클래스 존재 여부 반환 (true/false)	div.classList.contains('active')

---