요소 선택·생성·변경과 이벤트 처리, 이벤트 위임을 배운다.

DOM 조작과 이벤트

브라우저의 화면은 DOM(Document Object Model)이라는 트리로 표현됩니다. JavaScript 로 이 트리를 읽고 바꾸며 사용자와 상호작용하는 법을 배웁니다.

학습 목표

querySelector 로 요소를 선택할 수 있다
요소를 생성·삽입·변경할 수 있다
classList 로 클래스를 다룰 수 있다
addEventListener 로 이벤트를 처리할 수 있다
이벤트 객체와 위임, preventDefault 를 활용할 수 있다

요소 선택

const title = document.querySelector('#title');     // CSS 선택자, 첫 요소
const items = document.querySelectorAll('.item');    // 모두 (NodeList)
items.forEach((el) => console.log(el.textContent));

메서드	반환
`querySelector(sel)`	일치하는 첫 요소 (없으면 `null`)
`querySelectorAll(sel)`	일치하는 모든 요소 (NodeList)
`getElementById(id)`	id 로 단일 요소

내용과 속성 변경

const el = document.querySelector('#box');

el.textContent = '안녕하세요';        // 텍스트 (안전)
el.innerHTML = '<b>강조</b>';        // HTML (주의)
el.setAttribute('data-id', '7');     // 속성 설정
el.style.color = 'red';              // 인라인 스타일

⚠️ 주의 — 사용자 입력을 innerHTML 에 그대로 넣으면 XSS 공격에 취약합니다. 단순 텍스트는 textContent 를 쓰세요.

classList

const el = document.querySelector('#menu');

el.classList.add('open');
el.classList.remove('hidden');
el.classList.toggle('active');           // 있으면 제거, 없으면 추가
console.log(el.classList.contains('open')); // → true

요소 생성과 삽입

const li = document.createElement('li');
li.textContent = '새 항목';
li.classList.add('item');

const list = document.querySelector('#list');
list.appendChild(li);          // 끝에 추가
list.prepend(li);              // 앞에 추가
li.remove();                   // 삭제

여러 요소를 한 번에 넣을 때는 문서 조각을 쓰면 효율적입니다.

const frag = document.createDocumentFragment();
['A', 'B', 'C'].forEach((text) => {
  const li = document.createElement('li');
  li.textContent = text;
  frag.appendChild(li);
});
list.appendChild(frag); // 단 한 번만 DOM 에 반영

이벤트 처리

const btn = document.querySelector('#save');

btn.addEventListener('click', (event) => {
  console.log('클릭됨', event.target);
});

이벤트 객체에는 유용한 정보와 메서드가 담겨 있습니다.

form.addEventListener('submit', (e) => {
  e.preventDefault();   // 기본 동작(페이지 새로고침) 막기
  console.log(e.type);  // → submit
  console.log(e.target); // 이벤트가 발생한 요소
});

💡 TIP — 폼 제출, 링크 클릭 등 브라우저 기본 동작을 막을 때 e.preventDefault() 를 씁니다.

이벤트 위임

자식이 많을 때 각각에 리스너를 다는 대신, 부모 하나에만 달고 event.target 으로 구분합니다.

const list = document.querySelector('#todo-list');

list.addEventListener('click', (e) => {
  // 클릭된 것이 삭제 버튼이라면
  if (e.target.matches('.delete')) {
    e.target.closest('li').remove();
  }
});

💡 TIP — 이벤트 위임은 이벤트가 부모로 버블링되는 성질을 이용합니다. 동적으로 추가되는 요소도 자동으로 처리되어 매우 유용합니다.

요약

querySelector/querySelectorAll 로 CSS 선택자처럼 요소를 고른다
텍스트는 textContent, HTML 은 innerHTML(XSS 주의)로 다룬다
classList 의 add·remove·toggle 로 클래스를 조작한다
createElement + appendChild 로 요소를 만들고 삽입한다
이벤트 위임과 preventDefault 로 효율적이고 의도된 동작을 만든다

연습문제

버튼을 클릭하면 <p> 의 텍스트를 "클릭됨!"으로 바꾸는 코드를 작성하세요.
입력값을 받아 목록(<ul>)에 새 <li> 로 추가하는 코드를 작성하세요.

힌트 — createElement → textContent → appendChild
폼 제출 시 페이지가 새로고침되지 않도록 막고, 입력값을 콘솔에 출력하세요.
목록 전체에 하나의 클릭 리스너만 달아, 각 항목 옆 삭제 버튼이 눌리면 해당 항목을 제거하세요(이벤트 위임).

힌트 — e.target.matches('.delete') 와 closest('li')

💡 연습문제 풀이

불러오는 중…

DOM 조작과 이벤트

학습 목표

요소 선택

내용과 속성 변경

classList

요소 생성과 삽입

이벤트 처리

이벤트 위임

요약

연습문제

함께 보면 좋은 자료

📑 치트시트

🛠 자주 나는 에러

🧰 개발자 도구

✅ 복습 퀴즈

댓글 0