자바스크립트 객체와 DOM 이벤트로 구현한 온도 단위 변환기

✅ 자바스크립트 DOM 객체 기반 학습 정리

📌 1. DOM(Document Object Model) 요소 접근

• document.getElementById()
• document.querySelector()
• document.querySelectorAll()
  → HTML 요소를 자바스크립트 객체로 참조해서 동작 제어 가능

const txt1 = document.querySelector("input"); 
const lab1 = document.querySelector('[for=txt1]');

---

📌 2. 객체 중심의 함수 설계 (선택 상태 변화 통합 처리)

const selChange = (s1, s2, l1, l2, t1, t2) => { 
    s2.value = (s1.value === "℃") ? "℉" : "℃"; 
    l1.innerHTML = s1.value; 
    l2.innerHTML = s2.value; 
    t1.value = ""; t2.value = ""; 
    t1.focus(); 
}

• 중복 제거 → 재사용 가능성 증가
• 함수에 DOM 객체를 매개변수로 전달하여 동적 제어

---

📌 3. 이벤트 객체와 DOMContentLoaded

document.addEventListener('DOMContentLoaded', () => { ... });

• DOM이 완전히 로드된 후에 스크립트 실행
• 이벤트 리스너 등록은 객체 기반 행동 정의

---

📌 4. 입력값에 따른 조건 분기 및 계산 처리

txt1.addEventListener('input', () => { 
    if(sel1.value === "℃") { 
    txt2.value = ((txt1.value * 9/5) + 32).toFixed(4); 
    } else { 
    txt2.value = ((txt1.value - 32) * 5/9).toFixed(4); 
    }
});

• 객체의 상태(value) 에 따라 동작 결정
• 연산 결과를 다른 객체(txt2) 의 값으로 동기화

---

📌 5. 객체간 연결 구조 (의미 있는 관계 정의)

• select → label → input: 역할 기반 연결
• 함수 설계에서 DOM 객체들을 인자로 주고받으며 유기적인 관계 설정

---

🧠 핵심 포인트 요약

항목내용

DOM 객체	HTML 요소를 JS에서 조작 가능
함수 분리	중복 코드 제거, 유지보수 용이
이벤트 리스너	사용자 입력/행동에 대한 반응
객체 조작	.value, .innerHTML, .focus() 등으로 상태 변경
계산 로직	객체 상태 기반 조건 분기 (섭씨↔화씨)