DOM과 이벤트

요소 찾기

const title = document.querySelector("#title");
const btn = document.querySelector("#btn");

없으면 null입니다. 존재 확인 후 쓰세요.

내용 바꾸기

title.textContent = "바뀜"; // 안전
// title.innerHTML = userInput; // 위험할 수 있음

이벤트

btn.addEventListener("click", () => {
  title.textContent = "클릭됨";
});

onclick 속성보다 addEventListener가 여러 핸들러·해제가 쉽습니다.

입력

const input = document.querySelector("#name");
input.addEventListener("input", () => {
  title.textContent = input.value.trim() || "이름 없음";
});

알고리즘 문제와의 차이

미리보기는 화면에 보이는 결과가 목표입니다.
채점 solve처럼 반환값 계약이 아닙니다.
그래도 상태(변수)와 UI를 분리해 두면 디버깅이 쉽습니다.

이벤트 객체

btn.addEventListener("click", (e) => {
  e.preventDefault(); // form 안 버튼일 때
  console.log(e.target);
});

위임

부모에 리스너를 달고 e.target으로 자식을 구분하면, 동적으로 생긴 버튼도 처리하기 쉽습니다.

상태와 UI

let count = 0;
btn.addEventListener("click", () => {
  count += 1;
  title.textContent = String(count);
});

숫자를 DOM에서 읽어 파싱하지 말고, 변수에 두고 화면만 갱신하세요.

연습

미리보기에서 버튼을 누를 때마다 문구가 바뀌는 최소 페이지를 만드세요.